Fire post on Ajax.BeginForm avec JQuery

Question

J'ai ce formulaire MVC avec 2 listes déroulantes où la sélection sur la première liste déroulante doit mettre à jour la seconde par un appel AJAX.

Le formulaire se présente comme suit :

<%using (Ajax.BeginForm("GetChildren", "Home", null, new AjaxOptions { UpdateTargetId = "result" }, new Dictionary<string, object> { { "id", "someForm" } }))
{ %>
<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>
<% } %>

Avec le script JQuery suivant :

$(function () {
    $("#masterSelection").change(function () {
        $("#someForm").submit();
    });
});

Cela se traduit par le HTML côté client suivant

<form action="/Home/GetChildren" id="someForm" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;result&#39; });">

Si je comprends bien, le onsubmit devrait se charger de l'appel AJAX et empêcher le comportement normal du formulaire (un rafraîchissement complet).

Maintenant, tout fonctionne bien dans Firefox, mais dans IE, il semble que le comportement par défaut ne soit pas annulé, ce qui entraîne un appel AJAX (causé par le code onsubmit du formulaire) et un rafraîchissement complet de la page.

Ce n'est évidemment pas ce que je veux.

Lorsque je débogue le code javascript onsubmit, cela se résume à une méthode dans le fichier MicrosoftAjax.js qui devrait annuler le comportement de post par défaut de mon formulaire.

function Sys$UI$DomEvent$preventDefault() {
    /// <summary locid="M:J#Sys.UI.DomEvent.preventDefault" />
    if (arguments.length !== 0) throw Error.parameterCount();
    if (this.rawEvent.preventDefault) {
        this.rawEvent.preventDefault();
    }
    else if (window.event) {
        this.rawEvent.returnValue = false;
    }
}

En déboguant avec IE, j'arrive à la ligne this.rawEvent.returnValue = false ; qui devrait être correcte pour annuler un événement dans IE mais apparemment cela ne fonctionne pas pour moi.

J'ai déjà élaboré une solution alternative où j'utilise jQuery pour lancer un appel AJAX et construire la nouvelle liste déroulante côté client ou une autre où j'ajoute un bouton invisible au formulaire pour appeler son événement de clic dans l'événement de changement de la première liste déroulante mais je veux toujours utiliser la première solution (la plus propre, je pense).

Des conseils ?

S.

Answer 1

J'ai poursuivi mes recherches et j'ai trouvé la solution suivante, qui n'est pas aussi bonne que le simple appel de la fonction $("#someForm").submit(); mais que je préfère encore à la construction de la liste déroulante côté client après un appel AJAX ou à l'appel du clic sur un bouton caché.

J'ai supprimé le Ajax.BeginForm de la page.

<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%>
<span id="result">
    <%Html.RenderPartial("ChildSelection");%>
</span>

Et j'utilise la méthode jquery load pour modifier le contenu de ma deuxième liste déroulante.

    $(function () {
        $("#masterSelection").change(function () {
            $('#result').load("Home/GetChildren", { masterSelection: this.value });
        });
    });

J'ai trouvé cette méthode grâce au post suivant : http://stackoverflow.com/questions/950412/render-partial-form-in-jquery-dialog

Cela fonctionne à la fois pour IE et FF pour moi.

Je voudrais quand même savoir pourquoi mon premier code ne fonctionne pas dans IE.

Answer 2

Avez-vous réussi à résoudre ce problème ? Pouvez-vous définir un alert() dans le window.Event pour voir si IE l'appelle effectivement ? Par ailleurs, vous pouvez simplement essayer return false(); au lieu de la this.rawEvent.returnValue = false;