Dropdown list with MVC5.1 – now out of the box!

Last year I made this post showing a clean way to render a dropdown list in MVC.

Recently MS released MVC5.1 (prerelase) and excitingly it now has Enum support.

Jon Galloway has written an excellent post outlining this change. The .Net team have added a new HTMLHelper extension called EnumDropDownListFor that will render an Enum as a dropdown box (or radio button list).

How does this compare to the long winded solution I outlined last year, I hear no one asking?

To recap, we want to render a dropdown list that looks like:

EditPageFinal

with our view rendering our model with one line.

@Html.EditorForModel()      

We no longer need the custom Htmlhelper Extension EnumDropDownListFor used in the previous solution, as that now ships with MVC5.1 (well, not the same implementation!). We do, however, still want to be culture aware and use a Resx file to contain the resources of the actual names to display on screen. I’d now recommend using display attributes in the Enum to identify the resource. This will leave our Enum and model looking like:

public enum AirlinePreference
{
    [Display(Name = "AirlinePreference_BritishAirways",
                ResourceType = typeof(Resources.Enums))]
    BritishAirways,
    [Display(Name = "AirlinePreference_EasyJet", 
                ResourceType = typeof(Resources.Enums))]
    EasyJet,
    [Display(Name = "AirlinePreference_RyanAir",
                ResourceType = typeof(Resources.Enums))]
    RyanAir,
    [Display(Name = "AirlinePreference_Virgin",
                ResourceType = typeof(Resources.Enums))]
    Virgin
}

public class PersonViewModel 
{
    [Display(Name="First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Airline Preference")]
    public AirlinePreference? AirlinePreference { get; set; }
}    

For reference our resx file looks like this

Enums

Compile it, run it, go to the Add Person page and you’ll see the dropdown list as before…

5.1 is still prerelease and at the time of writing @Html.EditorForModel will not render an Enum dropdown list. It currently needs a push in the form of an Enum template (as described in Jon’s blog) to know how to display an Enum.
With my lean hat on, for the purpose of this blog the following will suffice.

Create a view called Enum.cshtml and put it in the EditorTemplate folder

enumtemplate

Add this one line

@Html.EnumDropDownListFor(x => x)

Now go the Add Person page and voila, a DropDownList is present.

Advertisements

5 comments

  1. Ha! that worked! hahahah! I’m just learning and when I repeated your magic words .Net was totally fooled into thinking I am magical. Giddy Thanks to you Paul and hearty affection for your cycle.

    Like

  2. Amazing tutorial. However, I would like to mention some things that made me spend days of research.

    When you try to scaffold a ViewModel (considering what MVC theory says, ViewModels are just for the presentation) you need to use a DBContext and at least define the Key Data Annotation in the ViewModel. Otherwise VS will throw an error.

    So do not use the real DbContext or you’ll create a representation of that VM in the database. This is totally unnecesary, just create a “fake” DbContext that is empty with no string connection and done.

    Besides of this little tip, all the tutorial works like a charm. Thanks for the amazing work Paul, keep doing good stuff.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s