如何从 Ajax 表单在 asp.net mvc 中提交下拉列表

Question

如何从 ajax 表单内部的下拉列表“onchange”事件提交？

根据以下问题： How do you Submit a dropdownlist in asp .net mvc，从 Html.BeginFrom 内部，您可以设置 onchange="this.form.submit" 并更改下拉列表回发。

但是，使用以下代码（在 Ajax.BeginFrom 内）：

<% 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 内的区域，而是替换整个页面。

下拉列表调用 this.form.submit 以便仅调用 Ajax.BeginForm 内的区域的正确方法是什么？

Answer 1

你可以尝试这样做（需要 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!") });
});

Answer 2

我也有同样的问题。 我在部分视图中有几个下拉列表，因此它们可以独立刷新，但设置“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.IdIdex”只是一个用于访问同一页面中不同控件的变量。
希望能帮助到你。

Answer 3

如果您使用 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);
}

Answer 4

我的 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()" }

Answer 5

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

Html.RenderPartial("viewname");

在您的控制器中：

if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}

其他
{
//此处非 Ajax 代码。
}

Answer 6

好吧，差不多两年后，你可能不再关心了。 谁知道呢：也许其他人（比如我；-）会这样做。

因此，这是（非常简单）的解决方案：

在 Html.DropDownList(...) 调用中，更改

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

为

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

Can you find the Difference? ;-)

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

Answer 7

在你的下拉菜单中替换

this.form.submit()

为

$(this.form).submit();