CodeProject
In the last blog post on ASP.Net MVC, we have discussed about setting initial selected value in a RadioButtonList. You can read that article here. In this article we will go over implementing CheckBoxList in ASP.Net MVC.
Let’s try to understand this with an example. We will be using tblCity table in this example.
The SQL scripts for creating tblCity table and inserting data into it are following:
CREATE TABLE tblCity
(
ID INT IDENTITY PRIMARY KEY,
Name NVARCHAR(100) NOT NULL,
IsSelected BIT NOT NULL
)
Insert into tblCity values (‘London’, 0)
Insert into tblCity values (‘New York’, 1)
Insert into tblCity values (‘Sydney’, 1)
Insert into tblCity values (‘Mumbai’, 0)
Insert into tblCity values (‘Cambridge’, 0)
Our ultimate intention is to generate a screen like below.
The requirements are following:
When a user selects one or more cities and click on Submit button, the selected cities should be displayed in a comma separated manner. When the user doesn’t select any of the cities and still clicks on Submit button, a message of You have not selected any City should be appeared.
Let’s try to achieve this. First of all, add an ADO.Net data model to retrieve data from the database. For this, follow below steps.
1. Right click on the Models folder => Add => Add New Item.
2. From Add New Item dialog box, select ADO.NET Entity Data Model.
3. Set Name=SampleDataModel.edmx and click Add.
4. On Entity Data Model Wizard, select Generate from database and click Next.
5. Check Save entity connection settings in Web.Config as checkbox.
6. Type SampleDBContext as the connection string name and click Next.
7. On the next screen, expand Tables and select tblCity table.
8. Type Models in Model Namespace textbox and click Finish.
As soon as we click on Finish button, a Model like below will be created.
A connection string will automatically be added to the Web.config file as well.
Then right click on the Views folder and add a Home folder. Again right click on the Home folder and add EditorTemplates folder.
Then right click on EditorTemplates folder => Add => View. In the Add View dialog box, set
View Name = tblCity
View Engine = Razor
Model class = tblCity(MVCDemo.Models) and click Add.
Copy and paste the following code in tblCity.cshtml.
@model MVCDemo.Models.tblCity
@{
ViewBag.Title = “City”;
}
@Html.HiddenFor(x => x.ID)
@Html.HiddenFor(x => x.Name)
@Html.CheckBoxFor(x => x.IsSelected)
@Html.DisplayFor(x => x.Name)
Then right click on the Controllers folder and add a HomeController. Don’t forget to include following 2 namespaces in HomeController.
using MVCDemo.Models;
using System.Text;
Copy and paste the following code to the HomeController.
[HttpGet]
public ActionResult Index()
{
SampleDBContext db = new SampleDBContext();
return View(db.Cities);
}
[HttpPost]
public string Index(IEnumerable<tblCity> cities)
{
if (cities.Count(x => x.IsSelected) == 0)
{
return “You have not selected any City”;
}
else
{
StringBuilder sb = new StringBuilder();
sb.Append(“You selected – “);
foreach (tblCity city in cities)
{
if (city.IsSelected)
{
sb.Append(city.Name + “, “);
}
}
sb.Remove(sb.ToString().LastIndexOf(“,”), 1);
return sb.ToString();
}
}
Then right click on the Index action method in HomeController and select Add View from the context menu.
Set View Name = Index
View Engine = Razor and click Add.
Copy and paste the following code in Index.cshtml.
@model IEnumerable<MVCDemo.Models.tblCity>
@{
ViewBag.Title = “Index”;
}
<div style=”font-family:Arial”>
<h2>Index</h2>
@using (Html.BeginForm())
{
@Html.EditorForModel()
<br />
<input type=”submit” value=”Submit” />
}
</div>
Now run the application and we will get a screen like below.
When we select some cities, say New York and Sydney and click on Submit button, a message like below will be appeared.
You selected – New York, Sydney
Without selecting any cities and clicking on Submit button, a message like below will be appeared as expected.
You have not selected any City
Reference: Arun Ramachandran (http://BestTEchnologyBlog.Com)
