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, give 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:
- Commonfunctions.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:
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.
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 and select Edit Item Template and make the design like the following:
For binding to the TextBox I will show you the binding for Textbox1 (TextBox for Name:).
In a similar way 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;
-
-
-
- public class Commonfunctions
- {
- public Commonfunctions()
- {
-
-
-
- }
- 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 had made this class and now we will just call its method getconstring() that 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;
-
-
-
-
- public class DAL_user_operation
- {
- public DAL_user_operation()
- {
-
-
-
- }
-
- 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;
- }
- }
-
-
- 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();
- }
-
-
-
- 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;
-
-
-
-
- public class BAL_user_operation
- {
- DAL_user_operation du = new DAL_user_operation();
- public BAL_user_operation()
- {
-
-
-
- }
- 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
I hope you will like this. Thank you for reading.
Have a nice day.