¿Cómo se envía una lista desplegable en asp.net mvc desde un formulario Ajax?

asp.net-mvc drop-down-menu

Question

¿Cómo se envía desde un evento "onchange" de lista desplegable desde dentro de un formulario ajax?

De acuerdo con la siguiente pregunta: ¿Cómo se envía una lista desplegable en asp.net mvc , desde dentro de un Html.BeginFrom puede establecer onchange = "this.form.submit" y cambiar las publicaciones desplegables de nuevo.

Sin embargo, usando el siguiente código (dentro de un Ajax.BeginFrom):

<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions() { UpdateTargetId = "updateText" })) { %>
    <h2>Top Authors</h2>

    Sort by:&nbsp;<%=Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"], new { onchange = "this.form.submit()" })%>

    <%= Html.TextBox("updateText")%>
<% } %>

Publica de nuevo en la acción del controlador, pero la página completa se reemplaza con el contenido del texto "updateText", en lugar de solo lo que está dentro del cuadro de texto "updateText".

Por lo tanto, en lugar de reemplazar solo el área dentro de Ajax.BeginForm, se reemplaza toda la página.

¿Cuál es la forma correcta para que la lista desplegable llame a this.form.submit de modo que solo el área dentro de Ajax.BeginForm?

Answer 1

Qué puedes intentar hacer esto (se requiere 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!") });
});

Answer 2

¿Podemos ver tu código de controlador? Puede usar Request.IsMvcAjaxRequest () en su controlador para devolver solo una parte de los datos si se trata de una solicitud de Ajax en lugar de una vista completa. En su vista mueva su formulario a una vista parcial y llame

Html.RenderPartial("viewname");

En tu controlador:

if (Request.IsMvcAjaxRequest())  {  return PartialView("viewname");  }  else  { //Non Ajax code here. }

Answer 3

Tuve el mismo problema también. Tenía varias listas desplegables en vistas parciales para que pudieran actualizarse de forma independiente, pero establecer el atributo "en cambio" actualizaba la página entera.

Noté que "this.form.submit ()" siempre hacía referencia al formulario principal, fuera de la vista parcial. Entonces, en su lugar, agregué un botón de enviar dentro del formulario AJAX y me referí a eso:

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


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

Mi "Model.IdIdex" es solo una variable para acceder a diferentes controles en la misma página. Espero eso ayude.

Answer 4

Si está utilizando MVC, probablemente la mejor manera es con 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>

Su controlador sería algo así como:

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

Answer 5

OK, casi 2 años después, es probable que ya no te importe. Quién sabe: quizás otros (como yo ;-) sí.

Así que aquí está la solución (extremadamente simple):

En su Html.DropDownList(...) , cambie

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

a

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

¿Puedes ver la diferencia? ;-)

La razón es que Ajax.BeginForm() crea un formulario con un controlador onsubmit() para enviar el formulario de forma asincrónica. Al llamar a submit() , onsubmit() este controlador personalizado onsubmit() . Llamar a onsubmit() funcionó para mí.

Answer 6

Tenía un botón como este en mi AJAX.BeginForm

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

Y onsubmit o la solución de Francisco no funcionó (todavía no sé por qué)

Entonces creé una alternativa:

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

Answer 7

en su menú desplegable reemplazar

this.form.submit()

a

$(this.form).submit();