asp.net-mvc - 为什么我从 Knockout 提交的文件不能绑定到我的 MVC 模型

Question

我有一个淘汰模型正在为我的页面提供数据，并在保存时在客户端执行以下代码。

self.save = function() {
    var tirerun = ko.mapping.toJSON(self.data());
    $.ajax({
        type: 'post',
        url: "@Url.Action("SaveTireRunModel", "Events")",
        data: tirerun,
        success: function(result) {
            if (!result.success) {
                alert(result.error);
            } else {}
        }
    });
};

然后它将以下 JSON 发布到我的服务器（来自 fiddler 并为简洁起见）在此处输入图像描述

使用以下 http 请求标头

POST http://localhost:63648/Events/SaveTireRunModel HTTP/1.1
Host: localhost:63648
Connection: keep-alive
Content-Length: 1975
Origin: http://localhost:63648
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko)         Chrome/19.0.1084.56 Safari/536.5
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: */*
Referer: http://localhost:63648/Events/OutingDetails?outingID=010fd8a1-e3a5-e111-a660-f0def1589f4b
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Cookie: jstree_open=%232012%2C%23c914324c-4d9f-e111-a79b-0024e8a037d3%2C%23eb-e957-e111-9e70-d067e53b2ed6%2C%234d-c00e-e111-ad1c-0e6e17349d3e%2C%2357-c00e-e111-ad1c-0e6e17349d3e%2C%234d-c00e-e111-ad1c-0e6e17349d3e; jstree_load=; .ASPXAUTH=054DD21DC0A17DDDAAFC254500ED8D6B3299EAABF1FB647732618E956EF082880BBA0B52A59849D3362AA03EB1F27D28867B07CD8451E4E983D84365608AA145F8DF8D71C2481639E110EC31325EE27EA3281FA2EDB7AD31A744D2A9918BE6599DB97E489ED4598D2DF63C31E36E809A282CF96FFCE5ACAEF8308FEA3DF1C6DE50B2AA7299F9D9AF0C30CE867DCCA352; jstree_open=%232012%2C%233dcc4b9b-37a3-e111-a6d3-0026b99ca1da%2C%23eb-e957-e111-9e70-d067e53b2ed6%2C%2357-c00e-e111-ad1c-0e6e17349d3e%2C%23a2962e1b-45a5-e111-b9ac-f0def1589f4b; jstree_load=%2311a4611a-8851-e111-95c7-60d819fcced5%2C%23b89422a0-0d03-e011-99cb-d601d71f0fcf; jstree_select=%23010fd8a1-e3a5-e111-a660-f0def1589f4b

{"Comments":"RSTA Dwn 2 Holes (6)\r\nRF Spring to 35468\r\nCross Dwn to 47.9 (-0.2)","TireSetsList":[{"ID":"1","Value":"1"},{"ID":"2","Value":"2"},{"ID":"3","Value":"3"},{"ID":"4","Value":"4"},{"ID":"5","Value":"5"}],"LFShoulderTemp":245,"RFShoulderTemp":245,"LFOuterTemp":177,"LFMiddleTemp":null,"LFInnerTemp":200,"RFOuterTemp":177,"RFMiddleTemp":null,"RFInnerTemp":200,"LROuterTemp":177,"LRMiddleTemp":null,"LRInnerTemp":200,"RROuterTemp":177,"RRMiddleTemp":null,"RRInnerTemp":200,"LFInitialOuterWear":null,"LFInitialOuterMiddleWear":null,"LFInitialMiddleWear":null,"LFInitialInnerMiddleWear":null,"LFInitialInnerWear":null,"LFAfterOuterWear":null,"LFAfterOuterMiddleWear":null,"LFAfterMiddleWear":200,"LFAfterInnerMiddleWear":null,"LFAfterInnerWear":null,"RFInitialOuterWear":null,"RFInitialOuterMiddleWear":null,"RFInitialMiddleWear":null,"RFInitialInnerMiddleWear":null,"RFInitialInnerWear":null,"RFAfterOuterWear":null,"RFAfterOuterMiddleWear":null,"RFAfterMiddleWear":200,"RFAfterInnerMiddleWear":null,"RFAfterInnerWear":null,"LRInitialOuterWear":null,"LRInitialOuterMiddleWear":null,"LRInitialMiddleWear":null,"LRInitialInnerMiddleWear":null,"LRInitialInnerWear":null,"LRAfterOuterWear":null,"LRAfterOuterMiddleWear":null,"LRAfterMiddleWear":200,"LRAfterInnerMiddleWear":null,"LRAfterInnerWear":null,"RRInitialOuterWear":null,"RRInitialOuterMiddleWear":null,"RRInitialMiddleWear":null,"RRInitialInnerMiddleWear":null,"RRInitialInnerWear":null,"RRAfterOuterWear":null,"RRAfterOuterMiddleWear":null,"RRAfterMiddleWear":200,"RRAfterInnerMiddleWear":null,"RRAfterInnerWear":null,"LFInnerColdPressure":71,"LFInnerHotPressure":null,"RFInnerColdPressure":71,"RFInnerHotPressure":null,"LRInnerColdPressure":71,"LRInnerHotPressure":null,"RRInnerColdPressure":71,"RRInnerHotPressure":null,"LFColdPressure":61.5,"LFHotPressure":69.8,"RFColdPressure":61.5,"RFHotPressure":69.8,"LRColdPressure":61.5,"LRHotPressure":69.8,"RRColdPressure":61.5,"RRHotPressure":69.8,"TrackTemp":133}

但是当它进入我的行动时，模型完全是空的。

public JsonResult SaveTireRunModel(TireRunViewModel tirerun)
{
    tirerun.Save();
    return Json(new { success = true });
}

我的模型类如下

public class TireRunViewModel
{

    public TireRunViewModel()
    {

    }

    public TireRunViewModel(Guid outingID)
    {
        //data access crud here
    }

    public string Comments { get; set; }

    public List<SelectBoxModel> TireSetsList { get; set; }

    public double? LFShoulderTemp { get; set; }

    public double? RFShoulderTemp { get; set; }

    public double? LFOuterTemp { get; set; }

    public double? LFMiddleTemp { get; set; }

    public double? LFInnerTemp { get; set; }

    public double? RFOuterTemp { get; set; }

    public double? RFMiddleTemp { get; set; }

    public double? RFInnerTemp { get; set; }

    public double? LROuterTemp { get; set; }

    public double? LRMiddleTemp { get; set; }

    public double? LRInnerTemp { get; set; }

    public double? RROuterTemp { get; set; }

    public double? RRMiddleTemp { get; set; }

    public double? RRInnerTemp { get; set; }

    public double? LFInitialOuterWear { get; set; }

    public double? LFInitialOuterMiddleWear { get; set; }

    public double? LFInitialMiddleWear { get; set; }

    public double? LFInitialInnerMiddleWear { get; set; }

    public double? LFInitialInnerWear { get; set; }

    public double? LFAfterOuterWear { get; set; }

    public double? LFAfterOuterMiddleWear { get; set; }

    public double? LFAfterMiddleWear { get; set; }

    public double? LFAfterInnerMiddleWear { get; set; }

    public double? LFAfterInnerWear { get; set; }

    public double? RFInitialOuterWear { get; set; }

    public double? RFInitialOuterMiddleWear { get; set; }

    public double? RFInitialMiddleWear { get; set; }

    public double? RFInitialInnerMiddleWear { get; set; }

    public double? RFInitialInnerWear { get; set; }

    public double? RFAfterOuterWear { get; set; }

    public double? RFAfterOuterMiddleWear { get; set; }

    public double? RFAfterMiddleWear { get; set; }

    public double? RFAfterInnerMiddleWear { get; set; }

    public double? RFAfterInnerWear { get; set; }

    public double? LRInitialOuterWear { get; set; }

    public double? LRInitialOuterMiddleWear { get; set; }

    public double? LRInitialMiddleWear { get; set; }

    public double? LRInitialInnerMiddleWear { get; set; }

    public double? LRInitialInnerWear { get; set; }

    public double? LRAfterOuterWear { get; set; }

    public double? LRAfterOuterMiddleWear { get; set; }

    public double? LRAfterMiddleWear { get; set; }

    public double? LRAfterInnerMiddleWear { get; set; }

    public double? LRAfterInnerWear { get; set; }

    public double? RRInitialOuterWear { get; set; }

    public double? RRInitialOuterMiddleWear { get; set; }

    public double? RRInitialMiddleWear { get; set; }

    public double? RRInitialInnerMiddleWear { get; set; }

    public double? RRInitialInnerWear { get; set; }

    public double? RRAfterOuterWear { get; set; }

    public double? RRAfterOuterMiddleWear { get; set; }

    public double? RRAfterMiddleWear { get; set; }

    public double? RRAfterInnerMiddleWear { get; set; }

    public double? RRAfterInnerWear { get; set; }

    public double? LFInnerColdPressure { get; set; }

    public double? LFInnerHotPressure { get; set; }

    public double? RFInnerColdPressure { get; set; }

    public double? RFInnerHotPressure { get; set; }

    public double? LRInnerColdPressure { get; set; }

    public double? LRInnerHotPressure { get; set; }

    public double? RRInnerColdPressure { get; set; }

    public double? RRInnerHotPressure { get; set; }

    public double? LFColdPressure { get; set; }

    public double? LFHotPressure { get; set; }

    public double? RFColdPressure { get; set; }

    public double? RFHotPressure { get; set; }

    public double? LRColdPressure { get; set; }

    public double? LRHotPressure { get; set; }

    public double? RRColdPressure { get; set; }

    public double? RRHotPressure { get; set; }

    public int? SetNumberLF { get; set; }

    public int? SetNumberRF  { get; set; }

    public int? SetNumberLR { get; set; }

    public int? SetNumberRR { get; set; }

    public double? TrackTemp { get; set; }

    public void Save()
    {
       //data access crud here
    }
}

我可以做些什么来进一步解决这个问题并弄清楚为什么我的模型没有绑定？

score 7 · Accepted Answer

$.ajax方法的默认 contentType是'application/x-www-form-urlencoded'

如果要发送 JSON，则必须指定要发送 JSON，否则 Model Binder 将无法正常工作：

$.ajax({
        type: 'post',
        url: "@Url.Action("SaveTireRunModel", "Events")",
        data: tirerun,
        contentType: 'application/json',
        success: function(result) {
            if (!result.success) {
                alert(result.error);
            } else {}
        }
    });

您可能还需要使用以下命令“字符串化”数据：data: JSON.stringify(tirerun)

score 1 · Accepted Answer

我遇到了几乎相同的问题 - 通过使用ko.mapping.toJS(myVm)而不是ko.mapping.toJSON(myVm). 使用 toJSON 时，所有 vm 的属性都以连接的单个字符串发送，但使用 toJS 代替，每个属性在我的控制器中单独接收，因此正确映射到我的 C# Viewmodel，在你的情况下是TireRunViewModel类。

score 0 · Accepted Answer

是的，您需要指定 thedataType以及 ascontentType例如：

$.ajax({
   type: "POST",
   url: "/person/create",
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: jsonData,
   success: function (result){
       ...
   },
   error: function (error){
       ...
   }
});

这应该可以正常工作。（如果您有进一步的兴趣，我会在此处突出显示）。

asp.net-mvc - 为什么我从 Knockout 提交的文件不能绑定到我的 MVC 模型

3 回答 3

Related

Reference