In this article I will explain with an example, how to delete (remove) record (row) range by ID using Entity Framework in ASP.Net MVC.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
 
Database
I have made use of the following table Customers with the schema as follows. CustomerId is an Auto-Increment (Identity) column.
ASP.Net MVC: Delete (Remove) record (row) Range by ID in Entity Framework
 
I have already inserted few records in the table.
ASP.Net MVC: Delete (Remove) record (row) Range by ID in Entity Framework
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
ASP.Net MVC: Delete (Remove) record (row) Range by ID in Entity Framework
 
 
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, all the records from the Customers table is returned to the View as a Generic List collection.
 
Action method for Bulk Delete
Inside this Action method, an Integer Array containing multiple CustomerId values is received as parameter.
Finally, the customer records are referenced from CustomersEntities and deleted from the database by calling the RemoveRange method of the Entities class using Entity Framework.
Note: The RemoveRange method is available from Entity Framework 6 onwards. Thus, if you are using Entity Framework below version 6, please upgrade to Entity Framework 6 or higher.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        CustomersEntities entities = new CustomersEntities();
        List<Customer> customers = entities.Customers.ToList();
        return View(customers.ToList());
    }
 
    [HttpPost]
    public ActionResult DeleteCustomers(int[] customerIds)
    {
        using (CustomersEntities entities = new CustomersEntities())
        {
            entities.Customers.RemoveRange(entities.Customers.Where(c => customerIds.Contains(c.CustomerId)));
            entities.SaveChanges();
        }
 
        return new EmptyResult();
    }
}
 
 
View
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
Note: For more information on usage of WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
Adding CheckBox to WebGrid Row
The first column in WebGrid is formatted to display a CheckBox and the CustomerID field value is assigned to the value attribute of the CheckBox.
 
Adding CheckBox to WebGrid Header Row
There is no direct way to add a CheckBox to the Header Row of WebGrid and hence, using jQuery a dynamic CheckBox is created and it is appended to the first cell of the Header row of the WebGrid.
 
Check (Select) Row CheckBoxes when the Header Row CheckBox is checked (selected)
The Header Row CheckBox is assigned a jQuery Click event handler. When the Header Row CheckBox is checked (selected), all the row CheckBoxes are checked (selected) using jQuery.
And in similar way, when the Header Row CheckBox is unchecked (deselected), all the row CheckBoxes are unchecked (deselected) using jQuery.
 
Check (Select) Header Row CheckBox when the all the Row CheckBoxes are checked (selected)
Each Row CheckBox is assigned a jQuery Click event handler. When any Row CheckBox is checked (selected), a check is performed to find whether all Row CheckBoxes are checked. If the answer is Yes, then the Header Row CheckBox is checked (selected) else the Header Row CheckBox is unchecked (deselected).
 
Bulk Delete multiple checked (selected) Rows from WebGrid
When the Delete button is clicked, all the checked (selected) CheckBoxes are referenced and a JavaScript Confirmation Box is displayed.
If the Confirmation Box response is True, then an Array is built by looping through the checked (selected) CheckBoxes and fetching the CustomerId value from the WebGrid Row to which the CheckBox belongs.
Finally, the Array is sent to the Controller’s Action method using jQuery AJAX and checked (selected) Rows are removed from the WebGrid.
@model IEnumerable<Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: false, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .Grid { border: 1px solid #ccc; border-collapse: collapse; }
        .Grid th { background-color: #F7F7F7; font-weight: bold; }
        .Grid th, .Grid td { padding: 5px; border: 1px solid #ccc; }
        .Grid td:not(:first-child) { min-width: 80px; }
        .Grid, .Grid table td { border: 0px solid #ccc; }
        .Grid th a, .Grid th a:visited { color: #333; }
    </style>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                     webGrid.Column(null, null, format: @<text><input type="checkbox" name="chkRow" value="@item.CustomerID" /></text>),
                     webGrid.Column("CustomerId", "Customer Id"),
                     webGrid.Column("Name", "Name"),
                     webGrid.Column("Country", "Country")))
    <br/>
    <input type="button" id="btnDelete" value="Delete" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            //Create the CheckBox element.
            var chkHeader = $("<input type = checkbox id = 'chkHeader' />");
 
            //Append it to the First cell of Header Row.
            $("#WebGrid th:first-child").append(chkHeader);
 
            //Assign Click event handler to the Header Row CheckBox.
            chkHeader.click(function () {
                if ($(this).is(":checked")) {
                    //If the Header Row CheckBox is checked, check all Row CheckBoxes.
                    $("#WebGrid td input[type=checkBox]").attr("checked", "checked");
                } else {
                    //If the Header Row CheckBox is NOT checked, uncheck all Row CheckBoxes.
                    $("#WebGrid td input[type=checkBox]").removeAttr("checked");
                }
            });
 
            //Assign Click event handler to each Row CheckBox.
            $("#WebGrid input[name=chkRow]").click(function () {
                UpdateHeaderRowCheckBox(chkHeader);
            });
 
            //Retain selection of Header Row CheckBox.
            UpdateHeaderRowCheckBox(chkHeader);
        });
 
        function UpdateHeaderRowCheckBox(chkHeader) {
            if ($("#WebGrid td input[type=checkBox]:checked").length == $("#WebGrid td input[type=checkBox]").length) {
                //If all the Row CheckBoxes are checked, check the Header Row CheckBox.
                chkHeader.attr("checked", "checked");
            } else {
                //Even if one of the Row CheckBoxes is NOT checked, uncheck the Header Row CheckBox.
                chkHeader.removeAttr("checked");
            }
        }
 
        //Delete event handler.
        $("body").on("click", "#btnDelete", function () {
            //Get all the Checked CheckBoxes.
            var checked = $("#WebGrid td input[type=checkBox]:checked");
            if (checked.length > 0) {
 
                //Display Confirmation Message.
                if (confirm("Do you want to delete " + checked.length + " row(s)?")) {
 
                    //Loop and build an Array of CustomerId to be deleted.
                    var customerIds = [];
                    checked.each(function () {
                        var customerId = parseInt($(this).closest("tr").find("td").eq(1).html());
                        customerIds.push(customerId);
                    });
 
                    //Call Delete Action method.
                    $.ajax({
                        type: "POST",
                        url: "/Home/DeleteCustomers",
                        data: '{customerIds: ' + JSON.stringify(customerIds) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            checked.each(function () {
                                var row = $(this).closest("tr");
                                if ($("#WebGrid TBODY tr").length == 1) {
                                    row.find("td").html("&nbsp;");
                                    row.find("input").hide();
                                } else {
                                    row.remove();
                                }
                            });
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net MVC: Delete (Remove) record (row) Range by ID in Entity Framework
 
 
Downloads
Download Code