Part 65 - Deleting multiple rows in mvc

Suggested Videos 
Part 62 - Implementing search functionality
Part 63 - Implement paging
Part 64 - Implement sorting

In this video, we will discuss deleting multiple rows in an asp.net mvc application.



We will be using table tblEmployee for this demo. Please refer to Part 62, if you need SQL script to create and populate this table.



We want to provide a checkbox next to every row, to enable users to select multiple rows for deletion as shown below.


Step 1: Create an empty asp.net mvc 4 application.

Step 2: Generate ADO.NET entity data model from database using table tblEmployee. Change the entity name from tblEmployee to Employee. Save changes and build the application.

Step 3: Add HomeController with the following settings.
a) Controller name = HomeController
b) Template = Empty MVC controller

Setp 4: Add "Shared" folder under "Views", if it is not already present. Add "EditorTemplates" folder, under "Shared" folder. Right click on "EditorTemplates" folder and "Employee.cshtml" view with the following settings
View name = Employee
View engine = Razor
Create a strongly-typed view = checked
Model class = Employee (MVCDemo.Models)
Scaffold Template = Empty
and finally click "Add"

Step 5: Copy and paste the following code in Employee.cshtml view
@model MVCDemo.Models.Employee
<tr>
    <td>
        <input type="checkbox" name="employeeIdsToDelete" id="employeeIdsToDelete" value="@Model.ID" />
    </td>
    <td>
        @Model.Name
    </td>
    <td>
        @Model.Gender
    </td>
    <td>
        @Model.Email
    </td>
</tr>

Step 6: Copy and paste the following code in HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCDemo.Models;

namespace MVCTest.Controllers
{
    public class HomeController : Controller
    {
        private SampleDBContext db = new SampleDBContext();

        public ActionResult Index()
        {
            return View(db.Employees.ToList());
        }

        [HttpPost]
        public ActionResult Delete(IEnumerable<int> employeeIdsToDelete)
        {
            db.Employees.Where(x => employeeIdsToDelete.Contains(x.ID)).ToList().ForEach(db.Employees.DeleteObject);
            db.SaveChanges();
            return RedirectToAction("Index");
        }
    }
}

Setp 7: Right click on the Index() action and add "Index" view with the following settings.
View name = Index
View engine = Razor
Create a strongly-typed view = checked
Model class = Employee (MVCDemo.Models)
Scaffold Template = Empty
and finally click "Add"

Setp 8: Copy and paste the following code in Index.cshtml view
@model IEnumerable<MVCDemo.Models.Employee>

<div style="font-family:Arial">
<h2>Employee List</h2>

@using (Html.BeginForm("Delete", "Home", FormMethod.Post))
{
<table border="1">
    <thead>
        <tr>
            <th>
                Select
            </th>
            <th>
                Name
            </th>
            <th>
                Gender
            </th>
            <th>
                Email
            </th>
        </tr>
    </thead>
    <tbody>
        @Html.EditorForModel()
    </tbody>
</table>
<input type="submit" value="Delete selected employees" />
}
</div>

In our next video, we will discuss providing a "SELECT ALL" checkbox to select and de-select all rows.