How to use DropDownListFor

Question

I want to add Drop Down List html control to the web page fill it with products list. My Action controller looks like

public ActionResult Index()
{
    return View(_repository.GetProducts(true));
}

Product model (Linq to SQL, below is partial class where SelectedId is for drop down selection id)

public partial class Product
{

    public int SelectedId { get; set; }
}

The view is

@model IQueryable<Entity.Product>


@Html.DropDownListFor(.....)

What I do not understand how to fill up DropDownList with Products and if product selected bind Id to SelectedId property.

krystan honour · Accepted Answer · 2012-04-02T09:04:56.417

You can implement this like so

In your model you need something like this

public class TestViewModel
{
    public int IdSelected { get; set; }
    public IEnumerable<Person> People { get; set; }
}

In your Controller you need something like this

public ActionResult Index()
{
    var people = new List<Person>
    {
        new Person {Id = 1, Name = "krystan"},
        new Person {Id = 2, Name = "Bobby"}
    };

    var theModel = new TestViewModel
    {
        People = people.Select(x => new Person
        {
            Id = x.Id,
            Name = x.Name
        })
    };

    return View(theModel);
}

Then in your html (and this varies a bit depending on the view engine being used but lets assume razor) you need something like this

@model MvcApplication3.Models.TestViewModel
@Html.DropDownListFor(x=>x.IdSelected, new SelectList(Model.People, "Id", "Name"))

More information can be found on this site here

score 0 · Answer 2 · answered Apr 02 '12 at 07:29

Define a view model:

public class MyViewModel
{
    public int SelectedId { get; set; }
    public IEnumerable<Product> Products { get; set; }
}

Have your controller action populate this view model:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        Products = _repository.GetProducts(true)
    }
    return View(model);
}

and in your view use the view model to generate the dropdown:

@model MyViewModel

@Html.DropDownListFor(
    x => x.SelectedId, 
    new SelectList(Model.Products, "ProductId", "ProductName")
)

where ProductId and ProductName are obviously 2 properties of your Product domain model which will be used to respectively bind the value and the text of each <option> in the dropdown.

Should I create new Model for DropDownList or can I add 'public IEnumerable Products { get; set; }' to Partial product class and use Product class instead? Both will work but I don't know which is better by design. — Tomas, Apr 02 '12 at 07:34

score 0 · Answer 3 · answered Apr 02 '12 at 07:30

below is the syntax for using HTML Drop down list

@Html.DropDownList(
string name,
IEnumerable<SelectListItem> selectList,
string optionLabel,
object htmlAttributes)

Use this to fill your DropDownList with Products.

Also for all other doubt, refer this link

score 0 · Answer 4 · answered Apr 02 '12 at 08:11

1) Create Function which will return IEnumerbale List of SelecteListItem as per below

public IEnumerable<SelectListItem> GetProducts()
{
List<Product> ProductList = new List<Product>();

//Here linq query to fetch products

    return ProductList.Select(c => new SelectListItem
              {
                  Value = c.Id,
                  Text = c.ProductName //Or whatever you want to display
              });
}

2) Store in to Viewbag in controller methods

public ActionResult Index()
{
    ViewBag.ProductList = GetProducts()
    return View();
}

3) Bind it in target view as per below

@Html.DropDownList("Id", (IEnumerable<SelectListItem>)ViewBag.ProductList, "--Select--")

In above Id is Model's item which you will use to bind this view and it consider value item to store data and "--Select-- is use for default value.

How to use DropDownListFor

4 Answers4

Linked