ASP.NET MVC - Using checkboxes

Sunday 15, February 2015   |   Post link   |     Download related material

One can't stop loving model binding in ASP.NET MVC. It simplifies so many things. There are some tricky areas though one of which is using checkboxes. In this post, I'll try to explain how I have used them.
Let's start with a simple example of a news-letter subscription. A user decides to subscribe or not subscribe for a news-letter subscription. A simple model class holds this information.

public class SubscriptionModel
{
	public bool Subscribe { get; set; }
}

A simple selection screen allows the user to select or deselect this:


The view code (Choose.cshtml) is present below:

@model Checkboxes.Models.SubscriptionModel
@{ ViewBag.Title = "ChooseSubscription"; }
<h2>ChooseSubscription</h2>
@using(@Html.BeginForm("Finalize", "Subscription"))
{
	@Html.CheckBoxFor(m => m.Subscribe) <text>Subscribe to new-letter</text>
	<br>
	<hr>
	<input value="Submit" type="Submit">
}

The controller (SubscriptionController.cs) code is present below:

public class SubscriptionController : Controller
{		
	public ActionResult Choose()
	{
		SubscriptionModel emptyModel = new SubscriptionModel();
		return View(emptyModel);
	}

        public ActionResult Finalize(SubscriptionModel model)
        {
            return View(model);
        }
}

Clicking the 'Submit' button takes the user to a the 'finalize' screen where we display his selection.


The view code (Finalize.cshtml) is present below:

@model Checkboxes.Models.SubscriptionModel
<h2>Finalize</h2>
You have decided to @{ @Html.Raw(Model.Subscribe == true ? "subscribe" : "not subscribe"); }

MVC is able correctly map the boolean property 'Subscribe' of the model class with the result of selecting or not-selecting the check-box.
That was easy. Let's now change requirement a bit. Instead of just selecting whether he wants to subscribe or not, the user selects from a number of magazines the ones he wants to subscribe to. The new data model is:

public class Magazine
{
	public int Id { get; set; }
	public string Name { get; set; }
	public int Cost { get; set; }
}

public class MagazineSubscriptionModel
{
	public IEnumerable<magazine> Magazines { get; set; }
	public IEnumerable<string> SelectedMagazineIds { get; set; }
}

The user starts the process from the ChooseMagazines view (ChooseMagazines.cshtml).


The view code for this below:

@model Checkboxes.Models.MagazineSubscriptionModel
@using Checkboxes.Models		   
@{
    ViewBag.Title = "ChooseMagazines";
}
<h2>ChooseMagazines</h2>
@using (@Html.BeginForm("FinalizeMagazines", "Subscription"))
{
	foreach(Magazine m in Model.Magazines)
	{
		@Html.CheckBox("SelectedMagazineIds", false, new { @value = m.Id }) <text>@m.Name, Cost = @m.Cost</text>
		<br />
	}	
	<br />
	<hr />
	<input type="submit" value="Submit" />
}

The controller code for this action is:

public ActionResult ChooseMagazines()
{
	MagazineSubscriptionModel model = new MagazineSubscriptionModel();
	model.Magazines = GetMagazines();
	return View(model);
}

private IEnumerable<Magazine> GetMagazines()
{
	return new Magazine[] { 
		new Magazine { Id = 1, Name = "Visual Basic Programmer's Journal", Cost = 10 },
		new Magazine { Id = 2, Name = "Popular Science", Cost = 14 },
		new Magazine { Id = 3, Name = "Omni", Cost = 12 },
		new Magazine { Id = 4, Name = "MSDN", Cost = 10 }
	};
}

GetMagazines would ideally be implemented in the service/business layer. When the user submits his selection, in the controller's action method we manipulate the data returned in the model a bit:

public ActionResult FinalizeMagazines(MagazineSubscriptionModel model)
{
	int temp = 0;
	IEnumerable<int> selectedIds = model.SelectedMagazineIds.Where(id => int.TryParse(id, out temp)).Select(i => temp).ToList();
	model.Magazines = GetMagazines().Where(m => selectedIds.Contains(m.Id)).ToList();
	return View(model);
}

Since html controls store their value as string, we defined the SelectedMagazineIds property as a string enumeration. You could use a list or an array and it would work just as well. When the form is posted to the method, SelectedMagazineIds will contain integer IDs only for the checked check-boxes. The check-boxes which were not checked will contain the value "False". All we need to do it extract the valid integer ids which are the magazine-ids the user selected. We do that in the following lines:

int temp = 0;
IEnumerable<int> selectedIds = model.SelectedMagazineIds.Where(id => int.TryParse(id, out temp)).Select(i => temp).ToList();

We then retrieve the complete magazine objects based on these ids and pass them to the FinalizeMagazines view for display.


The code for the view (FinalizeMagazines.cshtml) is below:

@model Checkboxes.Models.MagazineSubscriptionModel
@using Checkboxes.Models
@{ 
	ViewBag.Title = "FinalizeMagazines";
	int total = 0;
}
<h2>FinalizeMagazines - You selected</h2>
@foreach(Magazine m in Model.Magazines)
{
	<p>@m.Name</p>
	total += m.Cost;
}
<br />
<hr />
<h3>Total cost: @total</h3>

To summarize, even though there is no native support for multiple checkboxes for the same data-memeber, it's not difficult to use checkboxes is such situations.

Categories: ASP.NET MVC (4) Programming (28)

Tags: ASP.NET(4) Checkbox(1) MVC(4) Web Development(4)