Pase varios objetos JSON al método de acción MVC3

Código JQuery:


     // Esto pasa NULL para "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', // Esto funciona pero los valores de propiedad son nulos: 'post', dataType: 'json', data: {"cat": CategoryModel, "prd": ProductModel }, // jsonData, cache: false, success: function (result) {alert (result);}, error: function (xhr, ajaxOptions, thrownError) {alert (thrownError);}});}); 

Código MVC (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; } } 

Ahora el problema es que no pude hacerlo funcionar al pasar “CategoryMode”, “ProductModel” al método de acción “ModelTwo”. La publicación de JQuery identifica correctamente el método de acción “ModelTwo” pero “cat”, los valores de propiedad “prd” son nulos. “CategoryID”, “CategoryName”, “ProductID”, “ProductName” todos son nulos a pesar de haber golpeado ese método.


     // esta es una obra fina ...

      $ ("# btnPost"). haga clic en (función () {
             var CategoryModel = {
                 CategoryID: 1,
                 CategoryName: "Bebida"
             };
             var ProductModel = {
                 ID de producto: 1,
                 Nombre del producto: "Chai"
             };
             var data1 = {};

             data1 ["cat"] = CategoryModel;
             data1 ["prd"] = Modelo de Producto;

             var jsonData = JSON.stringify (data1);

             $ .ajax ({
                 url: url + '/ Complex / ModelOne', // Esto funciona
                 tipo: 'post',
                 tipo de datos: 'json',           
                 datos: CategoryModel,
                 caché: falso,
                 éxito: función (resultado) {
                     alerta (resultado);
                 }
                 error: function (xhr, ajaxOptions, thrownError) {
                     alerta (thrownError);
                 }
             });
         });

Entonces, ¿qué pasa con mi primera llamada de JQuery al método de acción “ModelTwo”?

Pasé mucho tiempo resolviendo esto, pero no estoy seguro de lo que está pasando. No hay ningún problema con el enrutamiento aquí porque puedo aterrizar en el método de acción correcto …

Cualquier ayuda será apreciada.

¡Gracias!

Podrías enviarlos como solicitud 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); } }); 

El método JSON.stringify que estoy usando en mi ejemplo está integrado de forma nativa en todos los navegadores modernos, pero si necesita admitir navegadores heredados, podría incluir el script json2.js en su página.

Esto debería enlazar correctamente a la siguiente acción:

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

Pero te recomendaría que definieras un modelo de vista:

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

y luego haga que su acción del controlador tome este modelo de vista:

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

y, por supuesto, el código del lado del cliente sigue siendo el mismo.

  var a = $("#a").serialize(); var b = $("#b").serialize(); var c = $("#c").serialize(); $.ajax( { url: '@Url.Content("~/Controller/Method1")', type: 'POST', data: a+b+c, success: function (success) { // do something } }); // in Controller [HttpPost] public ActionResult Method1(abc a, bcd b, xyz c) { } // where abc, bcd xyz are class