Razor Pages Custom Tag Helper 2 Way Bind

Question

I am wanting to create a custom tag helper in razor pages which binds to a custom model but the value is not being read back into the modal on post, below is my TagHelper code

[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);

    }
}

I am using the TagHelper with the below code

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

'DateValue' is a public property on the page, when first rendering the page the value of DateValue is correctly visible in the TagHelper Input element, if I force an OnPost, the value is removed.

I have applied the same to a standard input element with asp-for set and that works fine so suspect I am missing something in my TagHelper.

Answer 1

Asp.net core bind model data with name attribute.You use a custom tag helper,so it will get html like <input value="xxx"> .So when form post,you cannot bind model data with name attribute,and when return Page in OnPost handler,model data is null.You need to add name attribute to <kenai-date asp-for="DateValue" /> .Here is a 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();
        }
    }

result: