Rendering vue partielle dynamiquement dans ASP.Net MVC3 Razor en utilisant Ajax appel à l'action

Question

Je suis en train de créer un formulaire de page unique pour créer un «élément de travail». L'une des propriétés est une liste déroulante pour 'type d'élément de travail'.

En fonction du type d'élément de travail, l'utilisateur peut avoir besoin de fournir des informations supplémentaires dans une grille d'attributs de style paire-valeur-nom (feuille de propriétés).

Je souhaite effectuer un rendu dynamique de la feuille de propriétés dès qu'un type d'élément de travail est sélectionné ou modifié. Une fois que l'utilisateur fournit toutes les informations, il clique sur soumettre pour créer l'élément de travail.

C'est ce que j'ai jusqu'à présent:

@using (Ajax.BeginForm("AttributeData", new AjaxOptions() { UpdateTargetId="AttributeDataCell" })) 
{ 

     <div style="float:left"> 

@{ 
    Html.RenderPartial("CreateWorkItemPartialView"); 
} 
</div>  

<div id="AttributeDataCell" style="float:right"> 
    @Html.Action("AttributeData", new {id = 1}) 
</div> 
} 

L'action AttributeData dans le contrôleur rend simplement la vue partielle:

public ActionResult AttributeData(int id = 0) 
{ 
    var attributes = _workItemDataService.ListWorkItemTypeAttributes(id); 
    return PartialView("EditWorkItemAttributesPartialView", attributes); 

} 

Maintenant, je voudrais brancher jusqu'à présent au goutte à l'événement de sélection de la liste déroulante afin que la vue partielle redevienne dans la cellule du tableau ci-dessus à chaque changement de sélection. Je voudrais passer dans la valeur sélectionnée en tant qu'ID. Un moyen consiste à forcer le formulaire à se soumettre (et donc à rendre).

1. Si c'est la bonne approche, comment procédons-nous? Esp., Comment faisons-nous seulement la feuille de propriétés à rendre?

2. S'il existe un meilleur moyen d'obtenir ce qui précède, veuillez l'indiquer.

Merci

Answer 1

Vous pouvez vous abonner à l'événement .change() de la liste déroulante et déclencher une requête AJAX:

$(function() { 
    $('#Id_Of_Your_Drop_Down').change(function() { 
     // This event will be triggered when the dropdown list selection changes 

     // We start by fetching the form element. Note that if you have 
     // multiple forms on the page it would be better to provide it 
     // an unique id in the Ajax.BeginForm helper and then use id selector: 
     var form = $('form'); 

     // finally we send the AJAX request: 
     $.ajax({ 
      url: form.attr('action'), 
      type: form.attr('method'), 
      data: form.serialize(), 
      success: function(result) { 
       // The AJAX request succeeded and the result variable 
       // will contain the partial HTML returned by the action 
       // we inject it into the div: 
       $('#AttributeDataCell').html(result); 
      } 
     }); 
    }); 
});