ASP.NET Core MVC Helper Tag asp-for를 label에 표시하기

위 사진을 보면 어떤가? 정상적인 form이다. 그럼 아래 코드를 보자

@model Category

@*Form Start*@
<form method="post">
    <div class="border p-3 mt-4">
        <!-- Title -->
        <div class="row pb-2">
            <h2 class="text-primary">Create Category</h2>
            <hr/>
        </div>

        <!-- Category Name -->
        <div class="mb-3 row">
            <label asp-for="Name" class ="p-0"></label>
            <input asp-for"Name" class="form-control"/>
        </div>
        
        <!-- Display Order -->
        <div class="mb-3 row">
            <label asp-for="DisplayOrder" class="p-0"></label>
            <input asp-for="DisplayOrder" class="form-control" />
        </div>

        @*Buttons*@
        <div class="row">
            <div class="col-6 col-md-3">
                @*Submit Button*@
                <button type="submit" class="btn btn-primary form-control">Create</button>
            </div>

            <div class="col-6 col-md-3">
                @*Go Back Button*@
                <a asp-controller="Category" asp-action="Index" class="btn btn-secondary border form-control">Go Back</a>
            </div>
        </div>
    </div>
</form>

 

무엇인가 이상하지 않은가? <label> 태그를 보자 <label> </label> 레이블 사이에 글자가 없다는 것이다. 이것을 찾았다면 당신은 고수! 자 그러면 text가 없는데 왜 텍스트가 표시 될까?

 

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace BulkyWeb.Models {
    public class Category {
        [Key]
        public int Id { get; set; } // Primary Key on DB
        [Required]
        [DisplayName("Category Name")]
        public string Name { get; set; } // This field will be set to not null option in SQL
        [DisplayName("Display Order")]
        public int DisplayOrder { get; set; }
    }
}

이것은 현재 프로젝트에 Model이다.

Key와 Required에 대해서는 전 글에서 설명했다. 1개의 코드가 2곳에 추가되어 있다. 바로 DisplayName() 이라는 것이다.

 

위에 HTML 코드를 보게되면 asp-for가 있다. 이건 Helper Tag 관련 글에서 내가 소개했었다. asp-for가 이 모델에 Name을 가져와서 label에 표시를 하는 것이다. 그러나 문제가 있다. 

 

asp-for로 text를 가져오면 띄어쓰기가 안되는 것이다. 그냥 모델에 지정한 명으로 나오는 것, 이것을 고치기 위해서 다시 작업을 하기 보다는 Model 파일로 돌아가서 DisplayName을 추가하고 ("") 안에 표시할 이름을 적으면 되는 것이다.

 

public string Name { get; set; } 분을 보면 위에 DisplayName이 추가되어 있는데, 맨 처음 사진에서 보이는 것과 같이 Category Name으로 설정해서 <label> 코드에 표시되는 것이다. 아래에 displayorder도 마찬가지다. 

 

매우 간단하게 내가 원하는 명칭으로 바꿀 수 있다는 것이 매우 편리하지 않나?

 

내가 모르는 것일 수도 있지만, 그 어디에도 없는 기능일 것이다.