c# - 如何在 ASP.NET MVC 3 中为填充的下拉列表创建 View 模型

Question

我正在尝试自学 MVC3。我正在从网络表单转换。

我需要创建一个 View 模型，其中包含一个下拉列表，我可以将其传递给 Controller ​​并最终呈现在 View 中。

我怎样才能做到这一点？我有骨架，但我不知道实际为 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>
         }
     }
  }

谢谢

Answer 1

我会为 Product 创建一个类，并在我的 List 类型的主视图模型中创建 Products 属性

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

并在您的 Controller 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<ProductViewModel>
    {
        new ProductViewModel{ ID=1, Name="IPhone" },
        new ProductViewModel{ ID=2, Name="MacBook Pro" },
        new ProductViewModel{ ID=3, Name="iPod" }           
    };
   return View(orderVM);
}

在您的 View 中，强类型化为 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 属性，因此当用户将表单发回 Controller 时，您将从该属性的下拉列表中获取用户选择的值。

您还可以使用通用 SelectListItem 类型集合作为您的 View 模型属性来传输下拉列表数据，而不是您的自定义 ProductViewModel 集合。

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 的要求，编辑答案以使属性将静态项目作为产品返回

我向 Products 属性添加了一个 get 实现以返回静态产品列表。

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

现在在您的 Controller 中，您无需调用 GetAvailableProductsm 方法，因为它已经存在。所以 Controller 看起来像这样。

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

这是输出。

如果您的产品中有很多项目，请将其移至一个方法并调用该方法以获得实现而不是在那里编写。这是一种更简洁的方法。