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

dropdownlist调用this.form.submit的正确方法是什么，只有Ajax.BeginForm中的区域？

Answer 1

好的，差不多2年后，你可能已经不在乎了。谁知道：也许其他人（比如我;-)做。

所以这是（非常简单）的解决方案：

在Html.DropDownList(...)来电中，更改

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

到

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

你能发现差异吗？ ; - ）

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

Answer 2

在您的下拉列表中

替换

this.form.submit()

到

$(this.form).submit();

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!") });
});

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.IdIdex”只是一个用于访问同一页面中不同控件的变量。希望它有所帮助。

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

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

Answer 7

我们能看到您的Controller代码吗？您可以在控制器中使用Request.IsMvcAjaxRequest（），如果它是Ajax请求而不是整个View，则只返回一部分数据。在您的视图中，将表单移至PartialView并调用
Html.RenderPartial("viewname");

在您的控制器中：

if (Request.IsMvcAjaxRequest()) { return PartialView("viewname"); } else { //Non Ajax code here. }

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

7 个答案: