DropdownListFor default value

Question

Is there a simple way to add a "--Please select--" default option to a DropDownListFor in MVC 3?

score 78 · Answer 1 · edited Dec 25 '22 at 00:11

78

So, I did something like this:

@Html.DropDownListFor(model => model.Dessert, 
                      new SelectList(Model.AvailableDesserts, "DessertID", "DessertName"),
                      "---Select A Dessert ---")

Seems to work pretty well. Dessert in my viewmodel is the one selected by the user. AvailableDesserts is a collection of ones to pick from.

edited Dec 25 '22 at 00:11

starball

20,030
7
43
238

answered Aug 29 '11 at 11:53

itsmatt

31,265
10
100
164

2

This adds a "--Please select--" at the top of the dropdown, but defaults to the next item in the dropdown, at least in my example : @Html.DropDownListFor( x => x.SelectedTeamID, new SelectList(Model.Teams, "TeamID", "TeamName"), "--Please select--") – user517406 Aug 29 '11 at 12:19
4

What's the default value of the SelectedTeamID you are sending in to the View? In my `Create.cshtml` it will default to the "--- Select A Dessert ---" option (the ID is an integer and it defaults to 0) while in my `Edit.cshtml` it will default to whatever the current value is for `model.Dessert` in my viewmodel. This may be a result of my DessertIds starting at 1 (the primary key in my Desserts table starts at 1). Just a guess, really. I think that's why that's happening. – itsmatt Aug 29 '11 at 13:06
I believe what it does is look at the model field's current value and then try select that by default. For instance, if when you constructed your viewmodel (say, for a Create call) and explicitly set the SelectedTeamID to 6 and passed that into the View, it would display the TeamName that was associated with TeamID 6, assuming one existed. – itsmatt Aug 29 '11 at 13:19
I think this answer is incorrect. According to my IntelliSense, the third argument to `DropDownListFor` that you passed as a string is supposed to be an `object` specifying HTML attributes, not a default. If yours defaulted to `---Select A Dessert ---`, it was probably just luck. – Jez Dec 19 '12 at 09:08
2

@Jez - There is another overload that allows for a string to be the third argument. It adds a null option with the string as the display text, but it doesn't make it the default value. The default value will be whatever the model is constructed with. This answer will work as long as the 'model.Dessert' property is nullable, since the option label will be the null value in the dropdown. – Manuel Feb 15 '13 at 18:36
Perhaps, you would like to set `optionLabel: "Select a desert"` (if you already have named-parameter in argument list: `htmlAttributes: new { .. }`) – vulcan raven Nov 28 '14 at 13:36

score 14 · Answer 2 · answered Aug 29 '11 at 11:53

14

I have a couple extension methods on SelectList

    public static SelectList PreAppend(this SelectList list, string dataTextField, string selectedValue, bool selected=false)
    {
        var items = new List<SelectListItem>();
        items.Add(new SelectListItem() { Selected = selected, Text = dataTextField, Value = selectedValue });
        items.AddRange(list.Items.Cast<SelectListItem>().ToList());
        return new SelectList(items, "Value", "Text");
    }
    public static SelectList Append(this SelectList list, string dataTextField, string selectedValue, bool selected=false)
    {
        var items = list.Items.Cast<SelectListItem>().ToList();
        items.Add(new SelectListItem() { Selected = selected, Text = dataTextField, Value = selectedValue });
        return new SelectList(items, "Value", "Text");
    }
    public static SelectList Default(this SelectList list,string DataTextField,string SelectedValue)
    {
        return list.PreAppend(DataTextField, SelectedValue, true);
    }

Then my razor looks like:

@Html.DropDownListFor(m=>m.SelectedState, 
    Model.StateList().Default("Select One",""))

answered Aug 29 '11 at 11:53

asawyer

17,642
8
59
87

I'm new to MVC, can you please tell me how I would add extension methods to my SelectList? – user517406 Aug 29 '11 at 12:30
3

Add a static class to your project, and add these methods to it. Make sure the page your trying to call them from imports the namespace if its not the global project namespace. The syntax in razor is `@using Myproject.Extensions` or whatever you name your class. For more reference please read: http://msdn.microsoft.com/en-us/library/bb383977.aspx – asawyer Aug 29 '11 at 12:46
I would prefer the Helper/Extension route as you propose but am having some issue implementing. I get the following error: `Unable to cast object of type 'MyApp.UI.Models.Address' to type 'System.Web.Mvc.SelectListItem'.` The code I use is: `@Html.DropDownListFor(m => m.EmailAddressID, new SelectList(Model.Addresses, "AddressID", "EmailAddress").PreAppend("---Select an Address---", ""))` It compiles fine and is recognized in the View, but presents the above error at runtime. The hardcoded method presented by @itsmatt does work. Any ideas on modification I might need to the extension methods? – atconway Jan 30 '14 at 16:35
Solid! Works well where the select list options aren't hard coded. I my case I use a "IEnumerable" to hold the options and I modified your code to suit this – dunwan Jan 29 '16 at 11:02

jonbarlo · Answer 3 · 2012-11-12T04:30:01.617

Hi what about trying this (in case you use DisplayFor method)

private IEnumerable<SelectListItem> AddDefaultOption(IEnumerable<SelectListItem> list, string dataTextField, string selectedValue)
    {
        var items = new List<SelectListItem>();
        items.Add(new SelectListItem() { Text = dataTextField, Value = selectedValue});
        items.AddRange(list);
        return items;
    }

Then just add this code to your Controller

//lambda expression binding
ViewBag.YourList = db.YourTable.Select(x => x).ToList().Select(x => new SelectListItem
        {
            Value = x.Id.ToString(),
            Text = x.DisplayName.ToString()
        });

        ViewBag.YourList = AddDefaultOption(ViewBag.YourList, "Select One...", "null", true);

And finally at the View you could display a dropdown, combobox just like this

    <div class="editor-label">
        Your Label
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.ForeignKey, (IEnumerable<SelectListItem>)ViewBag.YourList)
    </div>

That's weird that you're doing the `.Select(x => x).ToList()` before the `.Select(x => new SelectListItem` That is not needed. — Serj Sagan, Nov 29 '14 at 00:42

score 0 · Answer 4 · answered Apr 15 '15 at 21:24

I wanted to set the default value to whatever was passed in as a Url Parameter called SiteType:

    <div class="form-group">
        @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Type, ChangeOrderSite.SiteTypeNames.Select(s => new SelectListItem { Text = s.Value, Value = s.Key.ToString(), Selected = s.Key.ToString() == Request["SiteType"] }), new { @class = "control-label col-md-2" })
            @Html.ValidationMessageFor(model => model.Type)
        </div>
    </div>

My drop down is a list of Site Types.

score 0 · Answer 5 · answered Apr 06 '20 at 13:39

I like the following method:

@Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.Items, "Id", "Name"), new SelectListItem() { Text = "None", Value = "", Selected = true }.Text, new { @class = "form-control search-select-input btn btn-block btn-outline-secondary dropdown-toggle p-1" })

Where Items is an IEnumerable of type you want to display in the dropdown. And you can change out whatever bootstrap classes you want in the last parameter.

This way allows you to set a default label and specify the value of the label if needed.

DropdownListFor default value

5 Answers5

Linked