đèo đối tượng nhiều JSON để phương pháp hành động MVC3

Question

JQuery mã:

 

    //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 Mã (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; } 
    } 

Bây giờ vấn đề là, tôi không thể làm cho nó làm việc bằng cách đi qua "CategoryMode "," ProductModel "vào phương thức hành động" ModelTwo ". Bài đăng JQuery xác định chính xác phương thức hành động "ModelTwo" nhưng giá trị thuộc tính "cat", "prd" không có giá trị. "CategoryID", "CategoryName", "ProductID", "ProductName" đều là null mặc dù nhấn phương thức đó.

 

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

Vì vậy, có gì sai với lời gọi JQuery đầu tiên của tôi đối với phương thức hành động "ModelTwo"?

Tôi đã dành rất nhiều thời gian để tìm hiểu điều này, nhưng không chắc chắn điều gì đang xảy ra. Không có vấn đề gì với định tuyến ở đây vì tôi có thể truy cập đúng phương thức hành động ...

Bất kỳ trợ giúp nào sẽ được đánh giá cao.

Cảm ơn!

Answer 1

Bạn có thể gửi cho họ như yêu cầu 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); 
    } 
}); 

Các JSON.stringify phương pháp mà tôi đang sử dụng trong ví dụ của tôi là tự nhiên tích hợp trong tất cả các trình duyệt hiện đại nhưng nếu bạn cần hỗ trợ trình duyệt cũ bạn có thể bao gồm các json2.js kịch bản cho trang của bạn.

này nên ràng buộc một cách chính xác để các hành động sau đây:

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

Nhưng tôi sẽ khuyên bạn nên xác định một mô hình điểm:

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

và sau đó đã hành động điều khiển của bạn có mô hình quan điểm này:

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

và dĩ nhiên mã phía máy khách vẫn giữ nguyên.

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