如何使用jquery在MVC中发布viewmodel

我没有使用Form元素。 我没有使用表单因为，我不想回发..请指导我如何做ajax调用所以，能够获得$ .ajax将viewmodel发布到控制器的动作方法？ 我的表格如下：

HTML：

  @model comp.learn.data.Models.ProductViewModel @{ ViewBag.Title = "Create"; } 
Create
 
 
ProductViewModel
 
 
 @Html.LabelFor(model => model.ProductName) 
 
 @Html.EditorFor(model => model.ProductName) @Html.ValidationMessageFor(model => model.ProductName) 
 
 @Html.LabelFor(model => model.Cost) 
 
 @Html.EditorFor(model => model.Cost) @Html.ValidationMessageFor(model => model.Cost) 
 
 @Html.LabelFor(model => model.Description) 
 
 @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) 
 
 @Html.LabelFor(model => model.ProductTypeId) 
 
 @Html.DropDownList("ProductTypeId", "Choose item") @Html.ValidationMessageFor(model => model.ProductTypeId) 
 
 @Html.LabelFor(model => model.ProductTypeName) 
 
 @Html.EditorFor(model => model.ProductTypeName) @Html.ValidationMessageFor(model => model.ProductTypeName) 
 
 
  
 
 
 @Html.ActionLink("Back to List", "Index")  

jQuery的/ JavaScript的：

  $.ajax( { url: '@Url.Action("CreateProduct","ProductManagement")', dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'post', cache: false, data: ///what should i write here , success: function (data) { alert('final'); }, error: function (f1, f2, f3) { alert(f3); } }); 

Answer 1

您应该手动从输入中收集数据并构造与您的C＃模型类对应的JSON对象。 例如，如果您在操作方法中等待ProductViewModel对象，则可以按照以下示例操作：

 var myData = { productName: $('#ProductName').val(), cost: $('#Cost').val(), // .. and so on }; $.ajax({ data: JSON.stringify(myData), // .. the other ajax options }); 

如果你有表单元素，那就更容易了。 只需使用jQuery选择表单并调用serialize方法。 数据将被编码为字符串以供提交。 格式为application/x-www-form-urlencoded; charset=UTF-8 application/x-www-form-urlencoded; charset=UTF-8也是$ .ajax默认值，你不需要指定它。 例：

 var myData = $('#myFormId').serialize(); $.ajax({ data: myData, contentType: 'application/x-www-form-urlencoded; charset=UTF-8', //..Other ajax options }); 

Answer 2

你需要两件事来实现这个目标：

首先：将表单标签视图中的所有输入/数据元素换行如下：

 @using(Html.BeginForm()) { //exitsing html stuff } 

第二：在Ajax请求中使用serializeArray（）对一组表单元素进行编码，并将其传递给如下数据：

 $.ajax( { url: '@Url.Action("CreateProduct","ProductManagement")', dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'post', cache: false, data: $('form').serializeArray(), success: function (data) { alert('final'); }, error: function (f1, f2, f3) { alert(f3); } }); 

这将解决您的疑虑。