如何创建一个人口稠密的下拉列表中的ASP.NET MVC 3视图模型 [英] How do I create a view model for a populated drop down list in ASP.NET MVC 3

问题描述

我试图教我MVC3。我可是从web表单转换。

I'm trying to teach myself MVC3. Im converting from webforms.

我需要创建一个包含我能传递给控制器​​，最终呈现在View下拉列表视图模型。

I need to create a view model that includes a dropdown list that I can pass to the controller and eventually render in the View.

我怎样才能做到这一点？我有骨架，但我不知道code是实际创建的视图名称值对的东西。

How can I accomplish this? I have the skeleton but I dont know what the code is to actually create the name value pairs for the view.

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

感谢

推荐答案

我将创建一个类的产品，并在我的主视图模型是类型列表中创造产品属性。<​​/ P>

I would create a class for Product and the create Products Property in my main viewmodel which is of type List

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

和在你的控制器的操作方法

and in your Controller Action method

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

和在你看来这是强类型为OrderViewModel。

and in your view which is strongly typed to OrderViewModel.

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

我添加了一个 SelectedProductId 属性还，所以你会得到用户从该属性的下拉列表中选择的值，当用户发布的形式反馈给控制器。

I have added a SelectedProductId property also, so you will get the user selected value from the dropdown in that Property when user post the form back to the controller.

您也可以使用普通的 SelectListItem 类型的集合为您的视图模型属性转移下拉数据，而不是您的自定义的 ProductViewModel 集合。

You can also use the generic SelectListItem type collection as your view model property to transfer the dropdown data instead of your custom ProductViewModel collection.

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

和在GET动作，

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

而在你看来，

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

编辑：按从OP的要求，编辑的答案有物业返回静态项目，如产品

EDIT : As per the request from OP, edited the answer to have the Property returning static items as products

我添加了一个GET实施产品属性返回静态的产品清单。

I added a get implementation to Products property to return a list of static products.

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

现在在你的控制器，你并不需要调用GetAvailableProductsmethod，因为它已经存在。因此，控制器将看起来是这样的。

Now in your controller, you don't need to call the GetAvailableProductsmethod as it is already there. So the controller will looks like this.

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

下面是输出。

Here is the output.

如果您在产品的许多项目，将其移动到一个方法，并调用该方法诠释他得到实现，而不是写有。这是更清洁的方式。

If you have many items in the products, move it to a method and call that method int he get implementation instead of writing that there. That is much cleaner approach.

这篇关于如何创建一个人口稠密的下拉列表中的ASP.NET MVC 3视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！