passare gli oggetti JSON multipla a metodo di azione MVC3

Question

JQuery codice:

 

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

codice 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; } 
    } 

Ora il problema è, non ho potuto farlo funzionare passando "CategoryMode "," ProductModel "nel metodo di azione" ModelTwo ". Il post di JQuery identifica correttamente il metodo di azione "ModelTwo" ma "cat", i valori di proprietà "prd" sono nulli. "CategoryID", "CategoryName", "ProductID", "ProductName" sono tutti nulli nonostante si sia verificato tale metodo.

 

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

Allora, cosa c'è di sbagliato con il mio primo JQuery chiamata al metodo di azione "ModelTwo"?

Ho passato molto tempo a capirlo, ma non sono sicuro di cosa sta succedendo. Non vi è alcun problema con il routing qui perché posso atterrare sul giusto metodo di azione ...

Qualsiasi aiuto sarà molto apprezzato.

Grazie!

Answer 1

Li potrebbe inviare come richiesta 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); 
    } 
}); 

Il metodo JSON.stringify che sto utilizzando nel mio esempio è nativamente integrato in tutti i browser moderni, ma se avete bisogno di supportare i browser legacy si potrebbe includere l'json2.js script alla tua pagina.

Questo dovrebbe legarsi correttamente per le seguenti azioni:

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

Ma io consiglierei di definire un modello di vista:

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

e quindi avere la vostra azione di controllo prendere questo modello di vista:

e ovviamente il codice lato client rimane lo stesso.

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