swirl
Home Software Blog Wallpapers Webtools
ASP.NET MVC - Using checkboxes
Sunday 15, February 2015   |   Post link   |   Sample code  Download related meterial
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.

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

simple-selection.png
The view code (Choose.cshtml) is present below:

The controller (SubscriptionController.cs) code is present below:
Clicking the 'Submit' button takes the user to a the 'finalize' screen where we display his selection.

simple-selection-finalize.png
The view code (Finalize.cshtml) is present below:

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:

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

choose-magazines.png
The view code for this below:
The controller code for this action is:

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:

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:

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

magazine-finalize.png
The code for the view (FinalizeMagazines.cshtml) is below:

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.
Sample code  Download related meterial


Load Comments

Posts By Year

2016 (6)
2017 (5)
2012 (2)
2013 (4)
2014 (2)
2015 (18)

Posts By Category

Software Engineering (1)
IIS (1)
T-SQL (1)
Git (1)
Technology (1)
Database migration (1)
PHP (1)
Corporate culture (1)
Tablet (1)
OData (1)
Containers (3)
Lucene (1)
Test Driven (1)
Java (2)
TDD (1)
Solr (1)
XML (1)
TSQL (5)
Windows (4)
PowerShell (1)
Software development (1)
Wallpapers (1)
Utilities (1)
Entity Framework (2)
Rants (5)
Life (5)
Programming (13)
Office (1)
Book review (3)
Sql Server (1)
ASP.NET MVC (4)
Android (1)
Desktop (1)
Unit Testing (1)

Posts By Tags

Dockers(2) Books(1) Organization(1) Busy(1) PowerShell(1) PHP(1) Backup(1) Database(1) Containers(3) Mobile Apps(1) Paths(1) SSH(1) Web Development(4) Yii(1) Debugging(1) Advertising(1) Adults(1) GradleApache(1) C#(2) SQL Code-first Migration(1) Developer(1) Consumerism(1) Log4J(1) Self reliance(1) Company culture(1) Entity framework(1) Work culture(1) Programming(1) Management(2) Book review(2) Validation(2) C++(1) Sql Express(1) HierarchyID(1) Lucene(1) IIS(1) Windows 10(1) Cmdlet(1) Intelli J(1) JavaScript(1) Spirituality(1) Migration history(1) Tablet(1) OData(1) TDD(1) Data-time(1) Beliefs(1) Checkbox(1) CTE(1) CSRF(1) JSON(1) Windows 8.1(1) Quality(1) XML(1) ASP.NET(4) TSQL(3) File history(1) Windows(1) Wallpapers(1) SD card(1) File copy(1) SQL(1) Windows 2016(2) Python(1) MVC(4) Url rewrite(1) Solr(1) Modern Life(1) System Image(1) Android(1) Commons(1) Office(1) Anti-forgery(1)