DropDownList helper in MVC3 Razor

  • Html.DropDownList renders a dropdown list.
  • Helpers are not controls by itself, they simply generate html markup.
  • It basically generates select element with options.

It has following overloads :


Overload 1 :


This overload accepts name, which is set as id and name attribute.

Syntax :

<p>
     @Html.DropDownList("DropdownList")
</p>

The above syntax shows, the overload accepting only name. This is not enough. In MVC3, this overload would accept ViewData of type list passed from the controller. In case of o ViewData, the page will crash while rendering this control. 

ViewData :




The ViewData with same key which is specified as name parameter is declared in the controller. This ViewData is then use to populate the DropDownlist.

UI :


Rendered HTML :

   <select id="DropdownList" name="DropdownList"><option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 2 :



This overload accepts one parameter more than previous one. It accepts optionLabel, which is set as selected option of the list. We need to pass ViewData with the key same as name parameter.

Syntax :

<p>
     @Html.DropDownList("DropdownList","Hello World")
</p>

ViewData :


UI :


The optionLabel parameter is set as first option of Dropdown.


Rendered HTML :

<select id="DropdownList" name="DropdownList"><option value="">Hello World</option>
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 3 :



This overload accepts name and IEnumerable list of SelectListItem.


Syntax :



<p>
     @Html.DropDownList("DropdownList", list)
</p>


We have created a List of SelectedListItem and assigned to the above overload.


UI :



Rendered HTML :

<select id="DropdownList" name="DropdownList"><option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 4 :



This overload also accepts htmlAttributes object.



Syntax :



<p>
     @Html.DropDownList("DropdownList", list, new { style="width:200px;color:Red;"})
</p>

UI :



Rendered HTML :

<select id="DropdownList" name="DropdownList" style="width:200px;color:Red;">
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 5 :



Syntax :

<p>
     @Html.DropDownList("DropdownList", list, "Hello World")
</p>

UI :



Rendered HTML :

<select id="DropdownList" name="DropdownList">
<option value="">Hello World</option>
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 6:



This overload accepts IDictionary object of htmlAttributes.


Syntax :

<p>
     @Html.DropDownList("DropdownList",list,DropdownList)
</p>

List :



Dictionary :


UI :


Rendered HTML :


<select id="DropdownList" name="DropdownList" style="color:Red;width:200px;">
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 7 :




Syntax :

<p>
     @Html.DropDownList("DropdownList", list, "Hello World", new { style="width:200px;"})
</p>

UI :



Rendered HTML :


<select id="DropdownList" name="DropdownList" style="width:200px;">
<option value="">Hello World</option>
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>


Overload 8 :




Syntax :



<p>
     @Html.DropDownList("DropdownList", list, "Hello World", DropdownList)
</p>

UI :



Rendered HTML :

<select id="DropdownList" name="DropdownList" style="color:Red;width:200px;">
<option value="">Hello World</option>
<option value="lamb">Lamborgini</option>
<option value="merc">Mercedes</option>
<option value="ferr">Ferrari</option>
<option value="bm">BMW</option>
</select>




2 comments:

  1. ok - you have this: @Html.DropDownList("DropdownList", list)
    I see HOW you populate the list - but where does it reside (in controller)?

    ReplyDelete
  2. The list creation code resides inside Action method which renders the view. Then you can pass this list to View using ViewModel or using ViewData.

    ReplyDelete