Comment soumettre une liste déroulante dans asp.net mvc d'un formulaire Ajax

OK, presque 2 ans plus tard, tu t'en fous probablement plus. Qui sait: Peut-être que d'autres (comme moi; -).

voici donc la solution (extrêmement simple):

dans votre Html.DropDownList(...) appel, changement

new { onchange = "this.form.submit()" }

à

new { onchange = "this.form.onsubmit()" }

pouvez-vous faire la différence? ;- )

la raison est que Ajax.BeginForm() crée un formulaire avec un gestionnaire onsubmit() pour soumettre le formulaire asynchrone. En appelant submit() , vous contournez ce onsubmit() gestionnaire personnalisé. Appeler onsubmit() a fonctionné pour moi.

dans votre liste remplacer

this.form.submit()

à

$(this.form).submit();

Ce que vous pouvez essayer de le faire de cette (jQuery):

$("#yourDropdown").change(function() {
  var f = $("#yourForm");
  var action = f.attr("action");
  var serializedForm = f.serialize();
  $.post(action, serializedForm,
    function () { alert("Finished! Can do something here!") });
});

j'ai eu le même problème aussi. J'ai eu plusieurs listes déroulantes dans des vues partielles afin qu'elles puissent se rafraîchir indépendamment, mais le fait de définir l'attribut "onchange" a continué à rafraîchir la page entière.

j'ai remarqué que "cette.forme.submit () " renvoie toujours au formulaire principal, en dehors de la vue partielle. Donc à la place j'ai ajouté un bouton Soumettre à L'intérieur du formulaire AJAX et fait référence à cela:

<%=Html.DropDownList("data", ViewData["data"] as SelectList
, new { onchange = "$(\"#button" + Model.IdIndex + "\").click();" })%>


<input type="submit" id="button<%=Model.IdIndex %>" style="display: none"  /><br />

Mon" Modèle.IdIdex" est juste une variable pour accéder à différents les contrôles dans la même page. Espérons que cela aide.

si vous utilisez MVC alors probablement la meilleure façon est avec jQuery...

<%= Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"]) %> 
<%= Html.TextBox("updateText") %>

<script>
$("#sortByList").change(function() {
    $.ajax({
        url: <%= Url.Action("UpdateForm")%>,
        type: "POST",
        data: { 'sortBy': $(this).val() },
        dataType: "json",
        success: function(result) { $('#updateText').text(result); },
        error: function(error) { alert(error); }
    })

});
</script>

Votre contrôleur serait quelque chose comme:

public JsonResult UpdateForm(string sortBy)
{
    string result = "Your result here";
    return Json(result);
}

j'avais un bouton comme ça dans mon AJAX.BeginForm

  <button id="submitButton" type="submit"  class="btn" style="vertical-align: top"><i class="icon"></i> replace</button>

Et onsubmit ou la solution de Francisco n'a pas fonctionné (je ne sais toujours pas pourquoi)

donc j'ai créé une alternative:

  new { onchange = "document.getElementById('submitButton').click()" }

peut-on voir votre code de contrôleur? Vous pouvez utiliser la Demande.IsMvcAjaxRequest () dans votre controller pour retourner seulement une partie des données si c'est une requête Ajax au lieu d'une vue entière. Dans votre vue, déplacez votre formulaire vers une vue partielle et appelez



Html.RenderPartial("viewname");

dans votre contrôleur:

if (Request.IsMvcAjaxRequest())

{

return PartialView("viewname");

}

else

{ //Non Ajax code here. }