In this article I will explain with an example, how to perform CRUD operations i.e. Select, Insert, Edit, Update and Delete in ASP.Net Web Forms using C# and VB.Net.
 
 

Database

I have made use of the following table Customers with the schema as follow.
Simple CRUD operations in ASP.Net Web Forms using C# and VB.Net
 
I have already inserted few records in the table.
Simple CRUD operations in ASP.Net Web Forms using C# and VB.Net
 
Note: You can download the database table SQL by clicking the download link below.
           Download SQL file
 
 

HTML Markup

The following HTML Markup consists of:
ScriptManager - For enabling AJAX functions.
UpdatePanel – For refreshing the Web Page partially.
ContentTemplate – Defining the content of the UpdatePanel control.
GridView – For displaying data.

Columns

The GridView consists of two TemplateField columns and a CommandField column.
TemplateField – The TemplateField column consists of ItemTemplate and EditItemTemplate.
ItemTemplate – It consists of a Label.
EditItemTemplate – It consists of a TextBox.
 

Properties

DataKeyNames – For permitting to set the names of the Column Fields, that we want to use in code but do not want to display it.
Example: Primary Keys, ID fields, etc.
Note: For more details on DataKeys, please refer my article DataKeyNames in GridView example in ASP.Net.
 
PageSize – For permitting maximum number of rows to be displayed per page.
AllowPaging – For enabling paging in the GridView control.
EmptyDataText – For displaying text when there is no data in the GridView.
CommandField – For displaying buttons like Edit, Delete, or Select for each row in the GridView.
 

Events

The GridView has been assigned with the following event handlers i.e. OnRowDataBound, OnRowEditing, OnRowCancelingEdit, OnRowUpdating, OnPageIndexChanging and OnRowDeleting.
 
TextBox – For entering records to be added.
Button – For adding records.
The Button has been assigned with an OnClick event handler.
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<div id="dvGrid" style="padding:10px;width:450px">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"
                DataKeyNames="CustomerId" OnRowEditing="OnRowEditing" OnRowCancelingEdit="OnRowCancelingEdit"
                PageSize="3" AllowPaging="true" OnPageIndexChanging="OnPaging" OnRowUpdating="OnRowUpdating"
                OnRowDeleting="OnRowDeleting" EmptyDataText="No records has been added." Width="450">
                <Columns>
                    <asp:TemplateField HeaderText="Name" ItemStyle-Width="150">
                        <ItemTemplate>
                            <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name")%>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name")%>' Width="140"></asp:TextBox>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Country" ItemStyle-Width="150">
                        <ItemTemplate>
                            <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country")%>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtCountry" runat="server" Text='<%# Eval("Country")%>' Width="140"></asp:TextBox>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true"
                        ItemStyle-Width="150" />
                </Columns>
            </asp:GridView>
            <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
                <tr>
                    <td style="width:150px">Name:<br />
                        <asp:TextBox ID="txtName" runat="server" Width="140" />
                    </td>
                    <td style="width:150px">Country:<br />
                        <asp:TextBox ID="txtCountry" runat="server" Width="140" />
                    </td>
                    <td style="width:150px">
                        <asp:Button ID="btnAdd" runat="server" Text="Add" OnClick="Insert" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient; 
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient 
Imports System.Configuration
 
 

Binding the GridView with records from SQL Server Database Table

Inside the Page_Load event handler, the BindGrid method is called.
Inside the BindGrid method, first the connection string is read from the Web.Config file.
Note: For more details on how to read connection string from Web.Config file, please refer my article Read or Write Connection Strings in Web.Config file using ASP.Net using C# and VB.Net.
 
Then, the records are fetched from the Customers Table of SQL Server database using SqlDataAdapter and copied to DataTable object using Fill method.
Finally, the DataTable is assigned to the DataSource property of GridView and the GridView is populated.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    string sql = "SELECT CustomerId, Name, Country FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter(sql, con))
        {
            using (DataTable dt = new DataTable())
            {
                sda.Fill(dt);
                gvCustomers.DataSource  = dt;
                gvCustomers.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub
 
Private Sub BindGrid()
    Dim sql As String = "SELECT CustomerId, Name, Country FROM Customers"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter(sql, con)
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvCustomers.DataSource = dt
                gvCustomers.DataBind()
            End Using
        End Using
    End Using
End Sub
 
 

Inserting records to GridView

When the Add Button is clicked, the name and the country values are fetched from their respective TextBoxes and are inserted into the database.
Finally, the GridView is again populated using the BindGrid method which in-turn refreshes the GridView with updated records.
C#
protected void Insert(object sender, EventArgs e)
{
    string name = txtName.Text;
    string country = txtCountry.Text;
    txtName.Text  = "";
    txtCountry.Text  = "";
    string sql = "INSERT INTO Customers VALUES (@Name, @Country)";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Country", country);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    this.BindGrid();
}
 
VB.Net
Protected Sub Insert(sender As Object, e As EventArgs)
    Dim name As String = txtName.Text
    Dim country As String = txtCountry.Text
    Dim sql As String = "INSERT INTOCustomers(Name, Country) VALUES (@Name, @Country)"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    txtName.Text = ""
    txtCountry.Text = ""
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@Name", name)
            cmd.Parameters.AddWithValue("@Country", country)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
 
    Me.BindGrid()
End Sub
 
 

Edit

When the Edit Button is clicked, the GridView’s OnRowEditing event handler is triggered, where the EditIndex of the GridView is updated with the Row Index of the GridView Row to be edited.
C#
protected void OnRowEditing(object sender, GridViewEditEventArgs e)
{
    gvCustomers.EditIndex = e.NewEditIndex;
    this.BindGrid();
}
 
VB.Net
Protected Sub OnRowEditing(sender As Object, e As GridViewEditEventArgs)
    gvCustomers.EditIndex = e.NewEditIndex
    Me.BindGrid()
End Sub
 
 

Update

When the Update Button is clicked, the GridView’s OnRowUpdating event handler is triggered.
Inside the OnRowUpdating event handler, the CustomerId (primary key) is fetched from the DataKey property of GridView while the Name and Country fields are fetched from their respective TextBoxes and the record is updated in the database.
Finally, the GridView is populated using the BindGrid method which in-turn refreshes the GridView with updated records.
C#
protected void OnRowUpdating(object sender, GridViewUpdateEventArgs e)
{
    GridViewRow row = gvCustomers.Rows[e.RowIndex];
    int customerId = Convert.ToInt32(gvCustomers.DataKeys[e.RowIndex].Values[0]);
    string name = (row.FindControl("txtName") as TextBox).Text;
    string country = (row.FindControl("txtCountry") as TextBox).Text;
    string sql = "UPDATE Customers SET Name=@Name, Country=@Country WHERE CustomerId=@CustomerId";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@CustomerId",customerId);
            cmd.Parameters.AddWithValue("@Name", name);
            cmd.Parameters.AddWithValue("@Country", country);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
    gvCustomers.EditIndex = -1;
    this.BindGrid();
}
 
VB.Net
Protected Sub OnRowUpdating(sender As Object, e As GridViewUpdateEventArgs)
    Dim row As GridViewRow = gvCustomers.Rows(e.RowIndex)
    Dim customerId As Integer = Convert.ToInt32(gvCustomers.DataKeys(e.RowIndex).Values(0))
    Dim name As String = (TryCast(row.FindControl("txtName"), TextBox)).Text
    Dim country As String = (TryCast(row.FindControl("txtCountry"), TextBox)).Text
    Dim sql As String = "UPDATE Customers SET Name=@Name, Country=@Country WHERE CustomerId=@CustomerId"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using  cmd As SqlCommand = New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@CustomerId", customerId)
            cmd.Parameters.AddWithValue("@Name", name)
            cmd.Parameters.AddWithValue("@Country", country)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
 
    gvCustomers.EditIndex = -1
    Me.BindGrid()
End Sub
 
 

Cancel Edit

When the Cancel Button is clicked, the GridView’s OnRowCancelingEdit event handler is triggered and the EditIndex is set to -1 and the GridView is populated with data using the BindGrid method.
C#
protected void OnRowCancelingEdit(object sender, EventArgs e)
{
    gvCustomers.EditIndex = -1;
    this.BindGrid();
}
 
VB.Net
Protected Sub OnRowCancelingEdit(sender As Object, e As EventArgs)
    gvCustomers.EditIndex = -1
    Me.BindGrid()
End Sub
 
 

Delete

When the Delete Button is clicked, the GridView’s OnRowDeleting event handler is triggered.
Inside the OnRowDeleting event handler, the CustomerId (primary key) is fetched from the DataKey property of GridView and the record is deleted from the database.
Finally, the GridView is populated using the BindGrid method which in-turn refreshes the GridView with updated records.
C#
protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
{
    string sql = "DELETE FROM Customers WHERE CustomerId=@CustomerId";
    int customerId  = Convert.ToInt32(gvCustomers.DataKeys[e.RowIndex].Values[0]);
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@CustomerId", customerId);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
 
    this.BindGrid();
}
 
VB.Net
Protected Sub OnRowDeleting(sender As Object, e As GridViewDeleteEventArgs)
    Dim customerId As Integer = Convert.ToInt32(gvCustomers.DataKeys(e.RowIndex).Values(0))
    Dim sql As String = "DELETE FROM Customers WHERE CustomerId=@CustomerId"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@CustomerId", customerId)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
 
    Me.BindGrid()
End Sub
 
 

Delete Confirmation Message

The delete operation will be confirmed using JavaScript Confirmation Box, thus inside the OnRowDataBound event handler, the Delete LinkButton is assigned with a JavaScript onclick event handler.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex != gvCustomers.EditIndex)
    {
        (e.Row.Cells[2].Controls[2] as LinkButton).Attributes["onclick"] = "return confirm('Do you want to delete this row?');";
    }
}
 
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow AndAlso e.Row.RowIndex <> gvCustomers.EditIndex Then
        CType(e.Row.Cells(2).Controls(2),LinkButton).Attributes("onclick") = "return confirm('Do you want to delete this row?');"
    End If
End Sub
 
 

Paging

The OnPageIndexChanging event handler is triggered when a Page Number is clicked. Here, the PageIndex property of the GridView is updated.
Finally, the GridView is again populated with data by making call to the BindGrid method.
C#
Protected Sub OnPaging(sender As Object, e As GridViewPageEventArgs)
    gvCustomers.PageIndex = e.NewPageIndex
    Me.BindGrid()
End Sub
 
VB.Net
Protected Sub OnPaging(sender As Object, e As GridViewPageEventArgs)
    gvCustomers.PageIndex = e.NewPageIndex
    Me.BindGrid()
End Sub
 
 

Displaying AJAX Loader during Add, Edit, Update, Delete and Paging operations

The jQuery BlockUI Plugin has been applied to the dvGrid HTML DIV. When the ASP.Net AJAX UpdatePanel makes a request, the HTML DIV is blocked and an animation is displayed.
When the request is completed, the HTML DIV is unblocked and the animation is hidden.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
    $(function () {
        BlockUI("dvGrid");
        $.blockUI.defaults.css = {};
    });
    function BlockUI(elementID) {
        var prm  = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(function () {
            $("#"+elementID).block({
                 message:'<div align = "center">' + '<img data-src="images/loadingAnim.gif"/></div>',
                css: {},
                overlayCSS: {backgroundColor:'#000000', opacity: 0.6, border:'3px solid #63B2EB' }
            });
        });
        prm.add_endRequest(function () {
            $("#"+elementID).unblock();
        });
    };
</script>
 
 

Screenshot

Simple CRUD operations in ASP.Net Web Forms using C# and VB.Net
 
 

Downloads

Download Code