JQuery代码:
//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代码(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”,“ProductModel”传递给“ModelTwo”操作方法,我无法得到它的工作. JQuery文件正确地标识了“ModelTwo”的操作方法,但是“cat”,“prd”属性值为null. “CategoryID”,“CategoryName”,“ProductID”,“ProductName”全部都为null,而不管该方法.
//THIS ONE WORKS FINE... $("#btnPost").click(function () { var CategoryModel = { CategoryID: 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',data: CategoryModel,thrownError) { alert(thrownError); } }); });
那么我的第一个JQuery调用“ModelTwo”操作方法有什么问题?
我花了很多时间弄清楚这一点,但不知道发生了什么.在这里路由没有问题,因为我可以使用正确的动作方法…
任何帮助将不胜感激.
谢谢!
解决方法
您可以将其作为JSON请求发送:
var categoryModel = { categoryID: 1,categoryName: "Beverage" }; var productModel = { productID: 1,productName: "Chai" }; $.ajax({ url: '@Url.Action("ModelTwo")',type: 'post',// 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 }),success: function (result) { alert(result); },thrownError) { alert(thrownError); } });
我在我的示例中使用的JSON.stringify方法是内置的所有现代浏览器,但如果您需要支持旧版浏览器,您可以将json2.js脚本包含在您的页面中.
这应该正确绑定到以下操作:
[HttpPost] public ActionResult ModelTwo(Category cat,Product prd) { return Json(new { message = "this took multiple model..." }); }
但是我建议您定义一个视图模型:
public class Myviewmodel { public Category Cat { get; set; } public Product Prd { get; set; } }
然后让您的控制器操作采取此视图模型:
[HttpPost] public ActionResult ModelTwo(Myviewmodel model) { return Json(new { message = "this took a single view model containing multiple models ..." }); }
当然客户端代码保持不变.