如何在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上这个数据将可用