Delete records from GridView without Page Reload using jQuery

In a GridView, you can delete any row so that there is no page reloading. You can achieve this using just a little bit of jQuery. Let me show you how to create this feature in your ASP.NET Web Forms based website. Once this tutorial is finished, you will have the feature that will work precisely like shown below:

Add GridView to the ASP.NET Web Forms

The GridView will show records of Students who are studying in a school. So, add the following GridView to your Web Forms page.

<asp:GridView ID="gridView" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Age" HeaderText="Age" />
        <asp:BoundField DataField="Subject" HeaderText="Subject" />
        <asp:BoundField DataField="AddedOn" HeaderText="AddedOn" />
        <asp:TemplateField HeaderText="Delete">
            <ItemTemplate>
                <img class="deleteImg" src="delete-icon.png" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

It's just a simple GridView binding field like Id, Name, Age, Subject, etc. The last field is a TemplateField showing a delete icon. The work of this field is to delete the student row when clicked.

Next, in your .aspx.cs page, bind the GridView with Student records. The code is given below:

protected void Page_Load(object sender, EventArgs e)
{
	if (!Page.IsPostBack)
	{
		BindStudent();
	}

}

public void BindStudent()
{
	DataTable dummy = new DataTable();
	dummy.Columns.Add("Id");
	dummy.Columns.Add("Name");
	dummy.Columns.Add("Age");
	dummy.Columns.Add("Subject");
	dummy.Columns.Add("AddedOn");

	dummy.Rows.Add("1", "Jacky", "9", "ASP.NET Core", "1/14/2024");
	dummy.Rows.Add("2", "Jack", "11", "ASP.NET MVC", "1/14/2024");
	dummy.Rows.Add("3", "Sheena", "17", "ASP.NET Web Forms", "1/14/2024");
	dummy.Rows.Add("4", "Rohit", "18", "ASP.NET Core", "1/14/2024");
	dummy.Rows.Add("5", "Mila", "14", "ASP.NET Web Forms", "1/14/2024");
	dummy.Rows.Add("6", "Sharon", "13", "ASP.NET MVC", "1/14/2024");
	dummy.Rows.Add("7", "Mark", "9", "ASP.NET Core", "1/14/2024");
	dummy.Rows.Add("8", "Bill", "16", "ASP.NET Web Forms", "1/14/2024");

	gridView.DataSource = dummy;
	gridView.DataBind();
}

We are simply binding the GridView with some Dummy Data. In your real-world app, you will bind the records from the database using Entity Framework Core and then use jQuery to delete them. A typical example of this situation can be seen here. Next, we move to the deletion part using jQuery.

The jQuery Code to delete the row with No-Page Reload

Now add the jQuery code to your page that will be executed on clicking the 'delete' image on the GridView. This code is given below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".deleteImg").click(function (e) {
            var parent = $(this).parents("tr");
            var id = parent.find("td:eq(0)").text();
            console.log(id)
            $.ajax({
                type: "POST",
                url: "/Default.aspx/deleterow",
                contentType: "application/json; charset=utf-8",
                data: '{"id":"' + id + '"}',
                dataType: "json",
                success: function (result, status, xhr) {
                    if (result.d == "success")
                        parent.hide("slow");
                    else
                        alert(result.d);
                },
                error: function (xhr, status, error) {
                    console.log("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
                }
            });
        });
    });
</script>

Explanation: On the click of the delete image, I first get its parent 'tr' row and the value of the first 'td' child of this row. The first 'td' child value will be the 'id' column of the student row.

var parent = $(this).parents("tr"); 
var id = parent.find("td:eq(0)").text();

Then, I used the .ajax() method of jQuery to make an AJAX request to the 'deleterow()' function in the .aspx.cs page. I also pass the 'id' of the record to this function. When I receive a 'success' message from the AJAX request, I hide the row by using the following jQuery code:

parent.hide("slow");

Adding The WebMethod

Next, add the deleterow() WebMethod function to your .aspx.cs page to delete the row from the Student table. This function is given below:

[System.Web.Services.WebMethod]
public static string deleterow(int id)
{
	// remove the "id" row from the database with Entity Framework Core
	return "success";
}

This function gets the 'id' of the record, and then we can remove this record from the database. However, I have not given the deletion code to prevent this article from being too long. You can do this thing on your own.

Conclusion

The jQuery is an excellent script language for server-side works without reloading the whole page. I used it here for deleting the record from GridView itself. You can download the source code and use it on your website.

Related Tutorial - You can check my related tutorial - Bind GridView Using jQuery Load In ASP.NET With No Page Reload.