如何在jQuery中发送模型$ .ajax()发送请求到MVC控制器方法

在使用下面的代码进行自动刷新时,我假定当我发布post时,模型会自动发送到控制器:

$.ajax({ url: '<%=Url.Action("ModelPage")%>', type: "POST", //data: ?????? success: function(result) { $("div#updatePane").html(result); }, complete: function() { $('form').onsubmit({ preventDefault: function() { } }); } }); 

每次有一个post,我需要增加模型中的值属性:

 public ActionResult Modelpage(MyModel model) { model.value = model.value + 1; return PartialView("ModelPartialView", this.ViewData); } 

但是,当使用jQuery AJAX请求发布页面时,模型不会传递给控制器​​。 我如何在AJAX请求中发送模型?

简单的答案(在MVC 3以上,甚至2)是你不必做任何特别的事情。

只要你的JSON参数匹配模型,MVC就足够聪明,可以根据你提供的参数构造一个新的对象。 不在那里的参数只是默认的。

例如,Javascript:

 var values = { "Name": "Chris", "Color": "Green" } $.post("@Url.Action("Update")",values,function(data) { // do stuff; }); 

该模型:

 public class UserModel { public string Name { get;set; } public string Color { get;set; } public IEnumerable<string> Contacts { get;set; } } 

控制器:

 public ActionResult Update(UserModel model) { // do something with the model return Json(new { success = true }); } 

如果您需要将FULL模型发送给控制器,则首先需要该模型可用于您的JavaScript代码。

在我们的应用程序中,我们使用扩展方法执行此操作:

 public static class JsonExtensions { public static string ToJson(this Object obj) { return new JavaScriptSerializer().Serialize(obj); } } 

在视图上,我们用它来渲染模型:

 <script type="javascript"> var model = <%= Model.ToJson() %> </script> 

然后,您可以将模型variables传递给您的$ .ajax调用。

我有一个MVC页面,提交从一组单选button中select的值的JSON。

我用:

 var dataArray = $.makeArray($("input[type=radio]").serializeArray()); 

制作他们的名字和价值的数组。 然后我把它转换成JSON:

 var json = $.toJSON(dataArray) 

然后用jQuery的ajax()发布到MVC控制器

 $.ajax({ url: "/Rounding.aspx/Round/" + $("#OfferId").val(), type: 'POST', dataType: 'html', data: json, contentType: 'application/json; charset=utf-8', beforeSend: doSubmitBeforeSend, complete: doSubmitComplete, success: doSubmitSuccess}); 

它将数据作为本机JSON数据发送。

然后,您可以捕获响应stream,并将其反序列化到本机C#/ VB.net对象中,并在您的控制器中对其进行处理。

为了以一种可爱的,低维护的方式实现这个过程的自动化,我build议阅读这个条目,这个条目明确地说明了大部分本机的,自动的JSON反序列化。

匹配您的JSON对象以匹配您的模型,下面的链接过程应自动将数据反序列化到您的控制器中。 这对我来说非常有用。

关于MVC JSON反序列化的文章

这可以通过构build一个javascript对象来匹配你的mvc模型来完成。 JavaScript属性的名称必须与mvc模型完全匹配,否则autobind将不会在post上发生。 一旦你在服务器端build立了你的模型,你就可以操作它并将数据存储到数据库中。

我正在通过网格行上的双击事件或点击某种button上的事件来实现此目的。

 @model TestProject.Models.TestModel <script> function testButton_Click(){ var javaModel ={ ModelId: '@Model.TestId', CreatedDate: '@Model.CreatedDate.ToShortDateString()', TestDescription: '@Model.TestDescription', //Here I am using a Kendo editor and I want to bind the text value to my javascript //object. This may be different for you depending on what controls you use. TestStatus: ($('#StatusTextBox'))[0].value, TestType: '@Model.TestType' } //Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox //selected value. This puzzled me due to the conversion to Json object in the Ajax call. //By parsing the Type to an int this worked. javaModel.TestType = parseInt(javaModel.TestType); $.ajax({ //This is where you want to post to. url:'@Url.Action("TestModelUpdate","TestController")', async:true, type:"POST", contentType: 'application/json', dataType:"json", data: JSON.stringify(javaModel) }); } </script> //This is your controller action on the server, and it will autobind your values //to the newTestModel on post. [HttpPost] public ActionResult TestModelUpdate(TestModel newTestModel) { TestModel.UpdateTestModel(newTestModel); return //do some return action; } 

我认为你需要显式传递数据属性。 一种方法是使用data = $('#your-form-id')。serialize();

这个post可能有帮助。 张贴jquery和ajax

看看这里的文档.. Ajax序列化

你可以创build一个variables并发送给ajax。

 var m = { "Value": @Model.Value } $.ajax({ url: '<%=Url.Action("ModelPage")%>', type: "POST", data: m, success: function(result) { $("div#updatePane").html(result); }, complete: function() { $('form').onsubmit({ preventDefault: function() { } }); } }); 

所有模型的字段必须以m为单位。

在阿贾克斯呼吁提及 –

 data:MakeModel(), 

使用下面的函数将数据绑定到模型

 function MakeModel() { var MyModel = {}; MyModel.value = $('#input element id').val() or your value; return JSON.stringify(MyModel); } 

将[HttpPost]属性附加到您的控制器操作

在POST上这个数据将可用