Asp.net-Core-Mvc

MVC 6 Tag Helpers 作為編輯器模板的替代品

  • February 17, 2019

MVC 6 引入了 Tag Helpers 作為@Html.EditorFor 的更好替代方案。可以創建自定義編輯器模板。也可以創建自定義標籤助手。

但是,在創建 Tag Helper 時,需要通過 C# 程式碼(使用 TagBuilder 等)創建 HTML。對於復雜的 Tag Helpers,它不如使用 Razor 語法方便。

有什麼方法可以讓我從 Razor 頁面創建自定義 Tag Helper?

s的美妙之TagHelper處在於您可以以多種不同的方式混合 C# 和 Razor。因此,假設您有一個自定義 Razor 模板,例如:

CustomTagHelperTemplate.cshtml

@model User

<p>User name: @Model.Name</p>
<p>User id: @Model.Id</p>

你有模型:

namespace WebApplication1
{
   public class User
   {
       public string Name { get; set; }
       public int Id { get; set; }
   }
}

TagHelper

using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.Mvc.Rendering;
using Microsoft.AspNet.Razor.Runtime.TagHelpers;
using Microsoft.Framework.WebEncoders;

namespace WebApplication1
{
   public class UserTagHelper : TagHelper
   {
       private readonly HtmlHelper _htmlHelper;
       private readonly IHtmlEncoder _htmlEncoder;

       public UserTagHelper(IHtmlHelper htmlHelper, IHtmlEncoder htmlEncoder)
       {
           _htmlHelper = htmlHelper as HtmlHelper;
           _htmlEncoder = htmlEncoder;
       }

       [ViewContext]
       public ViewContext ViewContext
       {
           set
           {
               _htmlHelper.Contextualize(value);
           }
       }

       public string Name { get; set; }

       public int Id { get; set; }

       public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
       {
           output.TagName = null;
           output.SelfClosing = false;

           var partial = await _htmlHelper.PartialAsync(
               "CustomTagHelperTemplate",
               new User
               {
                   Name = Name,
                   Id = Id
               });

           var writer = new StringWriter();
           partial.WriteTo(writer, _htmlEncoder);

           output.Content.SetContent(writer.ToString());
       }
   }
}

然後您可以編寫以下頁面:

@addTagHelper "*, WebApplication1"

<user id="1234" name="John Doe" />

生成:

<p>User name: John Doe</p>
<p>User id: 1234</p>

引用自:https://stackoverflow.com/questions/31895914