jquery - 将多个 JSON 对象传递给 MVC3 操作方法

Question

JQuery 代码:

    //This passes NULL for "CategoryID", "CategoryName", "ProductID", "ProductName"     $("#btnPost").click(function () {            var CategoryModel = {                CategoryID: 1,                CategoryName: "Beverage"            };            var ProductModel = {                ProductID: 1,                ProductName: "Chai"            };            var data1 = {};            data1["cat"] = CategoryModel;            data1["prd"] = ProductModel;            var jsonData = JSON.stringify(data1);            $.ajax({                url: url + '/Complex/ModelTwo', //This works but property values are null                 type: 'post',                dataType: 'json',                           data: { "cat": CategoryModel, "prd": ProductModel }, //jsonData,                cache: false,                success: function (result) {                    alert(result);                },                error: function (xhr, ajaxOptions, thrownError) {                    alert(thrownError);                }            });        });

MVC Code (C#):

     public class ComplexController : Controller
    {
        public string ModelOne(Category cat)
        {
            return "this took single model...";
        }

        public string ModelTwo(Category cat, Product prd)
        {
            return "this took multiple model...";
        }
    }
    public class Category
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }
    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
    }

现在的问题是，我无法通过将“CategoryMode”、“ProductModel”传递到“ModelTwo”操作方法来使其工作。 JQuery 帖子正确识别了操作方法“ModelTwo”，但“cat”、“prd”属性值为 null。尽管点击了该方法，“CategoryID”、“CategoryName”、“ProductID”、“ProductName”都为空。

    //THIS ONE WORKS FINE...     $("#btnPost").click(function () {            var CategoryModel = {                CategoryID: 1,                CategoryName: "Beverage"            };            var ProductModel = {                ProductID: 1,                ProductName: "Chai"            };            var data1 = {};            data1["cat"] = CategoryModel;            data1["prd"] = ProductModel;            var jsonData = JSON.stringify(data1);            $.ajax({                url: url + '/Complex/ModelOne', //This works                type: 'post',                dataType: 'json',                           data: CategoryModel,                cache: false,                success: function (result) {                    alert(result);                },                error: function (xhr, ajaxOptions, thrownError) {                    alert(thrownError);                }            });        });

那么我第一次 JQuery 调用“ModelTwo”操作方法有什么问题吗？

我花了很多时间来解决这个问题，但不确定发生了什么。这里的路由没有问题，因为我可以找到正确的操作方法...

任何帮助将不胜感激。

谢谢!

Answer 1

您可以将它们作为 JSON 请求发送:

var categoryModel = {
    categoryID: 1,
    categoryName: "Beverage"
};
var productModel = {
    productID: 1,
    productName: "Chai"
};
$.ajax({
    url: '@Url.Action("ModelTwo")',
    type: 'post',
    dataType: 'json',
    // It is important to set the content type
    // request header to application/json because
    // that's how the client will send the request
    contentType: 'application/json',
    data: JSON.stringify({ cat: categoryModel, prd: productModel }),
    cache: false,
    success: function (result) {
        alert(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(thrownError);
    }
});

我在示例中使用的 JSON.stringify 方法本身内置于所有现代浏览器中，但如果您需要支持旧版浏览器，则可以包含 json2.js将脚本添加到您的页面。

这应该正确绑定(bind)到以下操作:

[HttpPost]
public ActionResult ModelTwo(Category cat, Product prd)
{
    return Json(new { message = "this took multiple model..." });
}

但我建议您定义一个 View 模型:

public class MyViewModel
{
    public Category Cat { get; set; }
    public Product Prd { get; set; }
}

然后让您的 Controller 操作采用此 View 模型:

[HttpPost]
public ActionResult ModelTwo(MyViewModel model)
{
    return Json(new { message = "this took a single view model containing multiple models ..." });
}

当然，客户端代码保持不变。