Bind Custom Radio Buttons to Integer Data

In the last blog post I showed you how to bind radio buttons to a boolean value. In this blog post we will look at how to bind to integer values. In certain business applications you might have the user select a single value from a list of items coming from a database. You want to display these options as radio buttons and then retrieve the value the user selects.

Create List of Radio Buttons

If you look at Figure 1 you see a row of radio buttons using the custom look I created a few blog posts ago. This set of radio buttons comes from a collection of MusicGenre objects. Each MusicGenre class contains a GenreId and Genre property. GenreId is an integer value that represents the primary key. Genre is the string value such as ‘Jazz’, ‘Rock’, ‘Blues’, etc.

Figure 1: A list of Radio Buttons

The MusicGenre Entity Class

To create the list of radio buttons in Figure 1, you first need a MusicGenre class as shown in the listing below:

Create a Manager Class

Next you create a “Manager” class to create the collection of MusicGenre objects. In this blog post you will use some mock data, but you could replace this with data from a real database table.

Create a View Model

Now that you have these two classes created, create a View Model class that you can use from the Controller in our MVC application. This View Model class simply uses the two previous classes to populate a ‘Genres’ property that is a generic list of MusicGenre objects. We will also create one additional property in the View Model class to which to bind the selected genre id.

Create a View

Create a .cshtml view page that will use the MusicGenreViewModel class that holds the list of MusicGenre objects. At the top of your view add the @model statement to specify you will be using the view model class. I added a little styling to provide some separation between each of the radio buttons.

Next you use the BeginForm statement to wrap all of the radio buttons and a submit button within a <form> tag. Notice that the RadioButtonFor() helper is binding to the SelectedId property in the View Model. If you select a radio button on the form and click the submit button, the GenreId from the 2^nd parameter to the RadioButtonFor() helper is moved into the SelectedId property.

Create the Controller

Let’s now create the controller to instantiate an instance of the MusicGenreViewModel class and pass that instance to the view.

Retrieve the Value Selected

Once you select a radio button and click on the Submit button you post back to another controller action as shown below. The SelectedId property is automatically bound to the view model class. All you have to do to retrieve the appropriate MusicGenre object is loop through the list of MusicGenre objects and find where the selected id matched the GenreId. You can accomplish this with the Find() method on the collection class.

Summary

This blog post showed you how to bind a set of radio buttons to a set of objects with a unique ID. This simulates using data coming from a database table with an integer primary key.