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

在使用以下代码进行自动刷新时，我假设执行发布后，模型将自动发送给控制器：

$.ajax({

url: '',

type: "POST",

//data: ??????

success: function(result) {

$("div#updatePane").html(result);

},

complete: function() {

$('form').onsubmit({ preventDefault: function() { } });

}

});

每当发布时，我需要增加模型中的value属性：

public ActionResult Modelpage(MyModel model)

{

model.value = model.value + 1;

return PartialView("ModelPartialView", this.ViewData);

}

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

7个解决方案

49 votes

简单的答案(从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 Contacts { get;set; }

}

控制器：

public ActionResult Update(UserModel model)

{

// do something with the model

return Json(new { success = true });

}

Chris S answered 2020-08-06T19:45:47Z

25 votes

如果需要将FULL模型发送到控制器，则首先需要该模型可用于javascript代码。

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

public static class JsonExtensions

{

public static string ToJson(this Object obj)

{

return new JavaScriptSerializer().Serialize(obj);

}

}

在视图上，我们使用它来呈现模型：

var model =

然后，您可以将模型变量传递到$ .ajax调用中。

Laviak answered 2020-08-06T19:46:20Z

4 votes

我有一个MVC页面，该页面提交来自一组单选按钮的选定值的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数据发送数据。

然后，您可以捕获响应流并将其反序列化为本机C＃/ VB.net对象，并在控制器中对其进行操作。

为了以一种可爱的，低维护的方式使此过程自动化，我建议阅读此条目，该条目很好地说明了大多数本机，自动JSON反序列化。

匹配您的JSON对象以匹配您的模型，下面的链接过程应自动将数据反序列化到您的控制器中。 对我来说，它很棒。

关于MVC JSON反序列化的文章

dano answered 2020-08-06T19:47:16Z

3 votes

这可以通过构建一个javascript对象来匹配您的mvc模型来完成。 javascript属性的名称必须与mvc模型完全匹配，否则自动绑定将不会在帖子中发生。 一旦将模型放在服务器端，就可以对其进行操作并将数据存储到数据库中。

我可以通过在网格行上双击事件或在某种按钮上单击事件来实现这一点。

@model TestProject.Models.TestModel

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)

});

}

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

}

logan gilley answered 2020-08-06T19:47:41Z

2 votes

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

这篇文章可能会有所帮助。用jquery和ajax发布

在这里看看文档。Ajax序列化

rajesh pillai answered 2020-08-06T19:48:09Z

1 votes

您可以创建一个变量并将其发送到ajax。

var m = { "Value": @Model.Value }

$.ajax({

url: '',

type: "POST",

data: m,

success: function(result) {

$("div#updatePane").html(result);

},

complete: function() {

$('form').onsubmit({ preventDefault: function() { } });

}

});

必须在m中创建所有模型字段。

Majid Hosseini answered 2020-08-06T19:48:33Z

0 votes

在ajax电话中提到-

data:MakeModel(),

使用以下功能将数据绑定到模型

function MakeModel() {

var MyModel = {};

MyModel.value = $('#input element id').val() or your value;

return JSON.stringify(MyModel);

}

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

在POST上，此数据将可用

Sarang Raotole answered 2020-08-06T19:49:06Z