CODEWITHSUNDEEP
asp.netasp.net-mvc
den
den

Reputation: 709

HTML helper DropDownList explained

Can someone please explain how this works? (which overload is being used)

@Html.DropDownList("FinancialYearID", "Select FY")

FinancialYearID is a SelectList in view bag. Why is it passed as a string?

Also how can I add custom attributes on the input element? Adding a 3rd parameter 

new { @class = "foo" }

doesn't work?

Is it possible to add data- attributes using the default helpers?

Thanks

Upvotes: 17

Views: 58269

Answers (3)

Murali Murugesan
Murali Murugesan

Reputation: 22619

Probably you could have use the below one. For passing data attributes use underscore_ like new {@data_myname=value}

MSDN

 public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    Object htmlAttributes
)

Parameters

htmlHelper

Type: System.Web.Mvc.HtmlHelper The HTML helper instance that this method extends.

name

Type: System.String The name of the form field to return.

selectList

Type: System.Collections.Generic.IEnumerable<SelectListItem> A collection of SelectListItem objects that are used to populate the drop-down list.

htmlAttributes

Type: System.Object An object that contains the HTML attributes to set for the element.

Return Value

Type: System.Web.Mvc.MvcHtmlString An HTML select element with an option subelement for each item in the list.

Upvotes: 1

Ant P
Ant P

Reputation: 25221

You're calling this overload. This creates a dropdown list with the name "FinancialYearID" (which means that the selected value will bind to a model or ViewBag property called "FinancialYearID") and "Select FY" as the placeholder (empty) selection text.

If you want to add a class, you need the DropDown(string, IEnumerable, string, object) helper:

@Html.DropDownList("FinancialYearID", null, "Select FY", new { @class = "foo" })

Here, you can also populate the DropDownList by passing in an IEnumerable (such as a SelectList) where I have passed null.

Yes, it is entirely possible to pass a data attribute. just replace the hyphen with an underscore:

@Html.DropDownListFor("FinancialYearID", null,
                   "Select FY", new { @data_something = "foo" })

If you have a model property to which you're trying to bind the selected value, you can pass a lamba expression to indicate the property that you want to bind and the framework will generate the appropriate name:

@Html.DropDownList(m => m.FinancialYearID, MySelectList,
                   "Select FY", new { @data_something = "foo" })

I'd also generally advise putting the SelectList in the model on the initial GET request rather than using ViewBag.

Upvotes: 33

Electrionics
Electrionics

Reputation: 6772

In your example you use DropDownList(this HtmlHelper htmlHelper, string name, string optionLabel)

To acquire effect you want, you should use next code:

@Html.DropDownListFor(model => model.FinancialYearID, (SelectList)ViewBag.FinancialYearID, "Select FY", new { @class = "foo" })

(overload is DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel>, Expression<Func<TModel,TProperty>>, IEnumerable<SelectListItem>, string, object))

or, if one of your SelectList marked as selected, use next code:

@Html.DropDownListFor(model => model.FinancialYearID, (SelectList)ViewBag.FinancialYearID, new { @class = "foo" })

(overload is DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel>, Expression<Func<TModel,TProperty>>, IEnumerable<SelectListItem>, object))

P.S. Don't forget to cast your ViewBag item to SelectList, because compiler would think that second parameter is object.

Upvotes: 2

Related Questions