ASP.NET Core自定义Tag Helper中asp-for属性失效问题

问题背景 #

自定义FormerTagHelper时，尝试通过asp-for绑定模型字段，但渲染结果错误地显示了ModelExpression的类型全名，而非预期的表单元素。

自定义TagHelper代码 #

public class FormerTagHelper : TagHelper
{
    [HtmlAttributeName("asp-for")]
    public ModelExpression For { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.Content.AppendHtml($@"<input class=""form-control"" asp-for=""{For}""> </input>");
    }
}

使用方式 #

<former asp-for="Name"></former>

错误渲染结果 #

<div>
    <input class="form-control" asp-for="Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExpression">
</div>

期望目标 #

生成包含标签、输入框、验证提示的完整表单组，对应CSHTML代码如下：

<form method="post">
    <div class="mt-2">
        <label class="form-label">Name</label>
        <input class="form-control" asp-for="Name" />
        <span asp-validation-for="Name" class="text-danger"></span> <br />
    </div>
</form>

<div class="mt-3">
    <button type="submit" class="btn-primary">Send</button>
</div>

最终浏览器渲染的期望HTML：

<div class="mt-2">
    <label class="form-label" for="Name">Name</label>
    <input class="form-control" type="text" data-val="true" data-val-length="The field Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Name field is required." id="Name" name="Name" value="">
    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>

问题原因 #

直接在字符串中拼接{For}时，会调用ModelExpression的ToString()方法，返回的是其类型全名，而非绑定的模型字段名。此外，手动拼接的asp-for属性不会被ASP.NET Core的TagHelper引擎处理，自然无法生成表单元素的验证属性、ID、Name等关键内容。

简洁实现方案 #

方案一：复用内置TagHelper（推荐） #

通过TagHelperManager复用框架内置的LabelTagHelper、InputTagHelper和ValidationMessageTagHelper，自动处理模型绑定、验证属性生成等逻辑，代码简洁且符合框架规范：

using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

[HtmlTargetElement("former", Attributes = "asp-for")]
public class FormerTagHelper : TagHelper
{
    private readonly TagHelperManager<LabelTagHelper> _labelManager;
    private readonly TagHelperManager<InputTagHelper> _inputManager;
    private readonly TagHelperManager<ValidationMessageTagHelper> _validationManager;

    public FormerTagHelper(TagHelperManager<LabelTagHelper> labelManager,
                          TagHelperManager<InputTagHelper> inputManager,
                          TagHelperManager<ValidationMessageTagHelper> validationManager)
    {
        _labelManager = labelManager;
        _inputManager = inputManager;
        _validationManager = validationManager;
    }

    [HtmlAttributeName("asp-for")]
    public ModelExpression For { get; set; }

    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContext { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.Attributes.Add("class", "mt-2");

        // 生成Label
        var labelTagHelper = new LabelTagHelper(ViewContext)
        {
            For = For,
            Class = "form-label"
        };
        var labelOutput = await _labelManager.ProcessAsync(labelTagHelper, context);
        output.Content.AppendHtml(labelOutput.Content);

        // 生成Input
        var inputTagHelper = new InputTagHelper(ViewContext)
        {
            For = For,
            Class = "form-control"
        };
        var inputOutput = await _inputManager.ProcessAsync(inputTagHelper, context);
        output.Content.AppendHtml(inputOutput.Content);

        // 生成验证提示
        var validationTagHelper = new ValidationMessageTagHelper(ViewContext)
        {
            For = For,
            Class = "text-danger"
        };
        var validationOutput = await _validationManager.ProcessAsync(validationTagHelper, context);
        output.Content.AppendHtml(validationOutput.Content);
    }
}

方案二：使用IHtmlGenerator手动生成 #

如果不想依赖TagHelperManager，可以直接通过IHtmlGenerator生成所有元素，同样能自动处理验证和绑定逻辑：

using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;

[HtmlTargetElement("former", Attributes = "asp-for")]
public class FormerTagHelper : TagHelper
{
    private readonly IHtmlGenerator _htmlGenerator;

    public FormerTagHelper(IHtmlGenerator htmlGenerator)
    {
        _htmlGenerator = htmlGenerator;
    }

    [HtmlAttributeName("asp-for")]
    public ModelExpression For { get; set; }

    [ViewContext]
    [HtmlAttributeNotBound]
    public ViewContext ViewContext { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "div";
        output.Attributes.Add("class", "mt-2");

        // 生成Label
        var label = _htmlGenerator.GenerateLabel(ViewContext, For.ModelExplorer, For.Name, null, new { @class = "form-label" });
        output.Content.AppendHtml(label);

        // 生成Input
        var input = _htmlGenerator.GenerateTextBox(ViewContext, For.ModelExplorer, For.Name, For.Model, null, new { @class = "form-control" });
        output.Content.AppendHtml(input);

        // 生成验证提示
        var validationMsg = _htmlGenerator.GenerateValidationMessage(ViewContext, For.ModelExplorer, For.Name, null, ViewContext.ValidationMessageElement, new { @class = "text-danger" });
        output.Content.AppendHtml(validationMsg);
    }
}

使用效果 #

使用<former asp-for="Name"></former>后，会自动生成符合预期的表单组，包含带正确for属性的标签、带验证属性的输入框，以及验证提示元素，完全匹配目标渲染结果。

内容的提问来源于stack exchange，提问作者Burryaga