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

时间:2008-12-15 02:29:30

标签: asp.net-mvc drop-down-menu ajax.beginform

如何从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中的区域?

7 个答案:

答案 0 :(得分:39)

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

所以这是(非常简单)的解决方案:

Html.DropDownList(...)来电中,更改

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

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

你能发现差异吗? ; - )

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

答案 1 :(得分:5)

在您的下拉列表中

替换

this.form.submit()

$(this.form).submit();

答案 2 :(得分: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!") });
});

答案 3 :(得分: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”只是一个用于访问同一页面中不同控件的变量。 希望它有所帮助。

答案 4 :(得分:1)

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

答案 5 :(得分: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);
}

答案 6 :(得分:0)

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

Html.RenderPartial("viewname");

在您的控制器中:

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