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

时间:2009-10-05 05:42:23

标签: asp.net-mvc jquery asp.net-ajax

在使用以下代码进行自动刷新时,我假设当我发布帖子时,模型会自动发送到控制器:

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    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 个答案:

答案 0 :(得分:49)

简单的答案(在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 });
}

答案 1 :(得分:25)

如果您需要将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>

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

答案 2 :(得分:4)

我有一个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对象以匹配您的模型,下面的链接过程应自动将数据反序列化到您的控制器中。它对我来说非常有用。

Article on MVC JSON deserialization

答案 3 :(得分:3)

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

我是通过网格行上的双击事件或某种按钮上的点击事件来实现此目的。

@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;
}

答案 4 :(得分:2)

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

这篇文章可能会有所帮助。 Post with jquery and ajax

在这里查看文档.. Ajax serialize

答案 5 :(得分:1)

你可以创建一个变量并发送给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。

中停止

答案 6 :(得分:0)

在ajax电话提及 -

data:MakeModel(),

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

function MakeModel() {

    var MyModel = {};

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

    return JSON.stringify(MyModel);
}

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

在POST上

这个数据将可用