Appel AJAX sur événement OnChange dans MVC

Question

Je dois faire un appel AJAX sur l'événement onchange d'une liste déroulante qui fait partie d'une vue. Sur l'événement de changement, j'ai besoin d'appeler la base de données, faire quelques calculs afficher l'interface utilisateur, puis utiliser les calculs pour remplir un contrôle de graphique. L'affichage de l'interface utilisateur est dans cette séquence. Chart Liste déroulante des catégories liste des sous catégories avec note Donc comme vous pouvez je dois afficher les notes des catégories dans div3 sur l'événement de changement, utilisez le score des notes pour remplir le tableau. Facilement fait en .NET mais comment dans MVC ?? La seule option que je peux penser est de créer le contrôle de l'utilisateur avec le code derrière, mais cela va à l'encontre de l'objectif d'utiliser MVC. Toute aide est appréciée.

Answer 1

Examinez l'utilisation d'une vue partielle. Il y a beaucoup de liens si vous Google ASP.Net MVC Vue partielle, mais voici que j'ai trouvé intestering

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

Answer 2

Je ne suis pas sûr que je comprends tout à fait ce que vous essayez de faire, mais dans la façon MVC Je voudrais probablement gérer c'est d'enchaîner quelques appels AJAX. Le premier met à jour les évaluations de catégorie en fonction de la sélection. Cela renvoie probablement JSON afin que vous puissiez facilement extraire les scores d'évaluation. La seconde prend les scores d'évaluation renvoyés par le premier et appelle une action qui rend le graphique au format HTML, c'est-à-dire qu'il rend une vue partielle qui est renvoyée et insérée à l'endroit approprié dans le document.

Answer 3

Voici une idée générale de la façon de l'implémenter.

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

Voici la méthode d'action de votre contrôleur.

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

Je pense que c'est la réponse que vous cherchez.

Answer 4

Ok, si ce que vous voulez entre autres un moyen d'appeler un événement onchange lorsqu'un changement dropdownlist cela peut être utile:

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

alors vous pouvez avoir ce code javascript et ajax votre code. Et voici un exemple de code jax pour appeler une méthode d'action.

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

Oui, c'est vrai - seul changement remplace:

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

avec:

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

trouvé dans this après