Question

我的页面中有一个下拉列表:(结果是div）

  <% 
    using (Ajax.BeginForm("MembersByClubSearch", new AjaxOptions { UpdateTargetId = "results" }))
    { 
      %>
      <%= Html.DropDownList("ddlClubs", new SelectList(Model.ClubNameList, "ClubID", "ClubName"), new { onchange = "this.form.submit();" })%>
      <%
    }
  %>

我的行动是

public ActionResult MembersByClubSearch(string query)
    {
members = ... // code to get the List<> of members

      if (Request.IsAjaxRequest())
      {
        return View("MembersByClubSearchResultUserControl", members);
      }
      else
      {
        return View(members);
      }
    }

但是我的下拉列表的提交不是AjaxRequest。当我使用提交按钮时，它工作正常，但我想在用户更改下拉列表时提交，而不是更改下拉列表并单击按钮。

有什么想法吗？

感谢，

菲利普

Answer 1

我建议你摆脱MSAjax并使用jquery和form plugin：

<% using (Html.BeginForm("MembersByClubSearch", "Home")) { %>
    <%= Html.DropDownListFor(
        x => x.SelectedClubId, 
        new SelectList(Model.ClubNameList, "ClubID", "ClubName"), 
        new { id = "club" }
    ) %>
<% } %>

在一个单独的js文件中：

$(function() {
    // Ajaxify the form => this is for normal submit
    $('form').ajaxForm(function(result) {
        $('#results').html(result);
    });

    // When the value of the dropdown changes force an ajax submit
    $('#club').change(function() {
        $('form').ajaxSubmit();
    });
});

Answer 2

这是因为this.form.submit(); javascript函数在表单上执行传统的HTTP POST。您需要向控制器发送一个AJAX样式的POST，以便触发if (Request.IsAjaxRequest())语句。

我会使用JQuery和$ .post（）函数，它允许您指定一个回调函数来更新您的局部视图。

这里有一个很好的例子可以帮助你：Dynamic-Select-Lists-with-MVC-and-jQuery

用Ajax调用Html.DropDownList来填充局部视图

2 个答案: