Question

我将数据从javascript应用程序发送到MVC5控制器，但是当数据提交到Submit控制器操作时，它永远不会被调用。我有一些非常简单的映射器，它们创建以下JSON对象：

function mapContactDto(vm)
{
    var contactDto = {};
    contactDto.firstName = vm.firstName();
    contactDto.lastName = vm.lastName();
    contactDto.companyName = vm.companyName();
    contactDto.emailAddress = vm.emailAddress();
    contactDto.phonePrimary = vm.phonePrimary();
    contactDto.phoneSecondary = vm.phoneSecondary();
    contactDto.address1 = vm.address1();
    contactDto.address2 = vm.address2();
    contactDto.city = vm.city();
    contactDto.postalCode = vm.postalCode();
    contactDto.country = vm.country();
    return contactDto;
}

function mapCartItems(vm)
{
    var cartItemsDto = new Array();
    $.each(vm.selectedOptions(), function (index, step, array) {
        var sku = step.selection().sku;
        if (sku !== "0") {
            cartItemsDto.push(sku);
        }
    });
    return cartItemsDto;
}

/* if i dump the object that is sent to the server with `console.log(JSON.stringify(item))` I get:

{
"skus": ["1001","8GB","201"],
"contact": {
    "firstName":"Jon",
    "lastName":"Doe",
    "companyName":"Yup my company",
    "emailAddress":"contact@me.com",
    "phonePrimary":"012111 231",
    "phoneSecondary":"",
    "address1":"1 Billing Way",
    "address2":"Navigation House",
    "city":"London",
    "postalCode":"112211",
    "country":"GB"
    }
}
*/

然后我使用以下代码发送数据：

var contactDto = mapContactDto(self.billingVm());
var cartItemsDto = mapCartItems(self.configurationVm());

var req = new XMLHttpRequest();
req.open('HEAD', document.location, false);
req.send(null);

var item = {
    skus: mapCartItems(cartItemsVm()),
    contact: mapContactDto(billingVm())
};

var url = '/Knockout/Submit';

$.ajax({
    cache: false,
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: item,
    type: 'POST',
    success: function (data, textStatus, jqXHR) {           
    },
    error: function (data, textStatus, jqXHR) { 
    }
});

我的控制器代码如下：

public JsonResult Submit(string[] Skus, ContactDto Contact)
{
    return Json(new { success = true, message = "Some message" });
}

/* and MVC models are: */

public class ContactDto
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string CompanyName { get; set; }
    public string EmailAddress { get; set; }
    public string PhonePrimary { get; set; }
    public string PhoneSecondary { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
}

我有以下问题：

但是，从来没有调用过提交，如果我注释掉控制器参数使其变为Submit()然后调用它，为什么会这样？
从上面看，似乎控制器框架无法匹配参数 - 任何想法我做错了吗？
如何在MVC控制器上启用调试，以便查看正在发生的事情？

Answer 1

你必须使用ajax调用检查四件事，
1.如果使用javascript对象，则必须在传递之前对对象进行字符串化 2.动作方法的动作动词应该与你的ajax调用类型相同，如果是POST则动作方法应该用动作动词[HttpPost]修饰。
3.始终将ajax中url的相对路径用作@ Url.Action（＆＃34; action＆＃34;，＆＃34; controller＆＃34;）。
4. action方法方法的输入参数应与json对象参数匹配（确切地说区分大小写）。

为了进行调试，您可以在浏览器中使用firebug插件，这样您就可以在网络选项卡中查看通过网络发送的内容或按F12进行调试工具。

Answer 2

您必须进行两项更改：将您的Json字符串化如下：

$.ajax({
    cache: false,
    url: url,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(item),
    type: 'POST',
    success: function (data, textStatus, jqXHR) {           
    },
    error: function (data, textStatus, jqXHR) { 
    }
});

其次，只需使用[HttpPost]注释您的方法，如下所示：

[HttpPost]
public JsonResult Submit(string[] Skus, ContactDto Contact)
{
    return Json(new { success = true, message = "Some message" });
}

MVC5控制器动作未从JSON AJAX Post调用

2 个答案: