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

问题描述

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

I am sending data from from a javascript app to a MVC5 controller, however when data is submitted to the Submit controller action, it is never called. I have some very simple mappers which create the following JSON object:

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":"[email protected]",
    "phonePrimary":"012111 231",
    "phoneSecondary":"",
    "address1":"1 Billing Way",
    "address2":"Navigation House",
    "city":"London",
    "postalCode":"112211",
    "country":"GB"
    }
}
*/

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

I then send the data with the following code:

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 永远不会被调用，但是，如果我注释掉控制器参数使其成为 Submit() 然后它被调用，为什么会这样?

• Submit is never called however, if I comment out the controller parameters so it becomes Submit() then it is called, why is this?

从上面看来，控制器框架似乎无法匹配参数 - 知道我做错了什么吗?

From the above, it seems like the controller framework cannot match up the parameters - any idea what I am doing wrong please?

如何在 MVC 控制器上启用调试，以便我可以看到发生了什么?

How to enable debugging on the MVC controller so I can see what's going on?

推荐答案

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

You will have to make two changes:Stringify your Json as below:

$.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] 注释您的方法，如下所示:

Second, Just Annotate your Method with [HttpPost] as below:

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

这篇关于未从 JSON AJAX Post 调用 MVC5 控制器操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！