Html.DropDownList avec appel Ajax en vue partielle

Question

J'ai un dropdownlist dans ma page: (résultats est un div)

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

Mon action est

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

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

Mais le soumettre de mon dropdownlist n'est pas un AjaxRequest. Lorsque j'utilise un bouton d'envoi, il fonctionne correctement, mais je souhaite l'envoyer lorsque l'utilisateur modifie la liste déroulante au lieu de la modifier et de cliquer sur un bouton.

Des idées?

grâce,

Filip

Answer 1

Je vous recommande de vous débarrasser de MSAjax et l'utilisation jquery avec le form plugin:

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

Et dans un fichier js séparé :

$(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

En effet, la fonction javascript this.form.submit(); effectue un HTTP POST traditionnel sur votre formulaire. Vous devez envoyer un POST de style AJAX à votre contrôleur à la place afin de déclencher l'instruction if (Request.IsAjaxRequest()).

J'utiliserais JQuery et la fonction $ .post(), qui vous permet de spécifier une fonction de rappel pour mettre à jour votre vue partielle.

Il y a un bon exemple qui peut vous aider: Dynamic-Select-Lists-with-MVC-and-jQuery