Web API的序列化表单数据API请求MVC 5

Question

我有一个强类型的Razor视图，它显示了一个类的记录。该视图显示用户可用来更新记录的表单（下拉菜单，几个复选框和几个文本框）。当用户通过更改控件的值来修改字段时，会立即将ajax调用发送到Web API以更新该字段。下面的Ajax调用工作正常：

$(document).ready(function() { 
    $(this).on("change", function (e) { 
     var editRecordURL = $("#editRecordURL").val(); 
     var key = $("#AccessVM_Id").val(); 
     var mode = $("#AccessVM_AccessMode").val(); 
     var failLim = $("#AccessVM_LoginFailLimit").val(); 
     var cap = $("#AccessVM_PwdWCap").is(':checked'); 
     ... 
     var rec = { 
      Id: key, 
      AccessMode: mode, 
      LoginFailLimit: failLim, 
      PwdWCap: cap, 
      .... 
     }; 

     $.ajax({ 
      type: "PUT", 
      url: editRecordURL, 
      data: JSON.stringify(rec), 
      contentType: 'application/json; charset=utf-8', 
      success: function (msg) { 
       bootbox.alert("Success: Record updated successfully!"); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       bootbox.alert("Error: " + errorThrown); 
      } 
     }); 
    }); 
}); 

不过，我想使这一功能更通用的，因此它可再用于其他形式（尤其是那些拥有更多的数据来更新）。理想情况下，拍摄对象将被填充这样的：

var rec = $("#form").serializeArray(); 

不幸的是，这并不因为应用JSON.stringify()上rec它不会返回预期的JSON字符串后的工作。相反，它发出这样一个系列的名称/值对：

[{"name":"__RequestVerificationToken","value":"qVedWHJ6HIrqtLJpTxp4m5D2ehZ_AdjCOvQtz4Jyzlg0cdocsWqcTCiE2jzIEB7UsJPwuSZeZF7y1GsluHNrNCDV1wrHjU1UJO5vMMGTLB41"},{"name":"AccessVM.Id","value":"1"},{"name":"AccessVM.AccessMode","value":"1"},{"name":"AccessVM.LoginFailLimit","value":"10"},{"name":"AccessVM.PwdWCap","value":"true"},{"name":"AccessVM.PwdWCap","value":"false"},{"name":"AccessVM.PwdWNum","value":"true"},{"name":"AccessVM.PwdWNum","value":"false"},{"name":"AccessVM.PwdWSC","value":"true"},{"name":"AccessVM.PwdWSC","value":"false"},{"name":"AccessVM.PwdMinLen","value":"6"},{"name":"AccessVM.PwdMaxLen","value":"25"},{"name":"AccessVM.PwdChange","value":"90"},{"name":"AccessVM.PwdPrevUsedLimit","value":"10"}] 

那么，如何解决这个问题因此字符串的样子：

[{"AccessVM.Id": 1, "AccessVM.AccessMode": 1, "AccessVM.LoginFailLimit": 10, "AccessVM.PwdWCap": true, "AccessVM.PwdWNum": true, "AccessVM.PwdWSC": false, "AccessVM.PwdMinLen": 6, "AccessVM.PwdMaxLen": 25, "AccessVM.PwdChange": 90, "AccessVM.PwdPrevUsedLimit": 10}] 

的Web API控制器：

public class PoliciesController : ApiController 
{ 
    .... 
    // PUT: api/policies/1 
    [ResponseType(typeof(void))] 
    public IHttpActionResult PutPolicy(int id, AccessItemViewModel polDto) 
    { 
     .... 
    } 
    .... 
} 

查看车型

public class PolicyViewModel 
{ 
    public AccessItemViewModel AccessVM { get; set; } 
    .... 
} 

public class AccessItemViewModel 
{ 
    public int Id { get; set; } 
    public int AccessMode { get; set; } 
    public int LoginFailLimit { get; set; } 
    public bool PwdWCap { get; set; } 
    .... 
} 

Razor视图：

@model App.Web.ViewModels.PolicyViewModel 
.... 
@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary("", new { @class = "text-danger" }) 
    <input type="hidden" id="editRecordURL" value="@Model.ExtraVM.EditRecordUrl" /> 
    @Html.LabelFor(m => m.AccessVM.AccessMode, new { @class = "col-xs-5" }) 
    @Html.HiddenFor(m => m.AccessVM.Id) 
    @Html.DropDownListFor(m => m.AccessVM.AccessMode, new SelectList(Model.AccessModes, "Mode", "Description"), null, new { @class = "input-sm col-xs-7" }) 
    @Html.LabelFor(m => m.AccessVM.LoginFailLimit, new { @class = "col-xs-9" }) 
    @Html.DropDownListFor(m => m.AccessVM.LoginFailLimit, new SelectList(Model.LoginLimits, "LoginFailLimit", "Value"), null, new { @class = "input-sm col-xs-3" }) 
    @Html.LabelFor(m => m.AccessVM.PwdWCap, new { @class = "col-xs-11" }) 
    @Html.CheckBoxFor(m => m.AccessVM.PwdWCap, new { @class = "input-xs col-xs-1" }) 
    .... 
} 

Answer 1

您将需要使用.serialize()（不.serializeArray()它不会与你bool性能和DefaultModelBinder正常工作），所以它使用默认application/x-www-form-urlencoded; charset=UTF-8，不字符串化数据删除contentType选项。夜脚本应该

$.ajax({ 
    type: "PUT", 
    url: editRecordURL, 
    data: $('form').serialize(), 
    success: function (msg) { 

然而在视图模型是PolicyViewModel，并基于该模型的生成表单控件，所以.serialize()函数会序列名称/值对的PolicyViewModel。这意味着您的PutPolicy方法中的模型必须匹配。该方法需要将

public IHttpActionResult PutPolicy(int id, PolicyViewModel model) // not AccessItemViewModel 

---

如果方法参数不能改变，那么你的视图需要根据AccessItemViewModel或者你需要让你产生'名使用的局部视图为AccessVM财产没有“AccessVM”前缀的属性。例如

_AccessVM.cshtml

@model AccessItemViewModel 
@Html.HiddenFor(m => m.Id) 
.... 

，并在主视图中，使用@Html.Action()或@Html.Partial()生成它的HTML