22

您如何从 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 内的区域？

4

7 回答 7

41

好吧，将近 2 年后，你可能不再关心了。谁知道：也许其他人（比如我 ;-) 会。

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

在您的Html.DropDownList(...)通话中，更改

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

至

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

您看得出来差别吗？;-)

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

于 2010-12-01T15:50:20.703 回答
5

在您的下拉列表中替换

this.form.submit()

至

$(this.form).submit();
于 2014-06-25T14:48:43.850 回答
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!") });
});
于 2008-12-15T03:25:10.350 回答
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”只是一个访问同一页面中不同控件的变量。希望能帮助到你。

于 2009-06-09T16:55:59.767 回答
1

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

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

并且 onsubmit 或来自弗朗西斯科的解决方案不起作用（我仍然不知道为什么）

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

  new { onchange = "document.getElementById('submitButton').click()" }
于 2012-05-18T03:02:35.180 回答
1

如果您使用的是 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);
}
于 2009-12-16T12:24:01.620 回答
0

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

Html.RenderPartial("viewname");

在您的控制器中：

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

于 2008-12-21T03:00:58.940 回答