Comment créer un modèle de vue pour une liste déroulante remplie dans ASP.NET MVC 3

Je suis en train de m'enseigner MVC3. Im la conversion de formulaires web.

J'ai besoin de créer un modèle d'affichage qui comprend une liste déroulante, je peux passer à la commande et éventuellement rendre dans la Vue.

Comment puis-je accomplir? J'ai le squelette mais je ne sais pas ce que le code est en fait de créer des paires nom /valeur pour la vue.

namespace DH.ViewModels
{
    public class SharedLayoutViewModel
    {
        public IEnumerable<SelectListItem> Products
        {
            //some code to setup the value/name pairs to be rendered in the view.
            //example: 
            //<option value="1">Mustard</option>
            //<option value="2">Ketchup</option>
            //<option value="3">Mayo</option>
            //<option value="4">Relish</option>
            //<option value="5">BBQ</option>
         }
     }
  }

Grâce

source d'informationauteur Maddhacker24

  1. 34

    Je voudrais créer une classe pour le Produit et la création de Produits de la Propriété dans mon viewmodel principal, qui est de type Liste

    public class ProductViewModel
{
  public int ID { set;get;}
  public string Name { set;get;}
}

public class OrderViewModel
{
  public int OrderNumber { set;get;}
  public List<ProductViewModel> Products { set;get;}
  public int SelectedProductId { set;get;}    
}

    et dans votre méthode d'Action du Contrôleur

    public ActionResult Order()
{     
   var orderVM=new OrderViewModel();
   //Items hard coded for demo. You may replace with values from your db
   orderVM.Products= new List<ProductViewModel>
    {
        new ProductViewModel{ ID=1, Name="IPhone" },
        new ProductViewModel{ ID=2, Name="MacBook Pro" },
        new ProductViewModel{ ID=3, Name="iPod" }           
    };
   return View(orderVM);
}

    et à votre avis qui est fortement typé à OrderViewModel.

    @model ORderViewModel
@using (Html.BeginForm())
{
  <p> 
    @Html.DropDownListFor(x => x.SelectedProductId ,
                     new SelectList(Model.Products, "ID", "Name"), "-- Select Product--")
  </p>
  <input type="submit" />
}

    J'ai ajouté un SelectedProductId propriété, de sorte que vous obtiendrez à l'utilisateur la valeur sélectionnée dans la liste déroulante de la Propriété lorsque l'utilisateur de poster le formulaire à la manette.

    Vous pouvez également utiliser le générique SelectListItem type de collection que votre modèle de vue de la propriété de transfert de la liste déroulante de données au lieu de votre personnalisé ProductViewModel collection.

    public class OrderViewModel
{
  public int OrderNumber { set;get;}
  public List<SelectListItem> Products { set;get;}
  public int SelectedProductId { set;get;}    
}

    et dans le action,

    public ActionResult Order()
{     
   var orderVM=new OrderViewModel();
   //Items hard coded for demo. You may replace with values from your db
   orderVM.Products= new List<SelectListItem>
    {
        new SelectListItem {Value = "1", Text = "IPhone"},
        new SelectListItem {Value = "2", Text = "MacBook"},
        new SelectListItem {Value = "3", Text = "Candy"}
    };
   return View(orderVM);
}

    Et à votre avis,

    @Html.DropDownListFor(x => x.SelectedProductId, Model.Products, "-- Select Product--")

    EDIT : conformément à la demande de l'OP, édité la réponse à la Propriété de retour des éléments statiques comme des produits

    J'ai ajouté une mise en œuvre de Produits de la propriété de retourner une liste statique de produits.

    public class OrderViewModel
{
        private List<ProductViewModel> _products;
        public int OrderNumber { set; get; }
        public List<ProductViewModel> Products
        {
            get
            {
                if (_products == null)
                {
                    _products = new List<ProductViewModel>();
                    _products.Add(new ProductViewModel { ID = 1, Name = "Ketchup" });
                    _products.Add(new ProductViewModel { ID = 1, Name = "Mustard" });
                    _products.Add(new ProductViewModel { ID = 1, Name = "Relish" });
                    _products.Add(new ProductViewModel { ID = 1, Name = "Mayo" });
                }
                return _products;
            }
        }
       public int SelectedProductId { set;get;}
}

    Maintenant dans votre contrôleur, vous n'avez pas besoin d'appeler le GetAvailableProductsmethod comme il est déjà là. Si le contrôleur ressemble à ceci.

        public ActionResult Order()
    {
        OrderViewModel orderVM = new OrderViewModel();           
        return View(orderVM);
    }

    Ici à la sortie.
    Comment créer un modèle de vue pour une liste déroulante remplie dans ASP.NET MVC 3

    Si vous avez de nombreux articles dans les produits, d'une méthode et d'appeler cette méthode, il int obtenir la mise en place de l'écrit qu'il. C'est beaucoup plus propre approche.

  2. 6

    Je préfère le faire de cette façon.

    @Html.DropDownListFor(m => m.ProductId, new SelectList(Model.Products, "ID", "Name"))

    Donc mon point de vue, le modèle ne contient qu'une liste de produits et de générer la liste de sélection de la vue.

  3. 1

    Pourquoi ne pouvez-vous pas simplement utiliser SelectList au sein de votre ViewModel?
    C'est une sorte d'abstraction qui contient la valeur sélectionnée et la liste des articles lui-même.
    Vous pouvez mettre en œuvre d'Affichage /de l'Éditeur de modèles et de définir l'attribut DataTypeAttribute/UIHintAttribute associer modèle spécifique avec la Liste de sélection.

    public class ProductViewModel
{
    public int ID { set;get;}
    public string Name { set;get;}
    public SelectList Items {get;set;}
}