MVC DropDownListfor() Basics

Question

I have a Model which consist of Employees information. In my model there is a property called City which define the city of Employee in which he lives. The propery is shown below

    public string City{get;set;}

Now I have a view which contains a form which will be filled by a employee to register. I want to use a dropdownlist for selecting cities. I think the below code will be used for dropdown as i discovered. My model name is Employee.

    @Html.DropDownListFor(m=>m.City,new SelectList())

Please tell me that "is there any way to define the options for dropdownlist in SelectList() method directly Like ... in html?"

If not, where should i define the class for this drop down, where to call and where to render.I don't know where to define values? I am very confused because this is mvc and we have to seperate concern and i think we cannot define anything at anywhere?

Thanks in advance..

Answer 1

You have at least two options:

1.) Add a list, array, or any other collection type of cities to your model

2.) Add a SelectList property to your model

Option 1 can be something as simple as an array of strings, or can be, say, an IEnumerable of City objects. You would then need to transform this property to a collection of SelectListItem objects in the view as part of the DropDownList binding.

Option 2 has the advantage of being capable of direct binding to the DropDownList, but requires that you construct the list within the action method.

Then end result is the same, it's just a matter of how pedantic you want to be about SoC.

For example (assuming you add a property called Cities):

@Html.DropDownListFor(m=>m.City, Model.Cities.Select(city => new SelectListItem()
{
    Text = city,
    Value = city,
    Selected = city == Model.City
})

EDIT:

To answer your comment, I have to make some assumptions. I will assume you have a model called EmployeeModel. This model has a property, City, that is a plain string. So, this is a partial of your model, as I assume it to be:

public class EmployeeModel
{
    public string City { get; set; }

    // ... other properties ...
}

So, if you need to add a property for binding to your dropdown, you would do one of the following:

public class EmployeeModel
{
    public string City { get; set; }

    public IEnumerable<string> Cities { get; set; }

    // ... other properties ...
}

or

public class EmployeeModel
{
    public string City { get; set; }

    public SelectList Cities { get; set; }

    // ... other properties ...
}

This new property will contain the list of cities that you allow your user(s) to pick from.

If you choose the first option, you load the IEnumerable from your datastore, and then use the first example above in your view, which uses LINQ to project each string in the Cities property into a new SelectListItem object.

If you go with the second option, you build a SelectList in the action prior to passing the model to the view. This isn't terribly difficult, as the class provides a constructor that takes an IEnumerable (your list of cities) and the "selected value," which will be the City property (see http://msdn.microsoft.com/en-us/library/dd460123%28v=vs.108%29.aspx). Your code would look something like:

model.Cities = new SelectList(GetCities(), model.City);

This, of course, assumes you have a helper method (GetCities()) to load your cities from wherever they are stored. Your view then would have something like this:

@Html.DropDownListFor(m=>m.City, model.Cities)

The view engine then uses these SelectListItems to build the <select> element and it's <option> elements.

Answer 2

You could have this in your model, it's quickly achieved, although I wouldn't recommend it:

public class Place
{
    public string City{get;set;}
    public SelectListItem[] Cities()
    {
        return new SelectListItem[2] { new SelectListItem() { Text = "London" }, new SelectListItem() { Text = "New York" } };
    }
}

...and your view

@Html.DropDownListFor(m => m.City, Model.Cities())

I think the best place for something like this (but is a little more complicated) is your own htmlhelper and usage could look something like:

@html.CityDropDownFor(m => m.City)

You could cache the cities nicely and it keeps data and UI work out of your models.

If you want to learn more about creating your own helpers, I'd suggest a bit of a [read up].1