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

How do you submit from a dropdownlist "onchange" event from inside of an ajax form?

你如何从ajax表单中提交下拉列表“onchange”事件？

According to the following question: How do you submit a dropdownlist in asp.net mvc, from inside of an Html.BeginFrom you can set onchange="this.form.submit" and changing the dropdown posts back.

根据以下问题：如何在html.BeginFrom中提交asp.net mvc中的下拉列表，您可以设置onchange =“this.form.submit”并更改下拉帖子。

However, using the following code (inside an Ajax.BeginFrom):

但是，使用以下代码（在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")%>
<% } %>

Posts back to the controller action, but the entire page is replaced with the contents of the "updateText" text, rather than just what is inside the "updateText" textbox.

回发到控制器操作，但整个页面被替换为“updateText”文本的内容，而不是“updateText”文本框中的内容。

Thus, rather than replacing just the area inside the Ajax.BeginForm, the entire page is replaced.

因此，不是仅替换Ajax.BeginForm中的区域，而是替换整个页面。

What is the correct way for the dropdownlist to call this.form.submit such that only the area inside the Ajax.BeginForm?

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

7 个解决方案

#1

OK, nearly 2 years later, you probably don't care anymore. Who knows: Maybe others (such as me ;-) do.

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

So here's the (extremely simple) solution:

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

In your Html.DropDownList(...) call, change

在你的Html.DropDownList（...）调用中，改变

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

至

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

Can you spot the difference? ;-)

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

The reason is that Ajax.BeginForm() creates a form with an onsubmit() handler to submit the form asynchronously. By calling submit(), you bypass this onsubmit() custom handler. Calling onsubmit() worked for me.

原因是Ajax.BeginForm（）使用onsubmit（）处理程序创建一个表单，以异步方式提交表单。通过调用submit（），您可以绕过此onsubmit（）自定义处理程序。调用onsubmit（）为我工作。

#2

in your dropdown replace

在你的下拉列表替换

this.form.submit()

至

$(this.form).submit();

#3

What you can try to do it this (jQuery required):

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

#4

I had the same problem too. I had several dropdown lists in partial views so they could refresh independently, but setting the "onchange" attribute kept refreshing the entire page.

我也有同样的问题。我在部分视图中有几个下拉列表，因此它们可以独立刷新，但设置“onchange”属性可以不断刷新整个页面。

I noticed that "this.form.submit()" always referred to the main form, outside the partial view. So instead I added a submit button inside the AJAX form and referred to that:

我注意到“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 />

My "Model.IdIdex" is just a variable to access different controls in the same page. Hope it helps.

我的“Model.IdIdex”只是一个访问同一页面中不同控件的变量。希望能帮助到你。

#5

If you are using MVC then probably the best way is with jQuery...

如果您正在使用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>

Your controller would be something like:

你的控制器将是这样的：

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

#6

I had a button like this in my AJAX.BeginForm

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

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

And onsubmit or the solution from Francisco didn't work (I still don't know why)

并且onsubmit或者来自Francisco的解决方案不起作用（我仍然不知道为什么）

So I created an alternative:

所以我创建了另一种选择：

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

#7

Can we see your Controller code? You can use Request.IsMvcAjaxRequest() in your controller to return only a portion of data if it is an Ajax Request instead of an entire View. In your View move your form to a PartialView and call
Html.RenderPartial("viewname");

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

In your Controller:

在您的控制器中：

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

if（Request.IsMvcAjaxRequest（））{return PartialView（“viewname”）; } else {//非Ajax代码。 }

#1