Post incendie sur Ajax.BeginForm avec JQuery

Question

J'ai ce formulaire MVC avec 2 dropdownlist où la sélection dans le premier menu déroulant devrait mettre à jour le second via un appel AJAX.

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 côté client suivant HTML

<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 bien onsubmit devrait prendre soin de l'appel AJAX et aussi 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 n'est pas annulé résultant en un appel AJAX (provoqué par le code de sous-ordre du formulaire) et seconde une actualisation complète de la page.

Évidemment pas ce que je veux.

Lorsque je débogue le code javascript onsubmit il revient à une méthode dans le fichier MicrosoftAjax.js qui devrait annuler le comportement de publication 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; 
    } 
} 

Lors du débogage avec IE je reçois à la ligne this.rawEvent.returnValue = false; ce qui devrait être correct pour annuler un événement dans IE, mais cela ne fonctionne pas pour moi.

J'ai déjà élaboré une solution alternative où jQuery lance un appel AJAX et construit le nouveau client dropdownlist ou un autre où j'ajoute un bouton invisible au formulaire pour appeler son événement click dans le changement événement de la première liste déroulante mais je veux toujours utiliser le premier (le plus propre imo).

Un conseil?

S.

Answer 1

Je l'ai fait un peu plus la recherche et je suis venu avec ce qui suit qui est pas aussi bon aussi simple d'appeler la $("#someForm").submit(); mais je préfère encore sur la construction du dropdownlist côté client après un appel AJAX ou en cliquant 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 utiliser la méthode de charge jquery pour modifier le contenu de mon deuxième dropdownlist

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

J'ai trouvé cette méthode grâce au poste suivant: Render partial form in jQuery dialog

Cela fonctionne pour IE et FF pour moi.

Je voudrais toujours savoir pourquoi mon premier code ne fonctionne pas dans IE.

Answer 2

Avez-vous trouvé ce problème? Pouvez-vous définir un alert() dans la fenêtre.Event pour voir si IE est en train de l'appeler? En outre, vous pouvez tout simplement essayer return false(); au lieu du this.rawEvent.returnValue = false;