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; }
    }

这是测试过程：

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

1 个答案:

编辑