如何从Ajax表单中提交ASP.NET MVC的下拉列表？

Question

如何在ajax表单内部的下拉列表"onchange"事件中提交表单?

根据以下问题: How do you submit a dropdownlist in asp.net mvc，在Html.BeginForm内您可以设置onchange="this.form.submit"并更改下拉列表以返回结果。

然而，在Ajax.BeginForm中使用以下代码：

<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions() { UpdateTargetId = "updateText" })) { %>
    <h2>Top Authors</h2>

    Sort by:&nbsp;<%=Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"], new { onchange = "this.form.submit()" })%>

    <%= Html.TextBox("updateText")%>
<% } %>

向控制器操作发送回帖，但整个页面都被“updateText”文本的内容替换，而不仅仅是在“updateText”文本框内部分。

因此，整个页面被替换，而非仅仅是Ajax.BeginForm内的区域。

DropDownList调用this.form.submit的正确方式是什么，以便仅替换Ajax.BeginForm内的区域？

- Gene

Answer 1

好的，两年过去了，你可能不再关心。谁知道呢：也许其他人（比如我;-)）还在关注。

所以这里是（极其简单的）解决方案：

在你的 Html.DropDownList(...) 调用中，改变

new { onchange = "this.form.submit()" }

to

new { onchange = "this.form.onsubmit()" }

你能看出区别吗？;-)

原因是Ajax.BeginForm()创建了一个带有onsubmit()处理程序的表单，以异步方式提交表单。通过调用submit()，您可以绕过此onsubmit()自定义处理程序。对我来说，调用onsubmit()起作用了。

- Serge Wautier

---

谢谢，这绝对是最简单的方法，不需要所有多余的jQuery脚本。 - CkH

简约中蕴藏美！ - Elad Katz

这个方法对我没用，但是非常相似的解决方案起作用了。请参考stackoverflow上的以下问题：https://dev59.com/k2kv5IYBdhLWcg3wewxd - Alex M

这个在Safari上能用吗？据我所知，onsubmit在Safari上不起作用。 - mzonerz

Answer 2

在您的下拉菜单中替换。

this.form.submit()

to

$(this.form).submit();

- Bonomi

Answer 3

你可以尝试这样做（需要jQuery）：

$("#yourDropdown").change(function() {
  var f = $("#yourForm");
  var action = f.attr("action");
  var serializedForm = f.serialize();
  $.post(action, serializedForm,
    function () { alert("Finished! Can do something here!") });
});

- Strelok

Answer 4

我也遇到了同样的问题。我在局部视图中有几个下拉列表，以便它们可以独立刷新，但设置“onchange”属性会使整个页面刷新。

我注意到，“this.form.submit()”总是指向局部视图外的主表单。因此，我在AJAX表单中添加了一个提交按钮，并引用了它：

<%=Html.DropDownList("data", ViewData["data"] as SelectList
, new { onchange = "$(\"#button" + Model.IdIndex + "\").click();" })%>


<input type="submit" id="button<%=Model.IdIndex %>" style="display: none"  /><br />

我的“Model.IdIndex”只是一个变量，用于访问同一页面中的不同控件。希望有所帮助。

- Francisco

Answer 5

如果您正在使用MVC，那么最好的方法可能是使用jQuery...

<%= Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"]) %> 
<%= Html.TextBox("updateText") %>

<script>
$("#sortByList").change(function() {
    $.ajax({
        url: <%= Url.Action("UpdateForm")%>,
        type: "POST",
        data: { 'sortBy': $(this).val() },
        dataType: "json",
        success: function(result) { $('#updateText').text(result); },
        error: function(error) { alert(error); }
    })

});
</script>

你的控制器可能是这样的：

public JsonResult UpdateForm(string sortBy)
{
    string result = "Your result here";
    return Json(result);
}

- Stelloy

Answer 6

我在我的 AJAX.BeginForm 中有一个像这样的按钮

  <button id="submitButton" type="submit"  class="btn" style="vertical-align: top"><i class="icon"></i> replace</button>

而且onsubmit或Francisco的解决方案都没有起作用（我仍然不知道为什么）

所以我创建了一个替代方案：

  new { onchange = "document.getElementById('submitButton').click()" }

- Carbosound1

Answer 7

我们能看到你的控制器代码吗？您可以在控制器中使用Request.IsMvcAjaxRequest()，如果是Ajax请求，则仅返回部分数据而不是整个视图。在您的视图中，将表单移动到PartialView并调用

Html.RenderPartial("viewname");

在您的控制器中：

if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}
else
{ //非Ajax代码。 }

- Adam

---

问题不在控制器上。问题确切地说是表单没有以ajax方式提交。 - Serge Wautier