带有和不带有模型名称的 Razor 页面模型绑定

Question

我有一个旨在实现联系表单的 ASP.NET 2.0 Razor 页面。这是 Contact.cshtml 文件的一部分：

@page
@model ContactModel
<form method="post">
    <input type="text" asp-for="ContactMessageModel.Name" />
    <input type="email" asp-for="ContactMessageModel.Email" />
    <input type="text" asp-for="ContactMessageModel.Message" />
    <div class="g-recaptcha" data-sitekey="<SiteKey>"></div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

这是 Contact.cshtml.cs 文件的一部分：

public class ContactModel : PageModel
{
    [BindProperty]
    public ContactMessageModel ContactMessageModel { get; set; }

    public IActionResult OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        return RedirectToPage("MessageSent");
    }
}

public class ContactMessageModel
{
    [Required]
    public string Name { get; set; }

    [Required]
    public string Email { get; set; }

    [Required]
    public string Message { get; set; }

    [Required, BindProperty(name="g-recaptcha-response"]
    public string RecaptchaResponse { get; set; }
}

表单提交时，请求中出现如下表单数据：

ContactMessageModel.Name: Fractor
ContactMessageModel.Email: fractor@example.com
ContactMessageModel.Message: Hi there!
g-recaptcha-response: <recaptcha response data>

由于动态创建的g-recaptcha-response表单数据名称不以ContactMessageModel开头，所以只绑定了Name、Email和Message属性。

我看过使用 [Bind(Prefix = "")]，但看起来我无法将其应用于类中的（单个）属性。

有没有办法绑定到这个模型类中的所有属性，尽管前缀不同？

Answer 1

编辑

可以在视图中创建a hidden control绑定RecaptchaResponse，并通过触发机器人的data-callback事件，将响应值传递给js中的隐藏控件。

    <form method="post">
        <input type="text" asp-for="ContactMessageModel.Name" />
        <input type="email" asp-for="ContactMessageModel.Email" />
        <input type="text" asp-for="ContactMessageModel.Message" />
        <div class="g-recaptcha" data-sitekey="your key" data-callback="ClickRobot"></div>
        <input type="hidden" asp-for="ContactMessageModel.RecaptchaResponse" />
        <button type="submit" class="btn btn-primary">Send</button>
    </form>

<script src="https://www.google.com/recaptcha/api.js?hl=en-US"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
    var ClickRobot = function () {
        var response = grecaptcha.getResponse();
        $("#ContactMessageModel_RecaptchaResponse").val(response);
    };
</script>

联系方式：

 public class ContactModel : PageModel
    {
        [BindProperty]
        public ContactMessageModel ContactMessageModel { get; set; }
        public IActionResult OnPostAsync()
        {  
            if (!ModelState.IsValid)
            {
                return Page();
            }

            return RedirectToPage("MessageSent");
        }
    }

    public class ContactMessageModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string Message { get; set; }

        [Required]
        public string RecaptchaResponse { get; set; }
    }

测试过程如下：