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という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);
}

マルチ選択ドロップダウン/リストボックスを描画する

マルチ選択ドロップダウンをレンダリングする場合は、ビューの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を実装ITagHelperか、便利なクラスTagHelperから派生させることで、独自のタグヘルパーを作成できます。

• デフォルトの規約は、オプションのTagHelper接尾辞を付けずにヘルパーの名前と一致するHTMLタグをターゲットにすることです。たとえば、 WidgetTagHelperは<widget>タグをターゲットにし<widget> 。
• [HtmlTargetElement]属性を使用して、 [HtmlTargetElement]となるタグをさらに制御することができます
• クラスのすべてのパブリックプロパティは、かみそりのマークアップの属性として値を与えることができます。たとえば、パブリックプロパティのpublic string Title {get; set;}は<widget title="my title">という値を与えることができます
• デフォルトでは、タグヘルパーは、パスカルの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タグヘルパーを使用できます。

<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>

アンカータグヘルパー

アンカータグヘルパーは、特定のコントローラーアクションまたはMVCルートにリンクするhref属性を生成するために使用されます。基本的な例

<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>