Llamada AJAX al evento OnChange en MVC

Question

Tengo que hacer una llamada AJAX en el evento onchange de una lista desplegable que es parte de una vista. En el evento de cambio necesito llamar a la base de datos, hacer algunos cálculos para mostrar la interfaz de usuario y luego usar los cálculos para completar un control de gráfico. La pantalla de la interfaz de usuario está en esta secuencia. Gráfico Lista de categorías desplegables lista de subcategorías con puntaje de calificación Para que pueda necesitar mostrar las clasificaciones de categorías en div3 en el evento de cambio, use la calificación para completar el gráfico. Hecho fácilmente en .NET, pero ¿cómo hacerlo en MVC? La única opción que puedo pensar es crear control de usuario con código detrás, pero eso frustra el propósito de usar MVC. Se agradece cualquier ayuda.

Answer 1

Examine el uso de una vista parcial. Hay muchos enlaces si Google ASP.Net MVC Vista parcial pero aquí es uno que encontré intestering

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

Answer 2

no estoy seguro de entender completamente lo que estás tratando de hacer, pero en el camino MVC Probablemente lo manejaría es encadenar un par de llamadas AJAX. La primera actualiza las clasificaciones de categoría según la selección. Es probable que esto devuelva JSON para que pueda extraer fácilmente los puntajes de calificación. El segundo toma los puntajes de calificaciones devueltos por el primero y llama a una acción que representa el gráfico como HTML, es decir, representa una vista parcial que se devuelve e inserta en el lugar correcto en el documento.

Answer 3

Aquí hay una idea general de cómo implementar esto.

<script type="text/javascript"> 
    // assuming you're using jQuery 
    $("#ddlAjax").change(function (event) { 
     $.ajax({ 
      url: "Controller/GetPartialGraph/" + $(this).val(), 
      data: { id = $(this).val() /* add other additional parameters */ }, 
      cache: false, 
      type: "POST", 
      dataType: "html", 

      success: function (data, textStatus, XMLHttpRequest) { 
       $("#divPartialView").html(data); // HTML DOM replace 
      } 
     }); 
    }); 
</script> 

<select id="ddlAjax"> 
    ... list of options 
</select> 


<div id="divPartialView"> 
    <!-- something like this in your ASP.NET View --> 
    <%= Html.RenderPartial("MyPartialView", Model) %> 
</div> 

Aquí está el método de acción de su controlador.

[HttpPost] 
public PartialViewResult GetPartialGraph(int id /* drop down value */) 
{ 
    // do calculations whatever you need to do 
    // instantiate Model object 
    var model = myBusinessLogicService.DoCalculations(id); 

    return PartialView("MyPartialView", model); 
} 

Creo que esta es la respuesta que está buscando.

Answer 4

Ok, si lo que quieres ia una manera de llamar a un evento onchange cuando un cambio del dropdownlist esto puede ser útil:

@Html.DropDownListFor(
         model => model.SelectedId, 
         new SelectList(ViewBag.Ids, "Id", "Name"), 
         "[All]", 
         new { onchange = "onChangeId();", @id ="municipalityDropDown" } 
         ) 

entonces usted puede tener este código javascript y ajax código. Y aquí hay un ejemplo de un código jax para llamar a un método de acción.

function onChangeId() { 
     jQuery.ajax({ 
      url: '@Url.Action("Action Method Name", "Controller Name")', 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ data: data2 }), 
      success: function (result) { } 
     }); 
    } 

Answer 5

Sí, es cierto - único cambio es la sustitución:

onchange = “this.form.submit();” 

con:

onchange = “$(this.form).submit();” 

encontré en this posterior