Asp.Net Core Razor Page PUT Handler 模型绑定器未绑定来自 ajax put 上的 java 脚本的序列化表单

Posted 2023-03-27

【中文标题】Asp.Net Core Razor Page PUT Handler 模型绑定器未绑定来自 ajax put 上的 java 脚本的序列化表单

【英文标题】：Asp.Net Core Razor Page PUT Handler model binder not binding the serialized form from java script on ajax put

【发布时间】：2019-12-10 05:16:51

【问题描述】：

我正在尝试序列化表单并将其放入服务器，但由于某种原因模型绑定无法绑定模型。

这是我的 javascript 按钮点击，

$.when(ajaxFormPutAsync(window.userUrls.update, $('#formUserEdit').serialize(), true)).done((response) => 

       );

ajaxFormPutAsync方法：

function ajaxFormPutAsync(requestUrl, putData, global) 
    try 
        return $.ajax(
            type: "PUT",
            url: requestUrl,
            async: true,
            global: global,
            headers: 
                "XSRF-TOKEN": $('input[name="__RequestVerificationToken"]').val()
            ,
            data: putData,
            error: function (jqXhr, textStatus, errorThrown) 
                console.log(jqXhr);
            
        );
     catch (q) 
        ajaxIndicatorStop();
    

    return false;
;

这是我的表格，

<form id="formUserEdit" method="put">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label asp-for="FirstName"></label>
            <input asp-for="FirstName" class="form-control form-control-sm">
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="LastName"></label>
            <input asp-for="LastName" class="form-control form-control-sm">
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label asp-for="Designation"></label>
            <input asp-for="Designation" class="form-control form-control-sm">
            <span asp-validation-for="Designation" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="IdentityNumber"></label>
            <input asp-for="IdentityNumber" class="form-control form-control-sm">
            <span asp-validation-for="IdentityNumber" class="text-danger"></span>
        </div>
    </div>
    <input type="hidden" asp-for="Id" />
</form>

这是我的RazorPageHandler，

public async Task<IActionResult> OnPutAsync(
    [FromBody] UserViewModel userViewModel,
    CancellationToken ct)

...

这是我的UserViewModel，

    public class UserViewModel
    
        public Guid Id  get; set; 

        [Required]
        [Display(Name = "First Name")]
        public string FirstName  get; set; 

        [Required]
        [Display(Name = "Last Name")]
        public string LastName  get; set; 

        [Required]
        public string Designation  get; set; 

        [Required]
        [Display(Name = "Identity Number")]
        public string IdentityNumber  get; set; 
    

请求正在访问我的页面处理程序，但 userViewModel 始终是 null。

对我哪里错了有什么建议吗？

请帮忙。

【问题讨论】：

在您的控制器操作中，尝试将模型绑定从 [FromBody] 更改为 [FromForm] 并查看它的行为。

好你拯救了我的一天。把它作为我会接受的答案。

【参考方案1】：

Parameter Binding 在 Asp.Net 中非常具体，这意味着如果您打算使用 ajax 或表单本身从您的前端 POST 数据，您必须确保它采用正确的格式您的控制器操作预期接收数据。

因此，由于您要像 $('#formUserEdit').serialize() 这样提交数据，因此 ajax 会将其序列化为 FormData，并且您的控制器操作应该以相同的格式接收它。

解决方案

将控制器操作从 [FromBody] 更改为 [FromForm] 应该可以工作。