ASP.NET MVC view model class with SelectList

Guidance on how to design and code an ASP.NET MVC view model class with SelectList.

.

This document was most recently updated in January 2015.

.

What’s the problem?

Most “add new item” tasks use an HTML Form on a view. Often, the form will include one or more <select> elements, check box groups (<input type=checkbox…), or radio button groups (<input type=radio…).

Sometimes, data for these user interface controls is coded directly in the HTML markup.

At other times, data is generated dynamically.

Data may be programmatically created, or it may be fetched from a data store.

Data can be prepared in the controller, and sent to the view. Alternatively, JavaScript code in the view can use the Ajax technique to fetch data.

If you dynamically generate data in the controller, you should use the SelectList class.

.

The SelectList class

SelectList is designed to deliver data to these user interface controls:

  • drop-down list <select…> element
  • list box <select…> element
  • check box group <input type=checkbox…> element
  • radio button group <input type=radio…> element

Each of these user interface controls, when rendered, has visible text, a programmatic value, and a selection state.

A SelectList object is essentially a collection of SelectListItem objects. A SelectListItem has these properties:

  • Text – intended to hold the visible text for the item (e.g. “Computer Keyboard”)
  • Value – holds the programmatic value for the item (e.g. “123”)
  • Selected – a boolean (true/false), holds the selection state of the item

.

Creating a SelectList object

To create a SelectList object, you need a collection.

SelectList offers two constructors that we will use (and two others that we may not use much).

One constructor accepts only a collection. This constructor is ideal for handling the “simple collection of strings” scenario, described below.

The other accepts a collection, and property names (from the collection) that identify the “Value” and “Text” properties. This constructor is ideal for handling the “data from a persistent store” scenario, described below.

.

Two scenarios for dynamically generated data

As previewed above, we will look at two common scenarios for dynamically generated data:

  1. Simple collection of strings
  2. Data from a persistent store

.

Scenario 1 – simple collection of strings

In this scenario, a simple collection of strings will be used for a radio button group.

You can generate the data in the controller method, or in a ‘manager’ object method. (It’s also possible that the data could be provided by a persistent store or the network. The possibilities are wide-ranging. You can be flexible and adaptable.)

However, for this scenario, we will generate the data in a ‘manager’ object method.

The diagram below shows how this scenario is implemented. It starts with the radio button group that the user sees in their browser, and traces back through the program code.

Notice the SelectList constructor, which accepts only a collection.

When rendered in the view, this will happen:

  • Each string in the collection will be the visible text for each item in the user interface control

In the view code, you must write code to use the string for the visible text, AND for the HTML “value” attribute.

.

view-model-class-selectlist-generate-v1

.

Scenario 2 – data from a persistent store

In this scenario, data from a persistent store will be used for a drop-down list.

The diagram below shows how this scenario is implemented. It starts with the drop-down list that the user sees in their browser, and traces back through the program code.

Notice the SelectList constructor. You must identify and map properties in the data collection to the “dataValueField” and “dataTextField” parameters in the constructor.

When rendered in the view, this will happen:

  • “dataTextField” will be the visible text for each item in the user interface control
  • “dataValueField” will be the programmatic value (i.e. the HTML “value” attribute”) for each item

.

view-model-class-selectlist-generate-v2

.

Summary of the important points

Always send a view model object to a view that has an HTML Form.

When you add a drop-down list, list box, check box group, or radio button group to a view, you will often configure a data source for the user interface control.

The data source is a property of the view model object, and its data type is SelectList.

A SelectList is a collection of SelectListItem objects. A SelectListItem object has all the data needed to render an HTML user interface control (visible text, programmatic value, selection state).

The SelectList object is configured in the controller method, as the view model is being built. Data for the SelectList object is either programmatically generated, or fetched from a persistent store.

.

.

.

.

.

.

.

.

.

.

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: