传递多个JSON对象MVC3操作方法 [英] Pass multiple JSON objects to MVC3 action method

问题描述

JQuery的code：

JQuery code:

    //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＃）：

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，产品型号变成ModelTwo操作方法的工作。 jQuery的岗位正确地识别操作方法ModelTwo，而是猫，珠三角的属性值都为空。 类别ID，类别名称，产品ID，产品名称都是打，尽管这种方法无效。

Now the issue is, I couldn't get it working by passing "CategoryMode", "ProductModel" into "ModelTwo" action method. The JQuery post correctly identifies the action method "ModelTwo" but "cat", "prd" property values are null. "CategoryID", "CategoryName", "ProductID", "ProductName" all are null despite hitting that method.

    //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的操作方法？

So what's wrong with my first JQuery call to "ModelTwo" action method?

我花了很多时间搞清楚了这一点，但不知道是怎么回事。没有与路由在这里没有问题，因为我可以在正确的行动方法土地...

I spent lots of time figuring this out, but not sure what's going on. There is no issue with routing here because I can land on the right action method...

任何帮助将大大AP preciated。

Any help will be greatly appreciated.

谢谢！

推荐答案

您可以向他们发送的JSON请求：

You could send them as JSON request:

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 方法本身内置了所有现代浏览器，但如果你需要支持旧版浏览器，你可以包括<一个HREF =htt​​p://www.json.org/js.html> json2.js 脚本到您的网页。

The JSON.stringify method that I am using in my example is natively built-in all modern browsers but if you need to support legacy browsers you could include the json2.js script to your page.

这应该正确绑定到下列行动：

This should correctly bind to the following action:

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

不过，我建议你定义视图模型：

But I would recommend you defining a view model:

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

，然后让你的控制器动作借此视图模型：

and then have your controller action take this view model:

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

和过程的客户端code保持不变。

and of course the client side code stays the same.

这篇关于传递多个JSON对象MVC3操作方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！