asp.net MVC

How to implement CheckBoxList control in asp.net MVC?

How to implement CheckBoxList control in asp.net MVC?, someone asked me to explain?

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>

Post your comments / questions