AJAX se comporte différemment pour le bouton Soumettre par rapport à this.form.submit?

Question

Je cherche à sauvegarder automatiquement une sélection dans une liste déroulante (ASP.NET, MVC, VB), mais cela ne se comporte pas comme prévu. Voici l'action factice dans le contrôleur :

 _
Function TestAction(ByVal id As Integer) As ActionResult
    Return Content(id)
End Function

et le HTML :

<% Using Ajax.BeginForm("TestAction", New AjaxOptions With {.UpdateTargetId = "test"})%>
<%=Html.Hidden("id", 123)%>
<%=Html.DropDownList("actions", Nothing, New With {.onchange = "this.form.submit();"})%>

<% End Using%>

Le bouton de soumission fonctionne comme prévu - le span est rempli avec "123". En revanche, la liste déroulante ouvre une nouvelle page avec juste "123" dessus. Pourquoi "this.form.submit()" ne fait pas la même chose que le bouton de soumission? Y a-t-il un appel différent que je devrais faire pour émuler le bouton de soumission?

Answer 1

Cette.form soumet ne déclenche pas l'événement form.onsubmit. Appuyer sur le bouton de soumission, en revanche, le fait. Cela, combiné avec le HTML que génère Ajax.BeginForm, explique pourquoi les deux se comportent différemment. En ce qui concerne la façon de faire en sorte que votre événement fasse la même chose que d'appuyer sur le bouton de soumission, regardez le HTML dans l'article lié :

Sys.Mvc.AsyncForm.handleSubmit(
         this,
         new Sys.UI.DomEvent(event),
         { 
             insertionMode: Sys.Mvc.InsertionMode.replace,
             updateTargetId: 'test' 
         });

Answer 2

Je sais que c'est vieux, mais il y a une nouvelle (et meilleure) façon de le faire.

Au lieu d'utiliser javascript, utilisez jQuery. J'ai eu ce problème et cela a très bien fonctionné.

this.form.submit() <---- Javascript

$("form").submit() <---- jQuery