Comment récupérer la valeur sélectionnée d'une DropDownList dans un contrôleur MVC ?

Récupération de la valeur DropDownList sélectionnée dans votre contrôleur MVC

Ce guide aborde le défi courant lié à l'accès à la valeur sélectionnée à partir d'une DropDownList au sein d'un contrôleur MVC.

Le problème : Capturer efficacement la sélection de l'utilisateur à partir d'une DropDownList dans l'action de votre contrôleur MVC.

Action du contrôleur (approche initiale) :

Le code suivant illustre une première tentative d'utilisation de FormCollection :

<code class="language-csharp">[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV)
{           
   string strDDLValue = Request.Form["ddlVendor"].ToString(); // Using FormCollection
   return View(MV);
}</code>

Modèle :

<code class="language-csharp">public class MobileViewModel 
{
    public List<tbInsertMobile> MobileList;
    public SelectList Vendor { get; set; }
}</code>

Affichage (partiel) :

<code class="language-html"><table>
    <tr>
        <td>Mobile Manufacturer</td>
        <td>@Html.DropDownList("ddlVendor", Model.Vendor, "Select Manufacturer")</td>
    </tr>
</table></code>

Solutions :

Méthode 1 : Utiliser Request.Form ou FormCollection (Moins recommandé) :

Bien que fonctionnel, l'accès direct à Request.Form est généralement moins préféré en raison de sa dépendance à la manipulation de chaînes et du manque de sécurité de type. Le code ci-dessus démontre déjà cette méthode.

Méthode 2 : liaison de modèle (recommandée) :

Cette approche exploite les capacités de liaison de modèles de MVC pour une solution plus propre et plus maintenable.

1. Améliorez votre modèle : Ajoutez une propriété à votre MobileViewModel pour contenir spécifiquement la valeur du fournisseur sélectionné :

<code class="language-csharp">public class MobileViewModel 
{
    // ... existing properties ...
    public string SelectedVendor { get; set; }
}</code>

2. Mettez à jour votre vue : Utilisez Html.DropDownListFor pour lier la DropDownList à la nouvelle propriété SelectedVendor :

<code class="language-html">@Html.DropDownListFor(m => m.SelectedVendor, Model.Vendor, "Select Manufacturer")</code>

3. Action du contrôleur raffiné :Maintenant, la valeur sélectionnée sera automatiquement renseignée dans la propriété MV.SelectedVendor :

<code class="language-csharp">[HttpPost]
public ActionResult ShowAllMobileDetails(MobileViewModel MV)
{           
   string strDDLValue = MV.SelectedVendor;
   return View(MV);
}</code>

Méthode 3 : Récupération à la fois de la valeur et du texte (avancée) :

Pour obtenir à la fois la valeur sélectionnée et le texte correspondant, vous aurez besoin d'un champ caché et de jQuery.

1. Étendre le modèle : Ajoutez une propriété pour stocker le texte du fournisseur sélectionné :

<code class="language-csharp">public class MobileViewModel 
{
    // ... existing properties ...
    public string SelectedVendor { get; set; }
    public string SelectedVendorText { get; set; }
}</code>

2. Ajouter jQuery : Incluez jQuery dans votre vue et utilisez-le pour mettre à jour le champ masqué chaque fois que la sélection DropDownList change :

<code class="language-javascript">$(function () {
    $("#SelectedVendor").on("change", function () {
        $("#SelectedVendorText").val($(this).find(":selected").text());
    });
});</code>

3. Ajouter le champ caché à la vue :

<code class="language-html">@Html.DropDownListFor(m => m.SelectedVendor, Model.Vendor, "Select Manufacturer")
@Html.HiddenFor(m => m.SelectedVendorText)</code>

Maintenant, MV.SelectedVendor (valeur) et MV.SelectedVendorText (texte) seront disponibles dans votre contrôleur. N'oubliez pas d'inclure la bibliothèque jQuery dans votre vue. C'est la solution la plus robuste.

N'oubliez pas de choisir la solution qui correspond le mieux à vos besoins et à votre style de codage. La liaison de modèles (méthodes 2 et 3) est généralement recommandée pour sa clarté et sa maintenabilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!