Как создать модель представления для заполненного выпадающего списка в ASP.NET MVC 3 - PullRequest
19 голосов
/ 27 марта 2012

Я пытаюсь научить себя MVC3. Я конвертирую из веб-форм.

Мне нужно создать модель представления, включающую раскрывающийся список, который я могу передать контроллеру и в конечном итоге отобразить в представлении.

Как мне это сделать? У меня есть скелет, но я не знаю, что код на самом деле для создания пар имя-значение для представления.

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

Спасибо

Ответы [ 3 ]

37 голосов
/ 27 марта 2012

Я бы создал класс для Product и Property Properties в моей основной viewmodel типа 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;}    
}

и в вашем методе действия контроллера

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.

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

Я также добавил свойство SelectedProductId, поэтому вы получите выбранное пользователем значение из раскрывающегося списка в этом свойстве, когда пользователь отправит форму обратно в контроллер.

Вы также можете использовать общую коллекцию типов SelectListItem в качестве свойства модели представления для переноса раскрывающихся данных вместо пользовательской 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 отредактировал ответ, чтобы свойство возвращало статические элементы в качестве продуктов

Я добавил реализацию get в свойство 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;}
}

Теперь в вашем контроллере вам не нужно вызывать метод GetAvailableProducts, поскольку он уже там. Таким образом, контроллер будет выглядеть следующим образом.

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

Вот вывод. enter image description here

Если у вас есть много элементов в продуктах, переместите его в метод и вызовите этот метод, чтобы он получил реализацию вместо того, чтобы записывать это там. Это намного чище.

6 голосов
/ 27 марта 2012

Я предпочитаю делать это таким образом.

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

Таким образом, моя модель представления просто содержит список продуктов и создает список выбора в представлении.

1 голос
/ 27 марта 2012

Почему вы не можете просто использовать SelectList в вашей ViewModel? Это своего рода абстракция, которая содержит выбранное значение и сам список элементов. Вы можете реализовать шаблоны Display / Editor и определить атрибут DataTypeAttribute / UIHintAttribute, связанный с конкретным шаблоном с помощью Select List.

public class ProductViewModel
{
    public int ID { set;get;}
    public string Name { set;get;}
    public SelectList Items {get;set;}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...