How to Bind and Perform Update, Edit, Delete Operation on DataList Control in 3 Tier in ASP.Net

This article shows how to bind and perform edit, update, and delete operations on a Datalist Control in 3 tiers in ASP.NET using C#.

Initial chamber

Step 1. Open Visual Studio 2010 and create an Empty Website, giving it a suitable name (DataList_demo).

Step 2. In Solution Explorer, you will get your empty website. Add a web form, SQL Database, and 3 class files as in the following.

For web form

DataList_demo (your empty website), right-click and Add New Item, Web Form. Name it datalist_demo.aspx.

For SQL Server Database

DataList_demo (your empty website), right-click and Add New Item, SQL Server Database (Add the database inside the App_Data_folder).

For 3 Class Files

DataList_demo (your empty website), right-click and Add New Item, Class (add 3 class files, add your class file in the App_code folder), they provide the names as:

Common functions.cs
BAL_user_operation.cs
DAL_user_operation.cs

Database chamber

Step 3. In Server Explorer, click on your database (Database.mdf), Tables, and Add New Table. Make the table as in the following:

Table, tbl_data (Don't Forget to make ID as IS Identity -- True).
Add a Stored Procedure to edit, update, insert, and delete data by going to the database (Database.mdf), Store Procedures, and right-click, then add some new Stored Procedures as in the following.
sp_getdata()
sp_insert()
sp_update()
sp_delete()
These are all the Stored Procedures that we will use for updating, deleting, and editing our data in the DataList.

Design code

Step 4. It's time for the serious design in the DataList. Let's begin by opening your Datalist.aspx page and try the code as in the following.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 75px;
        }
        .style3
        {
            width: 82px;
        }
        .style4
        {
            width: 234px;
        }
        .style5
        {
            width: 19px;
        }
        .style6
        {
            text-decoration: underline;
            font-size: large;
            color: #3333CC;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <table style="width:100%;">
        <caption class="style6">
            <strong>DataList Control in Asp.Net</strong></caption>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
                 </td>
            <td>
                 </td>
        </tr>
        <tr>
            <td>
                 </td>
            <td>
    <asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84"    
        BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"    
        CellSpacing="2" DataKeyField="id" GridLines="Both"    
        oncancelcommand="DataList1_CancelCommand"    
        ondeletecommand="DataList1_DeleteCommand" oneditcommand="DataList1_EditCommand"    
        onupdatecommand="DataList1_UpdateCommand" RepeatDirection="Horizontal">
        <EditItemTemplate>
            <table style="width:100%;">
                <tr>
                    <td class="style1">
                          </td>
                    <td class="style3">
                          </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                          </td>
                    <td class="style3">
                          </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                        Name:</td>
                    <td class="style3">
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                        Email:</td>
                    <td class="style3">
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("email") %>'></asp:TextBox>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                        Designation:</td>
                    <td class="style3">
                        <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("designation") %>'></asp:TextBox>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                        City:</td>
                    <td class="style3">
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("city") %>'></asp:TextBox>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                          </td>
                    <td class="style3">
                          </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style1">
                        <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update">Update</asp:LinkButton>
                    </td>
                    <td class="style3">
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel">Cancel</asp:LinkButton>
                    </td>
                    <td>
                          </td>
                </tr>
            </table>
        </EditItemTemplate>
        <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        <ItemStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
        <ItemTemplate>
            <table style="width:100%;">
                <tr>
                    <td class="style4">
                          </td>
                    <td class="style5">
                          </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                        <asp:Image ID="Image1" runat="server" BackColor="#FF99FF" BorderColor="#993399"    
                            Height="191px" ImageAlign="AbsBottom" ImageUrl='<%# Bind("pic") %>'    
                            Width="199px" />
                    </td>
                </tr>
                <tr>
                    <td class="style4">
                        Name:</td>
                    <td class="style5">
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                        Email:</td>
                    <td class="style5">
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("email") %>'></asp:Label>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                        Designation</td>
                    <td class="style5">
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("designation") %>'></asp:Label>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                        City:</td>
                    <td class="style5">
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("city") %>'></asp:Label>
                    </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                          </td>
                    <td class="style5">
                          </td>
                    <td>
                          </td>
                </tr>
                <tr>
                    <td class="style4">
                        <asp:LinkButton ID="LinkButton3" CommandName="Edit" runat="server">Edit</asp:LinkButton>
                    </td>
                    <td class="style5">
                        <asp:LinkButton ID="LinkButton4"  CommandName="Delete" runat="server">Delete</asp:LinkButton>
                    </td>
                    <td>
                          </td>
                </tr>
            </table>
        </ItemTemplate>
        <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    </asp:DataList>
            </td>
           
        </tr>
    </table>
    </form>
</body>
</html>

Or you can do it manually like this.

Drag your Datalist from the toolbox to the design page.
Click on the arrow sign of the Datalist; you will enter into the Edit Template.
Now in the DataList Task, there is a dropdown. From there, select Item Template.
In the Item Template, drag an HTML table.
Inside the table, drag an Image Control, 4 labels, and 2 Hyperlinks.
Design like the following.

Now you need to click the arrow sign of the Image Control and click on Edit DataBindings.

DataBindings

Here click on the ImageUrl and bind your Image URL by giving Bind(“pic”) in the code expression as in the preceding figure. In the same way, we can do it for all the labels.

Label Name
Label Email
Label Designation
Label City

Now return to the Edit template of the Datalist select Edit Item Template and make the design like the following.

Edit template

For binding to the TextBox I will show you the binding for Textbox1 (TextBox for Name:).

bind

Similarly do it for all the textboxes (email, designation, and city).

Code chamber

Open the Commonfunction.cs file and add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
/// <summary>
/// Summary description for Commonfunctions
/// </summary>
public class Commonfunctions
{
    public Commonfunctions()
    {
        // 
        // TODO: Add constructor logic here
        // 
    }
    public static string getconstring()
    {
        return ConfigurationManager.ConnectionStrings["dbcon"].ToString();
    }
}

The preceding code is written for a SQL Connection String that we need to call again and again by going to the database property. This is a lengthy process, that's why we made this class and now we will just call its method getconstring() which makes our process shorter and easier.

Open the DAL_user_operation.cs file and code it like the following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
/// <summary>
/// Summary description for DAL_user_operation
/// </summary>
public class DAL_user_operation
{
    public DAL_user_operation()
    {
        // 
        // TODO: Add constructor logic here
        // 
    }
    // Inserting Code
    public bool user_insert(string name, string email, string designation, string city, string pic)
    {
        SqlConnection con = new SqlConnection(Commonfunctions.getconstring());
        SqlCommand cmd = new SqlCommand("sp_insert", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("name", name);
        cmd.Parameters.AddWithValue("email", email);
        cmd.Parameters.AddWithValue("designation", designation);
        cmd.Parameters.AddWithValue("city", city);
        cmd.Parameters.AddWithValue("pic", pic);
        con.Open();
        int i = cmd.ExecuteNonQuery();
        con.Close();
        if (i != 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    // Delete Code
    public void user_delete(int id)
    {
        SqlConnection con = new SqlConnection(Commonfunctions.getconstring());
        SqlCommand cmd = new SqlCommand("sp_delete", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("id", id);
        con.Open();
        int i = cmd.ExecuteNonQuery();
        con.Close();
    }
    // Update Code
    public void user_update(string name, string email, string designation, string city, int id)
    {
        SqlConnection con = new SqlConnection(Commonfunctions.getconstring());
        SqlCommand cmd = new SqlCommand("sp_update", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("name", name);
        cmd.Parameters.AddWithValue("email", email);
        cmd.Parameters.AddWithValue("designation", designation);
        cmd.Parameters.AddWithValue("city", city);
        cmd.Parameters.AddWithValue("id", id);
        con.Open();
        int i = cmd.ExecuteNonQuery();
        con.Close();   
    }
    public DataTable getdata()
    {
        SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
        SqlCommand cmd = new SqlCommand("sp_getdata", con);
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        return dt;
    }
}

Open your BAL_user_operation.cs file and code it like the following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
/// <summary>
/// Summary description for BAL_user_operation
/// </summary>
public class BAL_user_operation
{
    DAL_user_operation du = new DAL_user_operation();
    public BAL_user_operation()
    {
        // 
        // TODO: Add constructor logic here
        // 
    }
    public bool user_insert(string name, string email, string designation, string city, string pic)
    {
       return du.user_insert(name, email, designation, city, pic);     
    }
    public void user_delete(int id)
    {
        du.user_delete(id);
    }
    public void user_update(string name, string email, string designation,  string city, int id)
    {
        du.user_update(name, email, designation, city, id);   
    }
    public DataTable getdata()
    {
        return du.getdata();
    }
}

Finally, open the DataList.aspx.cs file and code it like the following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    BAL_user_operation bu = new BAL_user_operation();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            refreshdata();
        }

    }
    public void refreshdata()
    {
        DataList1.DataSource = bu.getdata();
        DataList1.DataBind();
    }
    protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
    {
        DataList1.EditItemIndex = -1;
        refreshdata();
    }
    protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
    {
        int id = Convert.ToInt16(DataList1.DataKeys[e.Item.ItemIndex].ToString());
        bu.user_delete(id);
        refreshdata();
    }
    protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
    {
        DataList1.EditItemIndex = e.Item.ItemIndex;
        refreshdata();
    }
    protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
    {
        TextBox txtname = DataList1.Items[e.Item.ItemIndex].FindControl("TextBox1") as TextBox;
        TextBox txtemail = DataList1.Items[e.Item.ItemIndex].FindControl("TextBox3") as TextBox;
        TextBox txtdesignation = DataList1.Items[e.Item.ItemIndex].FindControl("TextBox4") as TextBox;
        TextBox txtcity = DataList1.Items[e.Item.ItemIndex].FindControl("TextBox2") as TextBox;
        int id = int.Parse(DataList1.DataKeys[e.Item.ItemIndex].ToString());
        bu.user_update(txtname.Text, txtemail.Text, txtdesignation.Text, txtcity.Text, id);
        DataList1.EditItemIndex = -1;
        refreshdata();
    }
}

This is your web.config file code.

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <connectionStrings>
    <add name="dbcon" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"/>
  </connectionStrings>
</configuration>

Output chamber

Output Chamber

data list control

I hope you will like this. Thank you for reading.

Have a nice day.

15 Comments

Join the conversation! Your thoughts help the community grow.

Arul R11y ago
Nice share!!!
Jaipal Reddy11y ago
Nice one Nilesh.
- Nilesh Jadav11y ago
  Thanks Jaipal
Abdul Momin Tasleem Ansari11y ago
Nice Post...
- Nilesh Jadav11y ago
  Thank you
Amol Sarkate11y ago
nice
- Nilesh Jadav11y ago
  Thank you
Nitin11y ago
nice
- Nilesh Jadav11y ago
  Thanks
Saineshwar Bageri11y ago
Going good
- Nilesh Jadav11y ago
  yeah sort of ! thank you for comment !
Rakesh11y ago
Good explain Nilesh
- Nilesh Jadav11y ago
  Thank you :)
Santhakumar Munuswamy11y ago
Thanks for nice one
- Nilesh Jadav11y ago
  Thanks :)