A RichDropDownList for MVC, with Custom Objects and HTML Options

• Download VS 2015 demo RichDropDownList.zip - 6.5 MB

Introduction

Recently, during the development of on an MVC project, I was in need of a dropdown component showing HTML contents inside the options. I searched on the Internet, but then decided to build one.

Background

The objective was the creation of an extended dropdownlist located at server-side, to take advantage of the power of MVC views and model. The idea was to compose the options with partial views, each one with its model. A bit of JavaScript was also needed for listening click events, opening/closing/positioning containers, go back and forth to a support hidden field. 

Using the Code

This is the example in the demo:

Let's compare the call to this helper (all is referred to the example in the demo):

@Html.RichDropdownListFor(x =>  x.SelectedFruit,  Model.fruits,  f => f.Name,   f => f.Id)

with a generic call to the well known DropDownListFor:

@Html.DropdownListFor(x => x.SelectedFruit, Model.ItemList)

SelectedFruit: The first parameter is of course the Model property to which the component is bound.

Model.fruits: The second parameter is the List of custom objects we want to pass to the helper (where Model.ItemList in a standard dropdown is a List of SelectListItem).

Each item in fruits will represent the model of a partial view that will appear as an option for the component.

By convention, the name of this partial view should be the type name of the object used. In this case, Model.fruits is a List<fruit>, so partial view in shared folder should be named fruit.cshtml and should expect a fruit model (this is just to reduce parameters, another option was to include the name in the argument list).

Name and Id expressions: indicate the properties in the fruit class, acting as Text and Value respectively. As in a standard dropdown, we need a Value to be bound to the model property and a Text to be showed when the dropdown is closed. In this case, Name will behave as the Text of the dropdown, and Id will behave as the Value.

'ShowSelectedOptionAs' parameter

The parameter, set to Text by default, defines how the selected item will be showed. Setting it to Text (or omitting it) , the RichDropDownList will show the text of the option selected when in close state, like a standard combo:

@Html.RichDropdownListFor(x => x.SelectedFruit, Model.fruits, f => f.Name, f => f.Id,
 ShowSelectedOptionAs.Text)

If the parameter is set to Html, all the html of the selected option will be showed in close state:

@Html.RichDropdownListFor(x => x.SelectedFruit, Model.fruits, f => f.Name, f => f.Id,
ShowSelectedOptionAs.Html)

Points of Interest

About the CSS of the RichDropDownList, look at the main.css file. A class is assigned to every element in the component, so it's externally customizable by css. On the other hand, the structure is fixed and created by the helper, as I don't think we need to change it so often. It's based on Bootstrap (for the icon and the grid system) in this release, nowadays present by default in a MVC solution. FInally, partial views design is left to the need of the developer.

The necessary JavaScript is native, since is very basic. I preferred to include it in the helper to have the least amount of parts as possible and to simplify usage. It was tested on the last versions of Edge, Internet Explorer, Chrome, Firefox. Should you need it externally, feel free to move it.

I added a submit button in the demo form, just to verify that model binding works in both ways. Indeed the binding point is a hidden field, created and maintained by the helper, and present in a form as a standard element.

The demo solution requires VS2015 and .Net Framework 4.6.

For any suggestions/improvements, don't hesitate to comment.

Author

Max Aronica is a senior .NET full-stack developer working as external consultant for enterprise customers in Rome, Italy.

History

• 24/09/2017: First release
• 30/09/2017 : Added 'ShowSelectedOptionAs' parameter