How To Delete Multiple Rows Using Checkbox In MVC 5

Introduction

In this article, I will demonstrate how to delete multiple rows from a database using checkbox in MVC 5. I will have a checkbox in the table header to check and uncheck all the records in the table to delete. I will use a jQuery datatable for searching, sorting, and paging.

Step 1

Open SQL Server 2014 and create a database table and insert some record in it.

CREATE TABLE [dbo].[Employees](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Position] [nvarchar](50) NULL,
[Office] [nvarchar](50) NULL,
[Age] [int] NULL,
[Salary] [nvarchar](50) NULL,
CONSTRAINT [PK_Employees] 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

Step 2

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

Screenshot for creating new project 1

ASP.NET

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project, then click on OK as shown in below screenshot.

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 as shown below screenshot.

Screenshot for creating new project 3

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

Step 3

Add Entity Framework now. For that, 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 the name DBModels (this name is not mandatory you can give any name) and click on Add.

Screenshot for adding entity framework 2

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

Screenshot for adding entity framework 3

After clicking on Next a 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 be added. If you wish 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 on Finish.

Screenshot for adding entity framework 6

Screenshot for adding entity framework-7

Entity framework will be added and respective class gets generated under Models folder.

Screenshot for adding entity framework 8

Following class will be added,

namespace MvcDeleteMultipleRows_Demo.Models
{
using System;
using System.Collections.Generic;
public partial class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Office { get; set; }
public Nullable<int> Age { get; set; }
public string Salary { 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 to HomeController then click on Add. HomeController will be added under Controllers folder. Remember don’t change the Controller suffix for all controllers, change only highlight, and instead of Default just change Home as shown in the below screenshot.

ASP.NET

Complete code for controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcDeleteMultipleRows_Demo.Models;
namespace MvcDeleteMultipleRows_Demo.Controllers
{
public class HomeController : Controller
{
private DBModel db = new DBModel();
[HttpGet]
public ActionResult Index()
{
ViewBag.ListEmployee = this.db.Employees.ToList();
return View();
}
[HttpPost]
public ActionResult Index(FormCollection formCollection)
{
string[] ids = formCollection["ID"].Split(new char[]{ ',' });
foreach (string id in ids)
{
var employee = this.db.Employees.Find(int.Parse(id));
this.db.Employees.Remove(employee);
this.db.SaveChanges();
}
return RedirectToAction("Index");
}
}
}

Step 5

Right click on index action method in controller. Add view window will appear with default index name unchecked (use a Layout page), and click on Add as shown in the 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 click on it.

Screenshot for NuGet Package

ASP.NET

After that a window will appear choose Browse type bootstrap and install package in project. Similarly type JQuery and install latest version of JQuery package in project and jquery validation file from NuGet then close NuGet Solution. Keep required bootstrap and jQuery files and delete remaining files if not using, or you can download and add in project.

Step 7

Add required script and style in head section of view.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
<link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/scripts/jquery.dataTables.min.js"></script>
<script src="~/scripts/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#DataTable').DataTable();
$('#checkBoxAll').click(function () {
if ($(this).is(":checked")) {
$(".chkCheckBoxId").prop("checked", true)
}
else {
$(".chkCheckBoxId").prop("checked", false)
}
});
});
</script>

Step 8

Design view with HTML, cshtml and bootstrap 4 classes,

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
<link href="~/Content/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/scripts/jquery.dataTables.min.js"></script>
<script src="~/scripts/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#DataTable').DataTable();
$('#checkBoxAll').click(function () {
if ($(this).is(":checked")) {
$(".chkCheckBoxId").prop("checked", true)
}
else {
$(".chkCheckBoxId").prop("checked", false)
}
});
});
</script>
</head>
<body>
<div class="container py-4">
<div class="card">
<div class="card-header bg-primary text-white">
<h5>Employee List</h5>
</div>
<div class="card-body">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<button type="submit" value="Delete" class="btn btn-sm btn-danger rounded-0" onclick="return confirm('Are you sure?')"><i class="fa fa-trash-o"></i> Delete</button>
<br /><br />
<table id="DataTable" style="width:100%;" class="table table-bordered">
<thead>
<tr>
<th><input type="checkbox" id="checkBoxAll" class="custom-checkbox" /></th>
<th>EMP ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
@foreach (var employee in ViewBag.ListEmployee)
{
<tr>
<td><input type="checkbox" name="ID" value="@employee.ID" class="custom-checkbox chkCheckBoxId" /></td>
<td>@employee.ID</td>
<td>@employee.Name</td>
<td>@employee.Position</td>
<td>@employee.Office</td>
<td>@employee.Age</td>
<td>@employee.Salary</td>
</tr>
}
</tbody>
</table>
}
</div>
</div>
</div>
</body>
</html>

Step 9

Run Project ctrl+F5

Screenshot 1

Screenshot 2

Screenshot 3

ASP.NET

10 Comments

Join the conversation! Your thoughts help the community grow.

smita s6y ago
Are you submitting entire table rows to action method or only those records which checked by checkbox? i have requirment to submit those records which is checked , how i can do it
Madan Ghimire6y ago
Unable to pass data to FormCollection formCollection on Delete Post method Object reference not set to an instance of an object.
xueling li7y ago
Thanks!I SUCCESS!
Shyam Raghuvanshi7y ago
Can you please provide complete source sample code.
Adil Hassan8y ago
Hello I keep getting System.NullReferenceException: Object reference not set to an instance of an object. for this line of code : string[] ids = formCollection["ID"].Split(new char[]{ ',' });
- Jerry Hulsey8y ago
  I am getting an error on this as well. i am getting that there is no definition for split on string values. looking for the answer
- Diamond Philip5y ago
  Same here any solution please
Huy Dang8y ago
I love it.
Satyaprakash Samantaray8y ago
Nice article and very clear description
- Farhan Ahmed8y ago
  Thank you so much...