是否可以在 ajax 中使用模型传递其他参数？答案

【问题标题】：Is it possible to pass additional arguments with the model in ajax?是否可以在 ajax 中使用模型传递其他参数？
【发布时间】：2014-05-05 18:36:21
【问题描述】：

使用下面的脚本传递一个强类型模型，它工作正常。有没有办法在模型中还包含变量的值作为附加参数？我知道如何传递模型或变量，但不能同时传递两者。

var sample1 = "aaa";
var sample2 = "bbb";

    $.ajax({

   url: "Action/Controller",
   data: $("#form123").serialize(),       
   cache: true,
   type: "POST",
   dataType: 'html',                                
   success: function (data) {                       
   $('#form123').html(data)};              

});

【问题讨论】：

标签： javascript ajax asp.net-mvc asp.net-mvc-4

【解决方案1】：

使用$.extend 将多个对象合并在一起：

data: $.extend(
   $("#form123").serialize(), 
   { something: 'else'}, 
   { and: 'even', more: 'things'}
)

或者，只需将其他字段作为<input type='hidden' ...> 元素添加到您的表单中

【讨论】：

不幸的是，我没有这个替代选项，因为它是一个外部脚本文件，无法访问其中的模型。我需要 DropDownListFor 中所选项目的文本，并且模型绑定到它的值，这也是我需要的。我可以在 javascript 中获取文本，但不能将其与 ajax 中的模型一起传递

【解决方案2】：

您可以将data 对象设置为包含三个属性，一个用于序列化表单，另一个用于示例。

data: {
  formData: $("#form123").serialize(),
  sample1: sample1,
  sampleTwo: sample2
}

更新：鉴于此解决方案不适用于您的情况，这里有一个替代方案。

由于.serialize() 的结果是将其输入转换为标准的URL 编码形式，例如prop1=val1&prop2=val2，您可以将附加变量附加到输出字符串。例如，

var formData = $("#form123").serialize() + '&' + sample1 + '&' + sample2;
$.ajax({
  ...
  data: formData,
  ...
});

但是，这有点笨拙，不容易扩展到更多的附加参数，并且不应该在不清理 sample1 和 sample2 的值的情况下完成。

根据您的情况，这可能是一个可行的解决方案，但我认为 Robert Levy's suggestion 将数据添加到表单中的隐藏输入可能是一个更好的解决方案。

【讨论】：

我尝试了您的解决方案：sample1 和 sample2 值正确，但 formData（模型）现在返回所有空值。
在没有看到更多网站的情况下，我不知道为什么会这样，尽管一个简单的解决方案可能只是在 ajax 调用之前声明var formData = $("#form").serialize();，然后通过到data 对象的formData 元素。
按照您的建议，使用 var formData，我可以看到（在输入 ajax 之前）它具有所有正确的值，但它们在控制器操作中都以 null 形式出现。如果我使用原始示例，它们会以所有正确的值到达控制器。
我已经更新了我的答案，希望这个或@Robert 的建议能让你走上正轨。

【解决方案3】：

除了@Michael 的回答，你也可以通过路由来实现：

$.ajax({
   url: "Action/Controller/" + sample1 + "/" + sample2,
   data: $("#form123").serialize(),       
   cache: true,
   type: "POST",
   dataType: 'html',                                
   success: function (data) {                       
   $('#form123').html(data)};              

});

使用这种方法，您需要定义一个路由，以便解释额外的参数。

【讨论】：

【解决方案4】：

更清洁、更“MVC”的解决方案是使用Ajax.BeginForm。

无需编写任何自定义 javascript。只需将您的视图设置为：

@using(Ajax.BeginForm("Action", "Controller", new {@param1 = "aaa", @param2 = "bbb"}, new AjaxOptions(){HttpMethod = "Post", UpdateTargetId = "#section1"})){
<div id="#section1">

..... put your form controls here . . . 

</div>
}

提交后，表单将向服务器发送一个 ajax 请求，其中包含提供的参数和任何表单数据。响应将 #section1 的内容替换为结果（由 UpdateTargetId 选项指定）。

为此，您的控制器操作将类似于

public PartialViewResult Action(string param1, string param2, ViewModel model)

【讨论】：

我不会考虑这个“更多的 MVC”，它只是对微软的 AJAX takelit 有额外的依赖，这是完全没有必要的
您可以在不依赖 Microsoft AJAX 的情况下获得路由。看看@Url.Action(...)

【解决方案5】：

我不确定这些 vars 是服务器端变量还是客户端。

无论哪种方式，我认为您应该将它们嵌入到您的 FORM 中，以便它们被序列化并与表单的其余部分一起发送。

对于服务器端/Razor 变量

<input type="hidden" id="var1" name="var1" value="@sample1" />

对于客户端/JS变量

<input type="hidden" id="var2" name="var2" value="" />

$('#var2').val(var2); //before sending your form of course!

【讨论】：

【解决方案6】：

我知道这是一个老问题，但我遇到了同样的问题，这是出现在搜索它的第一页，所以我想分享其他方法。

在网址部分使用

url: '@Url.Action("Action", "Controller", new { sample1= "XXX", sample2 = "XXX" })'

请记住，变量 sample1 和 sample2 不能是新 {} 中的 js，因为它是一个 htmlHelper 并且处于不同的上下文中，但您可以使用 Viebag/ViewData 或 razor 变量来设置 sample1/2 值或只需使用我的示例中的静态文本即可。

其余代码保持不变。

$.ajax({
url: '@Url.Action("Action", "Controller", new { sample1= "XXX", sample2 = "XXX" })'
   data: $("#form123").serialize(),       
   cache: true,
   type: "POST",
   dataType: 'html',                                
   success: function (data) {                       
   $('#form123').html(data)};              

});

在控制器中：

public async Task<XXX> Action(Model data, string sample1, string sample2)

希望对你有帮助。

【讨论】：