asp.net mvc & jquery dialog: Quelle approche dois-je prendre pour ajouter des éléments à une liste déroulante/liste de sélection sans postaback complet?

Question

Je suis nouveau sur MVC et j'ai une bonne connaissance du modèle de base, mais je fais tout avec des postbacks, etc.

Un aspect de l'interface utilisateur que je veux créer est d'avoir une liste déroulante d'éléments avec un bouton pour ajouter un élément à la base de données et actualiser la liste. Réaliser cela avec WebForms était simple car tout était enveloppé dans UpdatePanels, mais quelle est la meilleure approche pour y parvenir en utilisant MVC?

Une partie du balisage de la liste et le bouton ressembler à ceci:

<table> 
    <tr> 
     <td><%=Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList, "(select job title)", new { @class = "data-entry-field" })%></td> 
     <td>&nbsp;</td> 
     <td><a id="AddJobTitleDialogLink" href="javascript: addJobTitleDialog();" title="Add Job Title"><img id="AddJobTitleButtonImage" src="/Content/Images/Icons/16x16/PlusGrey.png" border="0" /></a></td> 
    </tr> 
</table> 

La boîte de dialogue est un dialogue standard jquery Ui, ressemble à ceci:

<div id="SingleTextEntryDialog" style="display:none"> 
     <table> 
      <tr> 
       <td>Name:</td> 
       <td><input id="SingleTextEntryDialogText" type="text" size="25" /></td> 
      </tr> 
     </table> 
    </div> 

Je suppose que je dois mettre dans un UserControl/PartialView (sont-ils la même chose?) Aussi avec la vue fortement typée comment puis-je passer le modèle ou juste la propriété SelectList à l'UserControl ou n'est-ce pas le cas?

Vous ne savez pas s'il doit exister une forme dans la boîte de dialogue? ou comment cela va posterback via ajax.

Quelques exemples montrent beaucoup de code ajax dans la page quelque chose comme: $.ajax({...}); Je suppose fais cela en utilisant jquery est plus de code que WebForms asp.net, mais il y a juste plus de code pour voir faire une « Afficher la source » sur une feuille?

Vos commentaires ont été appréciés.

Answer 1

Vous pouvez utiliser AJAX ou effectuer un rechargement complet après avoir cliqué sur le bouton. Dans d'autres cas, vous pouvez avoir deux formulaires sur votre page: le premier formulaire contiendra la liste déroulante permettant à l'utilisateur de sélectionner un élément et un second formulaire qui contiendra un champ de saisie et un bouton d'ajout. Les deux formulaires afficheront des actions différentes sur votre contrôleur.

Si vous décidez de ne pas utiliser AJAX, voici comment procéder. Ajouter un formulaire contenant la sélection de titre du poste:

<div id="selectjobcontainer"> 
<% using (Html.BeginForm("selectjob", "home")) { %> 
    <%= Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList) %> 
    <input type="submit" value="Select job title" /> 
<% } %> 
</div> 

Ajouter une autre forme qui permettra à l'utilisateur d'ajouter un titre d'emploi à la liste:

<div id="addjobcontainer"> 
<% using (Html.BeginForm("addjob", "home")) { %> 
    <%= Html.TextBox("JobTitle") %> 
    <input type="submit" value="add job title" /> 
<% } %> 
</div> 

L'action AddJob devrait ajouter le titre du poste à la modélisez et affichez la même vue qui mettra à jour la liste déroulante des tâches.

Si vous décidez d'actualiser la liste déroulante en utilisant AJAX, l'action AddJob doit renvoyer une vue partielle contenant la première forme, ce qui signifie que vous avez besoin de mettre son code dans un contrôle ascx séparé que vous inclure dans la vue principale.

Tout ce qui reste est de ajaxify la deuxième forme en utilisant le plugin jQuery form:

$(function() { 
    $('#addjobcontainer form').ajaxForm({ 
     success: function(html) { 
      $('#selectjobcontainer').html(html); 
     } 
    }); 
});