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

Posted 2023-02-14

【中文标题】如何在 jQuery $.ajax() 发布请求中向 MVC 控制器方法发送模型

【英文标题】：How to send a model in jQuery $.ajax() post request to MVC controller method

【发布时间】：2010-12-03 20:32:15

【问题描述】：

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

$.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 请求中发送模型？

【问题讨论】：

已经回答了，对我有帮助...看看@ ***.com/questions/7910033/…>

【参考方案1】：

简单的答案（从 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 );

【讨论】：

这是否适用于模型包含部分视图的自定义对象的场景？像里面的值数组有属性"Customer" : "Name":"N" , ..."

在 ajax 成功中如何引用联系人，例如 Contact.Name、Contact.Phone 等？

【参考方案2】：

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

【讨论】：

这很好，但是非常没用，如果你在页面上更改模型，模型就会被渲染，如果你在页面上修改它（我认为在网页上是正常的）你传递一个发布操作的空模型。

@Laviak 这个方法似乎不错，但在这种情况下返回空模型：我提交带有填充模型的表单，如果出现错误，表单从控制器返回。在这种情况下，模型不是空的，而是在使用此方法时将一个空模型发送到控制器。如何解决？

@theLaw 有什么办法解决这个问题吗？

【参考方案3】：

我有一个 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

【讨论】：

提供的链接已失效。

【参考方案4】：

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

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

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

【参考方案5】：

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

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

看看这里的文档.. Ajax serialize

【讨论】：

我想传递模型而不仅仅是表单数据

当您在接受适当模型的操作上使用 form.serialize() 时，映射会自动完成。因此，在您提出此请求时，“MyModel”实例将填充表单值。

【参考方案6】：

您可以创建一个变量并发送到 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 为单位。

【参考方案7】：

在ajax调用中提到-

data:MakeModel(),

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

function MakeModel() 

    var MyModel = ;

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

    return JSON.stringify(MyModel);

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

在 POST 后，此数据将可用