Html.DropDownList with Ajax call to fill partial view

I have a dropdownlist in my page: (results is a div)

  <% 
    using (Ajax.BeginForm("MembersByClubSearch", new AjaxOptions { UpdateTargetId = "results" }))
    { 
      %>
      <%= Html.DropDownList("ddlClub开发者_StackOverflow社区s", new SelectList(Model.ClubNameList, "ClubID", "ClubName"), new { onchange = "this.form.submit();" })%>
      <%
    }
  %>

My Action is

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

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

But the submit of my dropdownlist isn't an AjaxRequest. When I use a submit button, it works fine, but I want to submit when the user changes the dropdown instead of changing dropdown AND clicking a button.

Any ideas?

thanks,

Filip

I would recommend you to get rid of MSAjax and use jquery along with the form plugin:

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

And in a separate js file:

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

This is because the this.form.submit(); javascript function performs a traditional HTTP POST on your form. You need to send an AJAX style POST to your controller instead in order to trigger the if (Request.IsAjaxRequest()) statement.

I would use JQuery and the $.post() function, which allows you to specify a callback function to update your partial view.

There is a good example here that may help you: Dynamic-Select-Lists-with-MVC-and-jQuery