pasar múltiples JSON objetos a método de acción MVC3

Question

jQuery código:

 

    //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); 
       } 
      }); 
     }); 

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 está, no podía hacerlo funcionar pasando "CategoryMode "," ProductModel "en el método de acción" ModelTwo ". La publicación JQuery identifica correctamente el método de acción "ModelTwo", pero los valores de las propiedades "cat", "prd" son nulos. "CategoryID", "CategoryName", "ProductID", "ProductName" todos son nulos a pesar de presionar ese método.

 

    //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); 
       } 
      }); 
     }); 

¿Qué pasa con mi primera llamada de JQuery al método de acción "ModelTwo"?

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

Cualquier ayuda será muy apreciada.

Gracias!

Answer 1

Se podría 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 se construye en forma nativa todos los navegadores modernos, pero si es necesario apoyar navegadores antiguos que podría incluir la json2.js script a su página.

Esto debería unirse 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 la definición de una vista de modelo:

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

y luego haga que su acción de controlador aprovechar esta vista del modelo:

[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.

Answer 2

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