asp.net-core
태그 도우미

매개 변수

양식 태그 도우미 - 기본 예

<form asp-action="create" asp-controller="Home">
     <!--Your form elements goes here--> 
</form>

양식 태그 도우미 - 맞춤 경로 속성 사용

<form asp-action="create" 
      asp-controller="Home" 
      asp-route-returnurl="dashboard" 
      asp-route-from="google">
     <!--Your form elements goes here--> 
</form>

그러면 아래의 마크 업이 생성됩니다.

<form action="/Home/create?returnurl=dashboard&amp;from=google" method="post">
    <!--Your form elements goes here--> 
</form>

입력 태그 도우미

보기가 강력하게 다음과 같은보기 모델에 입력되었다고 가정합니다.

public class CreateProduct
{
   public string Name { set; get; }
}

그리고 당신은이 객체를 당신의 액션 메소드에서 뷰에 전달하고 있습니다.

@model CreateProduct
<form asp-action="create" asp-controller="Home" >

    <input type="text" asp-for="Name"/>   
    <input type="submit"/>

</form>

그러면 아래의 마크 업이 생성됩니다.

<form action="/Home/create" method="post"> 

    <input type="text" id="Name" name="Name" value="" />
    <input type="submit"/>
    <input name="__RequestVerificationToken" type="hidden" value="ThisWillBeAUniqueToken" />

</form>

입력 필드를 기본값으로 렌더링하려면 작업 메서드에서 뷰 모델의 Name 속성 값을 설정할 수 있습니다.

public IActionResult Create()
{
  var vm = new CreateProduct { Name="IPhone"};
  return View(vm);
} 

양식 제출 및 모델 바인딩

CreateProduct 를 HttpPost 작업 메서드 매개 변수 / name 이라는 매개 변수로 사용하면 모델 바인딩이 제대로 작동합니다.

태그 도우미 선택

보기가 이렇게보기 모델에 강력하게 입력되었다고 가정합니다.

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int SelectedCategory { set; get; }
}

그리고 GET 액션 메소드에서이 뷰 모델의 객체를 생성하고, Categories 속성을 설정하고 뷰로 보냅니다.

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"}
    };
    return View(vm);
}

그리고 당신의 견해에서

@model CreateProduct

<form asp-action="create" asp-controller="Home">
    <select asp-for="SelectedCategory" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

이렇게하면 아래의 마크 업이 렌더링됩니다 ( 폼 / 필드의 관련 부분 만 포함 )

<form action="/Home/create" method="post">  
    <select data-val="true" id="SelectedCategory" name="SelectedCategory">
        <option>Select one</option>
        <option value="1">Shyju</option>
        <option value="2">Sean</option>
    </select>
    <input type="submit"/>
</form>

양식 제출시 선택한 드롭 다운 값 가져 오기

HttpPost 액션 메소드 매개 변수와 동일한 뷰 모델을 사용할 수 있습니다.

[HttpPost]
public ActionResult Create(CreateProduct model)
{
  //check model.SelectedCategory value
  / /to do : return something
}

선택한 옵션으로 옵션 설정

선택한 옵션으로 옵션을 설정하려면 SelectedCategory 속성 값을 설정하면됩니다.

public IActionResult Create()
{
    var vm = new CreateProduct();
    vm.Categories = new List<SelectListItem>
    {
        new SelectListItem {Text = "Books", Value = "1"},
        new SelectListItem {Text = "Furniture", Value = "2"},
        new SelectListItem {Text = "Music", Value = "3"}
    };
    vm.SelectedCategory = 2;
    return View(vm);
}

다중 선택 드롭 다운 / ListBox 렌더링하기

다중 선택 드롭 다운을 렌더링하려는 경우 뷰의 asp-for 속성에 사용하는 뷰 모델 속성을 배열 유형으로 간단히 변경할 수 있습니다.

public class CreateProduct
{       
   public IEnumerable<SelectListItem> Categories { set; get; }
   public int[] SelectedCategories { set; get; }
}

보기에서

@model CreateProduct

<form asp-action="create" asp-controller="Home" >
    <select asp-for="SelectedCategories" asp-items="@Model.Categories">
        <option>Select one</option>
    </select>
    <input type="submit"/>
</form>

이렇게하면 multiple 속성이있는 SELECT 요소가 생성됩니다.

<form action="/Home/create" method="post">
     <select id="SelectedCategories" multiple="multiple" name="SelectedCategories">
        <option>Select one</option>
        <option value="1">Shyju</option>
       <option value="2">Sean</option>
     </select>
    <input type="submit"/>
</form>

맞춤 태그 도우미

ITagHelper 를 구현하거나 편의 클래스 TagHelper 에서 파생하여 고유 한 태그 도우미를 만들 수 있습니다.

• 기본 규칙은 선택적 TagHelper 접미사없이 도우미의 이름과 일치하는 HTML 태그를 대상으로 지정하는 것입니다. 예를 들어 WidgetTagHelper 는 <widget> 태그를 대상으로합니다.
• [HtmlTargetElement] 속성을 사용하여 [HtmlTargetElement] 되는 태그를 추가로 제어 할 수 있습니다.
• 클래스의 모든 공용 속성은 면도기 마크 업의 속성으로 값을 부여받을 수 있습니다. 예를 들어 공용 속성 public string Title {get; set;} <widget title="my title"> 값을 지정할 수 있습니다 public string Title {get; set;}
• 기본적으로 태그 도우미는 파스칼 기반 C # 클래스 이름과 태그 도우미 속성을 낮은 케밥 경우로 변환합니다. 예를 들어 [HtmlTargetElement] 를 사용하지 않고 클래스 이름이 WidgetBoxTagHelper 인 경우 Razor에서 <widget-box></widget-box> 합니다.
• Process 및 ProcessAsync 에는 렌더링 논리가 포함되어 있습니다. 둘 다 렌더링되는 현재 태그에 대한 정보가있는 컨텍스트 매개 변수와 렌더링 된 결과를 사용자 지정하는 데 사용되는 출력 매개 변수를받습니다.

사용자 정의 태그 도우미가 포함 된 어셈블리는 _ViewImports.cshtml 파일에 추가해야합니다 (네임 스페이스가 아니라 등록 된 어셈블리 임).

@addTagHelper *, MyAssembly

샘플 위젯 사용자 정의 태그 도우미

다음 예제는 면도기 마크 업을 대상으로하는 맞춤 위젯 태그 헬퍼를 만듭니다.

<widget-box title="My Title">This is my content: @ViewData["Message"]</widget-box>

다음과 같이 렌더링됩니다.

<div class="widget-box">
    <div class="widget-header">My Title</div>
    <div class="widget-body">This is my content: some message</div>
</div>

이러한 태그 도우미를 만드는 데 필요한 코드는 다음과 같습니다.

[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml.Append(this.Title);
        output.PreContent.SetHtmlContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await output.GetChildContentAsync();
        body.InnerHtml.Append(originalContents.GetContent());
        output.Content.SetHtmlContent(body);
    }
}

라벨 태그 도우미

레이블 태그 도우미는 모델 속성의 label 을 렌더링하는 데 사용할 수 있습니다. 이전 버전의 MVC에서 Html.LabelFor 메서드를 대체합니다.

모델이 있다고 가정 해 보겠습니다.

public class FormViewModel
{
    public string Name { get; set; }
}

보기에서 HTML 요소 label 및 asp-for 태그 도우미 asp-for 사용할 수 있습니다.

<form>
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" />
</form>

이것은 이전 버전의 MVC에서 다음 코드와 동일합니다.

<form>
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
</form>

위의 두 코드 스 니펫은 동일한 HTML을 렌더링합니다.

<form>
    <label for="Name">Name</label>
    <input name="Name" id="Name" type="text" value="">
</form>

앵커 태그 도우미

앵커 태그 도우미는 href 속성을 생성하여 특정 컨트롤러 작업 또는 MVC 경로에 연결하는 데 사용됩니다. 기본 예제

<a asp-controller="Products" asp-action="Index">Login</a>

때로는 바인딩하려는 컨트롤러 동작에 대한 추가 매개 변수를 지정해야합니다. asp-route- 접두사와 함께 속성을 추가하여 이러한 매개 변수의 값을 지정할 수 있습니다.

<a asp-controller="Products" asp-action="Details" asp-route-id="@Model.ProductId">
   View Details
</a>