Adding a css class to select using @Html.DropDownList()

Question

I'm building my first MVC application after years of doing webforms, and for some reason I am not able to make this work:

@Html.DropDownList("PriorityID", String.Empty, new {@class="textbox"} )

Error message:

System.Web.Mvc.HtmlHelper<SPDR.Models.Bug>' does not contain a definition for DropDownList and the best extension method overload System.Web.Mvc.Html.SelectExtensions.DropDownList(System.Web.Mvc.HtmlHelper, string, System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>, object) has some invalid arguments

Any help greatly appreciated!

You aren't using an overload that takes those parameters. See the documentation. — vcsjones
– vcsjones, Commented Sep 9, 2011 at 21:02

Lee Bailey · Accepted Answer · 2014-04-11 08:20:06Z

111

Looking at the controller, and learing a bit more about how MVC actually works, I was able to make sense of this.

My view was one of the auto-generated ones, and contained this line of code:

@Html.DropDownList("PriorityID", string.Empty)

To add html attributes, I needed to do something like this:

@Html.DropDownList("PriorityID", (IEnumerable<SelectListItem>)ViewBag.PriorityID, new { @class="dropdown" })

Thanks again to @Laurent for your help, I realise the question wasn't as clear as it could have been...

UPDATE:

A better way of doing this would be to use DropDownListFor where possible, that way you don't rely on a magic string for the name attribute

@Html.DropDownListFor(x => x.PriorityID, (IEnumerable<SelectListItem>)ViewBag.PriorityID, new { @class = "dropdown" })

edited Apr 11, 2014 at 8:20

answered Sep 11, 2011 at 14:08

Lee Bailey

3,6142 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Willy Over a year ago

I'm using your solution (my view is auto-generated too), but when in edit view, I've lost my selected value, could you help me? @Html.DropDownList("StateGroupID", (IEnumerable<SelectListItem>)ViewBag.StateGroupID, String.Empty, new { @class = "form-control" })

Lee Bailey Over a year ago

@Willy, I'm not 100% sure what you mean by "lost my selected value" - do you mean the selected value is not being posted to the server correctly? Please see my edit for a possible solution...

Willy Over a year ago

when i edited the record, dropdownlist is empty, it should be bind to a value. I've found the solution by passing null value at 2nd parameter @Html.DropDownList("StateGroupID", null, String.Empty, new { @class = "form-control" })

Dylan Czenski Over a year ago

how about multiple classes?

Ananda G Over a year ago

It's ok. But if you want a default value like -select- with you list then you need to modify it must like

@Html.DropDownList("PriorityID", (IEnumerable<SelectListItem>)ViewBag.PriorityID, String.Empty,  new { @class="dropdown" })

Laurent · Accepted Answer · 2011-09-09 21:11:25Z

40

As the signature from the error message implies, the second argument must be an IEnumerable, more specifically, an IEnumerable of SelectListItem. It is the list of choices. You can use the SelectList type, which is a IEnumerable of SelectListItem. For a list with no choices:

@Html.DropDownList("PriorityID", new List<SelectListItem>(), new {@class="textbox"} )

For a list with a few choices:

@Html.DropDownList(
    "PriorityID", 
    new List<SelectListItem> 
    { 
        new SelectListItem { Text = "High", Value = 1 }, 
        new SelectListItem { Text = "Low",  Value = 0 },
    }, 
    new {@class="textbox"})

Maybe this tutorial can be of help: How to create a DropDownList with ASP.NET MVC

edited Sep 9, 2011 at 21:11

answered Sep 9, 2011 at 20:59

Laurent

3,82729 silver badges22 bronze badges

3 Comments

Lee Bailey Over a year ago

Thanks for the reply Laurent, unfortunately I'm still having problems. Using your line of code I get the following error: System.Web.Mvc.SelectList' does not contain a constructor that takes 0 arguments This line works, I get the select tag, but I just want to add a css class: @Html.DropDownList("PriorityID", String.Empty)

Laurent Over a year ago

You're right, I've changed to new List<SelectListItem>(). SelectList is actually a helper class to help you create a list of choices from a different list of objects. See the tutorial I added to my post.

Lee Bailey Over a year ago

Thanks, that does work however using overload #2 (string name, string optionLabel) my dropdown is populated automatically with the records from my Priority table. That is exactly what I want, I just need to add the css class - but it seems there is no overload that allows that?!

Shankar BS · Accepted Answer · 2014-07-16 13:00:17Z

19

If you are add more than argument ya dropdownlist in Asp.Net MVC. When you Edit record or pass value in view bag.

Use this it will be work:-

@Html.DropDownList("CurrencyID",null,String.Empty, new { @class = "form-control-mandatory" })

edited Jul 16, 2014 at 13:00

Shankar BS

8,4126 gold badges43 silver badges53 bronze badges

answered Jul 16, 2014 at 12:29

mohita

2012 silver badges3 bronze badges

1 Comment

Muhammad Ashikuzzaman Over a year ago

You made my day @mohita

mk Mughal · Accepted Answer · 2018-01-12 13:24:55Z

9

There are some options in constructors look, if you don't have dropdownList and you wanna insert CSS class you can use like

@Html.DropDownList("Country", null, "Choose-Category", new {@class="form-control"})

in this case Country is the name of your dropdown, null is for you aren't passing any generic list from your controller "Choose-Category" is selected item and last one in CSS class if you don't wanna select any default option so simple replace "Choose-Category" with ""

edited Jan 12, 2018 at 13:24

answered Jul 29, 2017 at 8:55

mk Mughal

2981 gold badge5 silver badges17 bronze badges

Comments

Praveen M P · Accepted Answer · 2014-09-09 09:09:23Z

6

You Can do it using jQuery

  $("select").addClass("form-control")

here, Select is- html tag, Form-control is- class name

 @Html.DropDownList("SupplierId", "Select Supplier")

and here, SupplierId is ViewBagList, Select Supplier is - Display Name

edited Sep 9, 2014 at 9:09

answered Nov 20, 2013 at 14:56

Praveen M P

11.7k7 gold badges37 silver badges41 bronze badges

Comments

Ananda G · Accepted Answer · 2016-08-01 10:40:25Z

4

Simply Try this

@Html.DropDownList("PriorityID", (IEnumerable<SelectListItem>)ViewBag.PriorityID,  new { @class="dropdown" })

But if you want a default value or no option value then you must have to try this one, because String.Empty will select that no value for you which will work as a -select- as default option

@Html.DropDownList("PriorityID", (IEnumerable<SelectListItem>)ViewBag.PriorityID, String.Empty, new { @class="dropdown" })

answered Aug 1, 2016 at 10:40

Ananda G

2,55927 silver badges40 bronze badges

Comments

Dr.jacky · Accepted Answer · 2016-04-06 04:54:35Z

1

Try below code:

@Html.DropDownList("ProductTypeID",null,"",new { @class = "form-control"})

edited Apr 6, 2016 at 4:54

Dr.jacky

3,6036 gold badges58 silver badges98 bronze badges

answered Apr 6, 2016 at 4:21

Alfred Jose

918 bronze badges

Comments

Eldelshell · Accepted Answer · 2016-05-29 18:59:35Z

1

Try this:

@Html.DropDownList(
    "country", 
    new[] {
        new SelectListItem() { Value = "IN", Text = "India" },
        new SelectListItem() { Value = "US", Text = "United States" }
    }, 
    "Country",
    new { @class = "form-control",@selected = Model.Country}
)

edited May 29, 2016 at 18:59

Eldelshell

6,9908 gold badges47 silver badges64 bronze badges

answered May 29, 2016 at 18:40

Abhishek Maurya

111 bronze badge

2 Comments

Rizier123 Over a year ago

Welcome to Stack Overflow! While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

Rizier123 Over a year ago

Take a moment to read through the editing help in the help center. Formatting on Stack Overflow is different than other sites.

Undo · Accepted Answer · 2016-02-02 17:15:04Z

0

You can simply do this:

@Html.DropDownList("PriorityID", null, new { @class="form-control"})

edited Feb 2, 2016 at 17:15

Undo♦

25.7k38 gold badges114 silver badges132 bronze badges

answered Feb 2, 2016 at 17:11

ladymbm

21

Comments

Arnab Nandy · Accepted Answer · 2015-06-09 05:18:20Z

-1

Try This

 @Html.DropDownList("Id", null, new { @class = "ct-js-select ct-select-lg" })

edited Jun 9, 2015 at 5:18

Arnab Nandy

6,8025 gold badges50 silver badges52 bronze badges

answered Jun 9, 2015 at 5:05

Krishna Prajapati

112 bronze badges

Collectives™ on Stack Overflow

Adding a css class to select using @Html.DropDownList()

10 Answers 10

5 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related