Razor Pages 自定义标签助手 2 方式绑定答案

【问题标题】：Razor Pages Custom Tag Helper 2 Way BindRazor Pages 自定义标签助手 2 方式绑定
【发布时间】：2021-05-30 21:04:02
【问题描述】：

我想在 razor 页面中创建一个自定义标签助手，它绑定到自定义模型，但该值没有在帖子中读回模式，下面是我的 TagHelper 代码

[HtmlTargetElement("kenai-date", TagStructure = TagStructure.WithoutEndTag)]
public class Date : TagHelper
{
    //public string Value { get; set; }

    public ModelExpression AspFor { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "input";
        output.TagMode = TagMode.SelfClosing;
        output.Attributes.Add("value", this.AspFor.Model);

    }
}

我正在使用带有以下代码的 TagHelper

<kenai-date asp-for="DateValue" />

'DateValue' 是页面上的公共属性，当第一次渲染页面时，DateValue 的值在 TagHelper Input 元素中正确可见，如果我强制 OnPost，该值将被删除。

我已将其应用于带有 asp-for 集的标准输入元素，并且效果很好，因此怀疑我的 TagHelper 中缺少某些内容。

【问题讨论】：

标签： asp.net-core razor

【解决方案1】：

Asp.net核心用name属性绑定模型数据。你使用自定义标签助手，所以它会得到像<input value="xxx">这样的html。所以当表单发布时，你不能用name属性绑定模型数据，当返回页面时OnPost handler,model data为null。需要给<kenai-date asp-for="DateValue" />添加name属性。这里有一个demo：

TestCustomTagHelper.cshtml：

<form method="post">
    <kenai-date asp-for="DateValue" name="DateValue" />
    <input type="submit" />
</form>

TestCustomTagHelper.cshtml.cs：

public class TestCustomTagHelperModel : PageModel
    {
        [BindProperty]
        public string DateValue { get; set; }
        public void OnGet()
        {
            DateValue = "sss";
        }
        public IActionResult OnPost()
        {
            
            return Page();
        }
    }

结果：

【讨论】：