How to implement CheckBoxList control in asp.net MVC?

In this article we will discuss implementing CheckBoxList functionality in asp.net MVC application.

We will be using City table

Step 1: Create a table using the following script with data:

USE[ShoppingZone]

GO

/******Object:  Table [dbo].[City]    Script Date: 04/22/2016 18:22:41 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

CREATE TABLE [dbo].[City](

      [CityId] [int] IDENTITY(1,1) NOT NULL,

      [Name] [nvarchar](50) NOT NULL,

      [IsSelected] [bit] NOT NULL,

 CONSTRAINT[PK_City] PRIMARY KEYCLUSTERED 

(

      [CityId] ASC

)WITH(PAD_INDEX = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET IDENTITY_INSERT [dbo].[City]ON

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (1, N'Mumbai', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (2, N'London', 1)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (3, N'New York', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (4, N'brussels', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (5, N'sydney', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (6, N'Riyadh', 0)

INSERT [dbo].[City] ([CityId], [Name], [IsSelected]) VALUES (7, N'seoul', 0)

SET IDENTITY_INSERT [dbo].[City]OFF

Step 2: Create an ado.net entity data model using table City and generate entity for that.

Step 3: Right click on the "Controllers" folder and add "CheckList" controller. Copy and paste the following code. Please make sure to include "MVC_tutorials.Models" namespace.

using MVC_tutorials.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Mvc;

 

namespace MVC_tutorials.Controllers

{

    public class CheckListController : Controller

    {

        models db = new models();

 

        [HttpGet]

        public ActionResult Index()

        {

            return View(db.Cities);

        }

 

        [HttpPost]

        public string Index(IEnumerable<City> cities)

        {

            if (cities.Count(x => x.IsSelected) == 0)

            {

                return "You have not selectedany 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();

            }

        }

    }

}

Step 4: Create a folder and name it as EditorTemplates inside CheckList folder. Right click on the folder and create a view name it as “city”.  Copy and paste the following code.

@modelMVC_tutorials.Models.City

 

@{

    ViewBag.Title = "City";

}

 

@Html.HiddenFor(x => x.CityId)

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

 

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

 

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

Step 5: Right click on the "Index" action method in the "CheckListController" and add "Index" view. Copy and paste the followingcode.

@modelIEnumerable<MVC_tutorials.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>