How To Bind Checkbox From Database In MVC 5 Using Entity Framework

Introduction

In this article I will demonstrate how to bind checkbox from database table in MVC5 using Entity Framework. I will also show selected checkbox value after button submit.

Step 1

Open SQL Server 2014 and create database table to insert data and retrieve data.

CREATE TABLE [dbo].[Languages](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [Programming_Language] [nvarchar](50) NULL,
 CONSTRAINT [PK_Languages] PRIMARY KEY CLUSTERED
(
    [ID] 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

Screenshot for database table

Step 2

Open Visual Studio 2015, click on New Project, and create an empty web application project.

Screenshot for creating new project 1

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name of your project and then click on OK.

Screenshot for creating new project 2

After clicking on OK, one more window will appear. Choose Empty check on MVC checkbox and click on OK.

Screenshot for creating new project-3

 

After clicking on OK, the project will be created with the name of MvcCheckBoxList_Demo.

Step 3

Add Entity Framework, right click on Models folder, select Add, then select New Item then click on it.

Screenshot for adding entity framework 1

After clicking on new item, you will get a window. From there, select Data from the left panel and choose ADO.NET Entity Data Model, give it a name as DBModels (this name is not mandatory; you can give any name) than click on Add.

Screenshot for adding entity framework 2

After you click on Add, a window wizard will open. Choose EF Designer from database and click Next.

Screenshot for adding entity framework 3

After clicking on Next, the window will appear. Choose New Connection. Another window will appear. Add your server name if it is local then enter dot (.). Choose your database and click on OK.

Screenshot for adding entity framework 4

 

Connection will get added. If you wish to save connect as you want. You can change the name of your connection below. It will save connection in web config then click on Next.

Screenshot for adding entity framework 5

After clicking on NEXT, another window will appear. Choose database table name as shown in the below screenshot, then click Finish. Entity Framework will be added while respective class gets generated under Models folder.

Screenshot for adding entity framework 6

 

Screenshot for adding entity framework 6

Following class will be added:

namespace MvcCheckBoxList_Demo.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Language
    {
        public int ID { get; set; }
        public string Programming_Language { get; set; }

        public bool IsCheked { get; set; }
    }

    public class LanguageModel
    {
        public List<Language> Languages { get; set; }
    }
}

Step 4

Right click on Controllers folder select Add then choose Controller as shown in below screenshot.

 

After clicking on controller a window will appear, choose MVC5 Controller-Empty click on Add.

 

After clicking on Add another window will appear with DefaultController. Change the name HomeController then click on Add. HomeController will be added under Controllers folder. Remember don’t change the suffix for all controllers, change only highlighted one, and  instead of Default just change Home. As showm in below screenshot.

Add the following namespace in controller

using MvcCheckBoxList_Demo.Models;

 

Complete controller code

using MvcCheckBoxList_Demo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcCheckBoxList_Demo.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            LanguageModel ProgrammingLanguage = new LanguageModel();
            using (DBModel db = new DBModel())
            {
                ProgrammingLanguage.Languages = db.Languages.ToList<Language>();
            }
            return View(ProgrammingLanguage);
        }
        [HttpPost]
        public ActionResult Index(LanguageModel model)
        {
            var selectedLanguage = model.Languages.Where(x => x.IsCheked == true).ToList<Language>();

            return Content(String.Join(",", selectedLanguage.Select(x => x.Programming_Language)));
        }
    }

}

Step 5

Right click on index action method in controller. Add view, a window will appear with default index name unchecked (use a Layout page) and click on Add as show in below screenshot. View will be added in views folder under Home folder with name index.

Screenshot for adding view

 

Step 6

Click on Tools, select NuGet Package Manager, then choose Manage NuGet Packages for Solution and click on it.

Screenshot for NuGet Package 1

After that a window will appear, choose Browse type as bootstrap and install package in project. As shown.

Screenshot for NuGet Package 2

Similarly type JQuery and install latest version of JQuery package in project and Jquery validation file from NuGet then close NuGet Solution.

Screenshot for NuGet Package 3

 

Keep required bootstrap and jQuery files and delete remaining files if you're not using them. 

Screenshot for NuGet Package 4

Step 7

Write the following code in index view.

Complete view code

@model MvcCheckBoxList_Demo.Models.LanguageModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.3.1.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container py-4">
        <h5 class="text-center text-uppercase">How to bind checkbox in mvc5 from database</h5>
        @using (Html.BeginForm())
        {
            <table>
                @for (int i = 0; i < Model.Languages.Count; i++)
                {
                    if (i % 4 == 0)
                    {
                        @:
                        <tr></tr>
                    }
                    <td>
                        @Html.CheckBoxFor(x => x.Languages[i].IsCheked, new { @class = "custom-checkbox" })
                        <label>@Model.Languages[i].Programming_Language</label>
                        @Html.HiddenFor(x => x.Languages[i].ID)
                        @Html.HiddenFor(x => x.Languages[i].Programming_Language)
                    </td>
                }
            </table>
            <input type="submit" class="btn btn-outline-primary rounded-0" value="Submit" />
        }
    </div>
</body>
</html>

Step 8

Run Project ctrl+F5

Screenshot 1

 

Screenshot 2

 

Screenshot 3

 

Conclusion

In this article I have explained how we can dynamically bind checkbox from database in MVC 5 using entity framework.