How to Delete Multiple Rows in MVC4 Application

In this article we will delete multiple rows of a database table. For that we will use a checkbox for selecting rows.

Step 1

Create a new project. Go to "File" -> "New" -> "Project..." then Select ASP.NET MVC4 web application then enter the Application Name then click OK then select Internet Application then select View Engine Razor then click OK.

Step 2

Add a database and create a table in it. Go to Solution Explorer then right-click on the App_Data folder then click Add > New item then select SQL Server Database under Data then enter the database name then click Add. After creating table insert some rows manually.

CREATE TABLE [dbo].[tblstudent] (
    [Id] INT NOT NULL,
    [SName] NVARCHAR (50) NULL,
    [stream] NVARCHAR (50) NULL,
    [college] NVARCHAR (50) NULL,
    [Address] NVARCHAR (50) NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Step 3

Add an entity data model. Go to Solution Explorer then right-click on the project name in the Solution Explorer then click Add > New item then select ADO.Net Entity Data Model under Data then enter the model name then click Add.

The Entity Data Model Wizard will open as a popup window then select Generate from database then click Next.

Choose your data connection then select your database then click Next then select Tables then enter the Model namespace then click Finish.

Step 4

Add a Controller or use the default Home controller. I used the default Home controller. Add a new action into your controller to delete rows. Here I added a "deleteRow".

studentDBEntities db = new studentDBEntities();
public ActionResult deleteRow()
{
    return View(db.tblstudents.ToList());
}
[HttpPost]
public ActionResult deleteRow(IEnumerable<int> studentRecordDeletebyId)
{
    foreach (var id in studentRecordDeletebyId)
    {
        var student = db.tblstudents.Single(s => s.Id == id);

        db.tblstudents.Remove(student);
    }
    db.SaveChanges();
    return RedirectToAction("deleteRow");
}

Step 5

Add a view for the action. Right-click on the Action Method then click Add View then enter View Name then select View Engine then check "Create a strong-typed view" then select your model class then click Add.

@using (Html.BeginForm("deleteRow", "Home", FormMethod.Post))
{
    <h2>delete multiple Rows</h2>
    <table style="background-color:azure" border="1">
        <thead style="background-color:Background">
            <tr>
                <th>
                    Select
                </th>
                <th>
                    Student Name
                </th>
                <th>
                    Stream
                </th>
                <th>
                    College
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
    <tbody>
    @Html.EditorForModel()
    </tbody>
    </table>
    <input type="submit" value="Delete selected student" />
}

We use @Html.EditorForModel() because we created the view described in Step 5; this view will fetch the rows from the database.

Step 6

Add add another view. Add an EditorTemplates folder inside the shared folder and right-click on the EditorTemplates and add a view, the same name as a tblstudent model.

<tr>
    <td>
        <input type="checkbox" name="studentRecordDeletebyId" id="studentRecordDeletebyId" value="@Model.Id" />
    </td>
    <td>
        @Model.SName
    </td>
    <td>
        @Model.stream
    </td>
    <td>
        @Model.college
    </td>
    <td>
        @Model.Address
    </td>
</tr>

In this view we add an input type checkbox and provide the name studentRecordDeletebyId, the same as we passed as the parameter in our deleteRow action method.

Step 7

Run the application and change the URL. In my case it is http://localhost:50191/Home/deleteRow