Delete Single or Multiple Records from GridView in ASP.NET

Deleting records from a database using a GridView is a common operation in ASP.NET applications. This article explains how to implement single and multiple deletions with checkboxes, client-side validation, and server-side logic connected to a SQL Server stored procedure.

🔹 1. UI Design — GridView with Checkboxes

We first display the records using an ASP:GridView where each row includes a checkbox for selection.

  
    <div id="leadstablediv" style="overflow-y: auto; max-height: 300px; width: 100%; padding: 15px;">
    <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="false"
        CssClass="table table-striped table-bordered cms-table">
        <Columns>
            <!-- Header Checkbox for Select All -->
            <asp:TemplateField>
                <HeaderTemplate>
                    <input id="HeadChk" type="checkbox" onclick="CheckAll(this);">
                </HeaderTemplate>
                <ItemTemplate>
                    <input id="chkSelect" name="chkSelect" type="checkbox"
                        value='<%# DataBinder.Eval(Container.DataItem, "SrNo") %>' onclick="checkall1(this)">
                </ItemTemplate>
            </asp:TemplateField>

            <!-- User Details -->
            <asp:TemplateField HeaderText="User Name">
                <ItemTemplate>
                    <asp:Label ID="lblUserName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Email">
                <ItemTemplate>
                    <asp:Label ID="lblEmail" runat="server" Text='<%# Bind("email") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="UCC">
                <ItemTemplate>
                    <asp:Label ID="lblUCC" runat="server" Text='<%# Bind("ucc") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <!-- Edit Icon -->
            <asp:TemplateField HeaderText="Action">
                <ItemTemplate>
                    <a class="editanchor tooltip" name='<%# Eval("srno") %>'>
                        <img src="images/edit.png" alt="edit" />
                        <span class="tooltiptext">Edit</span>
                    </a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <div id="nodatadivopen" runat="server" align="center">
        <asp:Label ID="lblnodatadivopen" runat="server" Style="color: red; font-size: 17px;">
            No Data Available !!
        </asp:Label>
    </div>
</div>

2. JavaScript for Select All and Validation

We use JavaScript functions to handle “Select All” functionality and validation before deleting.

  
    // Select or Deselect All Checkboxes
function CheckAll(CheckBox) {
    var check = CheckBox.checked;
    var items = document.getElementsByName("chkSelect");
    for (var i = 0; i < items.length; i++) {
        items[i].checked = check;
    }
}

// Update Header Checkbox State
function checkall1(data1) {
    if (!data1.checked)
        document.getElementById("HeadChk").checked = false;

    var items = document.getElementsByName("chkSelect");
    var allChecked = Array.from(items).every(i => i.checked);
    document.getElementById("HeadChk").checked = allChecked;
}

// Validate Selection before Deleting
function CheckBoxValidationAssign2() {
    var items = document.getElementsByName("chkSelect");
    var isChecked = Array.from(items).some(i => i.checked);
    if (!isChecked) {
        alert("No Items Selected");
        return false;
    }
    return confirm('Are you sure you want to delete the selected record(s)?');
}

3. Delete Button

The delete button triggers both client-side validation and the server-side delete function.

  
    <div class="delete-div tooltip deleteicon">
    <asp:ImageButton ID="Deletebtn" runat="server" 
        ImageUrl="~/Admin/images/delete.png"
        OnClientClick="return CheckBoxValidationAssign2();" 
        OnClick="Deletebtn_Click"
        CssClass="img-responsive" />
    <span class="tooltiptext">Delete</span>
</div>

4. Server-Side Deletion in ASP.NET

The backend C# code retrieves the selected checkbox values, calls a stored procedure, and confirms the deletion.

  
    protected void Deletebtn_Click(object sender, ImageClickEventArgs e)
{
    string chkUserId = (Request["chkSelect"] == null) ? "" : Request["chkSelect"].ToString();

    if (chkUserId != "")
    {
        try
        {
            SqlParameter[] param = {
                new SqlParameter("@pagename", "UCCmasterList"),
                new SqlParameter("@Type", "Delete"),
                new SqlParameter("@userIds", chkUserId),
                new SqlParameter("@Result", SqlDbType.Int) { Direction = ParameterDirection.Output }
            };

            int i = SqlHelper.ExecuteNonQuery(con, CommandType.StoredProcedure, "UCCmasterList", param);

            if (i > 0)
                ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('Record deleted successfully');", true);
            else
                ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('No records were deleted.');", true);
        }
        catch (Exception ex)
        {
            ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", $"alert('{ex.Message}');", true);
        }
    }
    else
    {
        ScriptManager.RegisterStartupScript(this.Page, typeof(string), "alert", "alert('No Items Selected.');", true);
    }

    BindGrid();
}

5. SQL Server Stored Procedure

Here’s the stored procedure ( UCCmasterList ) that handles deletion:

  
    CREATE PROCEDURE UCCmasterList
    @pagename NVARCHAR(50),
    @Type NVARCHAR(20),
    @userIds NVARCHAR(MAX)
AS
BEGIN
    SET NOCOUNT ON;

    IF (@Type = 'Delete')
    BEGIN
        DECLARE @sql NVARCHAR(MAX);

        SET @sql = N'DELETE FROM ' + QUOTENAME(@pagename) + 
                   ' WHERE srno IN (' + @userIds + ')';

        EXEC sp_executesql @sql;
    END
END

6. How It Works

The user selects single or multiple checkboxes in the GridView.
The JavaScript validates the selection before sending a delete request.
On the server-side, ASP.NET retrieves the selected record IDs.
The stored procedure executes the deletion query.
The page refreshes and rebinds data to show the updated list.

7. Key Benefits

Supports bulk deletion with one click
Uses parameterized stored procedures for better security
Provides client-side validation before server calls
Works with responsive and dynamic GridView

Conclusion

This approach provides a complete, secure, and user-friendly way to delete one or multiple records from a GridView in ASP.NET . It combines JavaScript interactivity with SQL Server efficiency, resulting in a fast and maintainable solution.