Part 38 - CheckBoxList in asp.net mvc

we will discuss implementing a checkbox list in asp.net mvc. We will be using table "tblCity" for this demo.




We should be generating a checkbox for each city from the table tblCity.




Sql script to create table tblCity
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', 0)
Insert into tblCity values ('Sydney', 1)
Insert into tblCity values ('Mumbai', 0)
Insert into tblCity values ('Cambridge', 0)

Let's add ADO.NET data model, to retrieve data from database
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 "Choose Your Database Objects" screen, expand "Tables" and select "tblCity" table
8. Type "Models" in "Model Namespace" textbox and click "Finish"
9. Change the entity name from "tblCity" to "City"


Right click on the "Controllers" folder, and add a "HomeController". Include the following 2 namespaces in "HomeController"
using MVCDemo.Models;
using System.Text;

Copy and paste the following code.
[HttpGet]
public ActionResult Index()
{
    SampleDBContext db = new SampleDBContext();
    return View(db.Cities);
}

[HttpPost]
public string Index(IEnumerable<City> 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 (City city in cities)
        {
            if (city.IsSelected)
            {
                sb.Append(city.Name + ", ");
            }
        }
        sb.Remove(sb.ToString().LastIndexOf(","), 1);
        return sb.ToString();
    }
}

Right click on the "Views" folder, and a "Home" folder. Right click on the "Home" folder and "EditorTemplates" folder. 

Right click on "EditorTemplates" folder > Add > View. In the "Add View" dialog box, set
View Name = City
View Engine = Razor
and click "Add".

Copy and paste the following code in "City.cshtml"
@model MVCDemo.Models.City

@{
    ViewBag.Title = "City";
}

@Html.HiddenFor(x => x.ID)
@Html.HiddenFor(x => x.Name)

@Html.CheckBoxFor(x => x.IsSelected)

@Html.DisplayFor(x => x.Name)

Please Note: Put the templates in "Shared" folder, if you want the "Templates", to be available for all the views.

Right click on the "Index" action method in "HomeController", and select "Add View" from the contex menu. Set 
View Name = Index
View Engine = Razor and click "Add"

Copy and paste the following code in "Index.cshtml"
@model IEnumerable<MVCDemo.Models.City>
@{
    ViewBag.Title = "Index";
}
<div style="font-family:Arial">
<h2>Index</h2>

@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <br />
    <input type="submit" value="Submit" />
}
</div>