Chiamata AJAX su evento OnChange in MVC

Question

Devo effettuare una chiamata AJAX sull'evento onchange di un elenco a discesa che fa parte di una vista. Sull'evento change devo chiamare il database, fare alcuni calcoli visualizzare l'interfaccia utente e quindi usare i calcoli per compilare un controllo grafico. Il display dell'interfaccia utente si trova in questa sequenza. Grafico Elenco categorie a discesa elenco di sottocategorie con punteggio di valutazione Quindi, come è possibile, è necessario visualizzare le classificazioni di categorie in div3 sull'evento di modifica, utilizzare il punteggio di classificazione per compilare il grafico. Facilmente fatto in .NET ma come in MVC ?? L'unica opzione a cui riesco a pensare è creare il controllo utente con codice nascosto, ma che sconfigge lo scopo dell'utilizzo di MVC. Qualsiasi aiuto è apprezzato.

Answer 1

Cercare di utilizzare una vista parziale. Ci sono molti collegamenti se Google ASP.Net MVC Vista parziale ma qui è quella che ho trovato intestering

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

Answer 2

non sono sicuro capisco perfettamente quello che stai cercando di fare, ma in modo MVC Probabilmente gestirò è unire insieme un paio di chiamate AJAX. Il primo aggiorna le classificazioni di categoria in base alla selezione. Questo probabilmente restituisce JSON in modo da poter estrarre facilmente i punteggi delle classifiche. Il secondo prende i punteggi delle valutazioni restituiti dal primo e chiama un'azione che esegue il rendering del grafico come HTML, cioè restituisce una vista parziale che viene restituita e inserita nella posizione corretta nel documento.

Answer 3

Ecco un'idea generale su come implementarlo.

<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> 

Ecco il metodo di azione del controller.

[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); 
} 

Penso che questa sia la risposta che stai cercando.

Answer 4

Ok, se ciò che si vuole, tra l'altro un modo per chiamare un evento onchange quando un cambiamento DropDownList questo può essere utile:

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

allora si può avere questo codice javascript e il codice Ajax. Ed ecco un esempio di un codice jax per chiamare un metodo di azione.

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ì, è vero - unico cambiamento è la sostituzione:

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

con:

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

trovato in this posta