Following on from my little radio button rant, let’s figure out how to implement radio buttons in ASP.Net MVC 3 using Razor views.

For this example, I’m going to set up a simple database with two tables: Person and AgeGroups.

First up, define our AgeGroup model:

public class AgeGroup
{
    public int Id {get; set;}
    public string Description {get; set;}
}

Compile your project (F6) and then right click on the Controllers folder and select Add->Controller. Create a controller, selecting the Template as “Controller with read/write actions and views, using entity Framework”. Your Model class should be “AgeGroup” and your Data context – whatever you’ve set up to be your data context class. Now you have a front end for AgeGroup CRUD. For my purposes, I’m going to populate AgeGroup with four values:

  • 0 to 15
  • 16 to 30
  • 31 to 75
  • 75 and over

Next we need to create a model for our Person table/entity:

public class Person
{
    public int Id {get; set;}
    [Required]
    public string FullName {get; set;}
    
    public int AgeGroup_Id { get; set; }
    [ForeignKey("AgeGroup_Id")]
    public virtual AgeGroup AgeGroups {get; set;}
}

So Person is pretty simple for the sake of the example – just a full name and an age group. Declaring the virtual property of AgeGroup will set up our relationship between Person and AgeGroup in the database.Note that I’ve used a data annotation to make FullName required so you’re going to need to include the data annotations library up top of your model.

using System.ComponentModel.DataAnnotations;

I’ve also taken the decision to explicitly declare my foreign key column :

public int AgeGroup_Id { get; set; }

and then told ASP.NET that it is in fact my foreign key by using the Data Annotation on my virtual property. You don’t need to declare your foreign key column explicitly if you don’t want to, but if you do, when you choose to create your controller and generate your views, it will automatically create a drop down list for you – which is a handy starting point for the sake of our example.

[ForeignKey("AgeGroup_Id")]
public virtual AgeGroup AgeGroups { get; set; }

Again, compile your code and then generate your controller and your views for Person. I’ve chosen to let Entity Framework (EF) generate my views for me as well, just because I wanted something quick.

Now, let’s start with our “create” action. Jump in to your PersonController and note that we are exposing a SelectList of AgeGroups in our ViewBag (the EF framework autogenerates the select list line of code based on our foreign key data annotation we put in our code earlier, so if you didn’t explicitly set your foreign key column, you’ll need to add in a little code here yourself)

public ActionResult Create()
{
    ViewBag.AgeGroup_Id = new SelectList(db.AgeGroups, "Id", "Description");
    return View();
}

Dropping down into your Create.cshtml for Person, you can check the code that actually creates the drop down box for you:

<div class="editor-label">
    @Html.LabelFor(model => model.AgeGroup_Id)
</div>
<div class="editor-field">
    @Html.DropDownList("AgeGroup_Id", String.Empty)
    @Html.ValidationMessageFor(model => model.AgeGroup_Id)
</div>

So far you should have a nice drop down list. Now we want to turn that drop down into radio buttons. To do this, we have to put a little time in and code up a loop, replacing the following code:

    @Html.DropDownList("AgeGroup_Id", String.Empty)
    @Html.ValidationMessageFor(model => model.AgeGroup_Id)

with this:

   @{
     foreach (var ageGroup in ViewBag.AgeGroup_Id)
     {
        string ageGroupId = ageGroup.Value;
        string ageGroupDescription = ageGroup.Text;
        @Html.RadioButtonFor(model => model.AgeGroup_Id, ageGroupId) 
        @ageGroupDescription
     }
    }
    @Html.ValidationMessageFor(model => model.AgeGroup_Id)

There, that wasn’t so hard was it?!?

Btw, if you’re new to ASP.NET MVC then there’s a good roundup of resources on Jon Galloway’s blog.