13

MVC 6 では、@Html.EditorFor の優れた代替手段としてタグ ヘルパーが導入されています。カスタム エディタ テンプレートを作成することができます。カスタム タグ ヘルパーを作成することもできます。

ただし、タグ ヘルパーを作成する場合は、HTML を C# コード (TagBuilder などを使用) で作成する必要があります。複雑なタグ ヘルパーの場合、Razor 構文を使用するほど便利ではありません。

Razor ページからカスタム タグ ヘルパーを作成できる方法はありますか?

4

1 に答える 1

15

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>
于 2015-08-10T00:23:08.473 に答える