CRUD Operation Using 3-Tier Architecture In ASP.NET With jQuery Validation

Step 1 
 
Create a table, as shown below.
 
 
 
Step 2
 
Create a stored procedure for crud opeartion, as shown below.
 
i) Insert stored procedure. 
  1. Create procedure sp_insert(@Name nvarchar(50),@Address nvarchar(50),@EmailID nvarchar(50),@Mobilenumber nvarchar(50))  
  2. as  
  3. begin  
  4. insert into Userinfo (Name,Address,EmailID,Mobilenumber) values (@Name,@Address,@EmailID,@Mobilenumber)  
  5. end  
 
ii) Delete stored procedure.
  1. create procedure sp_Delete(@userid int)  
  2. as  
  3. begin  
  4. delete Userinfo where userid=@userid  
  5. end  
iii) Update stored procedure.
  1. create procedure UP_UserInfo (@userid int,@name nvarchar(50),@EmailID nvarchar(50),@Address nvarchar(50),@Mobilenumber nvarchar(50))  
  2. as  
  3. begin  
  4. update UserInfo set Name=@name ,EmailID=@EmailID,Address=@Address, Mobilenumber=@Mobilenumber where userid=@userid  
  5. return  
  6. end
iv) Delete stored procedure.
  1. create procedure sp_GetDall  
  2. as  
  3. begin  
  4. select *from Userinfo  
  5. end  
Step 3 
 
First we have to create empty solution for 3 tier architecture for the best practices.

 
Step 4 
 
Afterwards, right click on Solution1, choose add properties and select new project and subsequently choose Class Library, give the proper name for that class Library like DataAccessLayer.
 
 
Step 5 
 
Afterwards, you will see ClassLibrary and with Class1.cs, we can rename like DA. It is optional.
 
 
Step 6 
 
Create BusinessLogic and BusinessEntities class library as above.
 
Step 7 
 
In BusinessEntites class library, create a class BEL which is defined, as shown below.
 
 
Step 8
 
Create another class library like DataAccessLayer and in that make a new class like DAL. After that right click on Reference and add BusinessEntitiesLayer and write below code for DataAccess crud operation.
  1. using BusinessEntitierLayer;  
  2. namespace DataAccessLayer  
  3. {  
  4. public class DAL  
  5. {  
  6. SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ToString());  
  7. SqlCommand cmd;  
  8. public bool Register(BEL be)  
  9. {  
  10. bool status = false;  
  11. cmd = new SqlCommand("sp_insert", con);  
  12. cmd.CommandType = CommandType.StoredProcedure;  
  13. cmd.Parameters.AddWithValue("@Name",be.Name);  
  14. cmd.Parameters.AddWithValue("@Address", be.Address);  
  15. cmd.Parameters.AddWithValue("@EmailID", be.EmailID);  
  16. cmd.Parameters.AddWithValue("@Mobilenumber", be.Mobilenumber);  
  17. con.Open();  
  18. int res = cmd.ExecuteNonQuery();  
  19. con.Close();  
  20. if(res>0)  
  21. {  
  22. status = true;  
  23. }  
  24. return status;  
  25. }  
  26. public DataTable GetData()  
  27. {  
  28. cmd = new SqlCommand("sp_GetDall", con);  
  29. cmd.CommandType = CommandType.StoredProcedure;  
  30. SqlDataAdapter da = new SqlDataAdapter(cmd);  
  31. DataTable dt = new DataTable();  
  32. da.Fill(dt);  
  33. return dt;  
  34. }  
  35. public void Update(string name, string email, string address, string mobile,int id)  
  36. {  
  37. cmd = new SqlCommand("UP_UserInfo", con);  
  38. cmd.CommandType = CommandType.StoredProcedure;  
  39. cmd.Parameters.AddWithValue("@Name"name);  
  40. cmd.Parameters.AddWithValue("@Address",address);  
  41. cmd.Parameters.AddWithValue("@EmailID",email);  
  42. cmd.Parameters.AddWithValue("@Mobilenumber",mobile);  
  43. cmd.Parameters.AddWithValue("@userid", id);  
  44. con.Open();  
  45. int i = cmd.ExecuteNonQuery();  
  46. con.Close();  
  47. }  
  48. public void Delete(int id)  
  49. {  
  50. cmd = new SqlCommand("sp_Delete", con);  
  51. cmd.CommandType = CommandType.StoredProcedure;  
  52. cmd.Parameters.AddWithValue("@userid", id);  
  53. con.Open();  
  54. int i = cmd.ExecuteNonQuery();  
  55. con.Close();  
  56. }  
  57. }  
  58. }  
Step 9 
 
Create another class library like BusinessLogicLayer and in that make a new class like BAL. After that right click on Reference and add BusinessEntitiesLayer and DataAccessLayer and write below code for Logic crud operation.
  1. using BusinessEntitierLayer;  
  2. using DataAccessLayer;  
  3. namespace BusinessAccessLayer  
  4. {  
  5. public class BAL  
  6. {  
  7. DAL da = new DAL();  
  8. public bool Register(BEL be)  
  9. {  
  10. bool status = false;  
  11. da.Register(be);  
  12. return status;  
  13. }  
  14. public DataTable GetData()  
  15. {  
  16. return da.GetData();  
  17. }  
  18. public void Delete(int id)  
  19. {  
  20. da.Delete(id);  
  21. }  
  22. public void Update(string name, string email, string address, string mobile, int id)  
  23. {  
  24. da.Update(name,email,address, mobile, id);  
  25. }  
  26. }  
  27. }  
Step 10
 
Afterwards, again right click on Solution and create a new ASP.NET project for PresentationLogic.
 
 
Step 11
 
Afterwards, right click on reference and choose BusinessLogic and BussinessEntities Layers. Also create a new webform.aspx page and jQuery validation.js with bootstrap.css.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="_3TierArchi.index" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title></title>  
  6. <link href="css/bootstrap.min.css" rel="stylesheet" />  
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"  
  8. type="text/javascript"></script>  
  9. <!--include jQuery Validation Plugin-->  
  10. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"  
  11. type="text/javascript"></script>  
  12. <style type="text/css">  
  13. label.error {  
  14. color: red;  
  15. display: block;  
  16. }  
  17. </style>  
  18. <script type="text/javascript">  
  19. $(document).ready(function () {  
  20. $("#form1").validate({  
  21. rules: {  
  22. <%=TextBox1.UniqueID %>:{  
  23. required:true,  
  24. minlength:5  
  25. },  
  26. <%=TextBox2.UniqueID %>:{  
  27. required:true,  
  28. minlength:5  
  29. },  
  30. <%=TextBox3.UniqueID %>:{  
  31. required:true,  
  32. email:true  
  33. },  
  34. <%=TextBox4.UniqueID %>:{  
  35. required:true,  
  36. minlength:10  
  37. },  
  38. },  
  39. messages: {  
  40. <%=TextBox1.UniqueID %>:{  
  41. required: "Name is required.",  
  42. minlength:"Name should be minimum 5 characters only!!"  
  43. },  
  44. <%=TextBox2.UniqueID %>:{  
  45. required: "Address is required.",  
  46. minlength:"Name should be minimum 5 characters only!!"  
  47. },  
  48. <%=TextBox3.UniqueID %>:{  
  49. required: "Email ID is required." ,  
  50. email:"EmailD is not Valid"  
  51. },  
  52. <%=TextBox4.UniqueID %>:{  
  53. required: "Phone number is required.",  
  54. minlength:"Digit should be minimum 10 characters only!!"  
  55. },  
  56. },  
  57. });  
  58. });  
  59. </script>  
  60. </head>  
  61. <body>  
  62. <form id="form1" runat="server">  
  63. <div class="container">  
  64. <div class="row">  
  65. <div class="col-lg-4">  
  66. <div class="panel panel-success">  
  67. <div class="panel-heading">Form</div>  
  68. <div class="panel-body">  
  69. <label>Name</label>  
  70. <asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Name"></asp:TextBox>  
  71. <label>Address</label>  
  72. <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" placeholder="Address"></asp:TextBox>  
  73. <label>Email ID</label>  
  74. <asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" placeholder="Email ID"> </asp:TextBox>  
  75. <label>Mobile</label>  
  76. <asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" placeholder="Phone Number"></asp:TextBox>  
  77. <br />  
  78. <asp:Button ID="Button1" runat="server" CssClass="btn btn-block btn-success" Text="Submit" OnClick="Button1_Click" />  
  79. </div>  
  80. </div>  
  81. </div>  
  82. <div class="col-lg-8">  
  83. <asp:GridView ID="GridView1" CssClass=" table table-bordered " runat="server" AutoGenerateColumns="False" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" DataKeyNames="userid" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">  
  84. <Columns>  
  85. <asp:TemplateField HeaderText="Name">  
  86. <EditItemTemplate>  
  87. <asp:TextBox ID="TextBox5" runat="server" Text='<%#Bind("Name") %>'></asp:TextBox>  
  88. </EditItemTemplate>  
  89. <ItemTemplate>  
  90. <asp:Label ID="Label1" runat="server" Text='<%#Bind("Name") %>'></asp:Label>  
  91. </ItemTemplate>  
  92. </asp:TemplateField>  
  93. <asp:TemplateField HeaderText="Address">  
  94. <EditItemTemplate>  
  95. <asp:TextBox ID="TextBox6" runat="server" Text='<%#Bind("Address") %>'></asp:TextBox></EditItemTemplate>  
  96. <ItemTemplate>  
  97. <asp:Label ID="Label2" runat="server" Text='<%#Bind("Address") %>'></asp:Label></ItemTemplate>  
  98. </asp:TemplateField>  
  99. <asp:TemplateField HeaderText="EmailID">  
  100. <EditItemTemplate>  
  101. <asp:TextBox ID="TextBox7" runat="server" Text='<%#Bind("EmailID") %>'></asp:TextBox></EditItemTemplate>  
  102. <ItemTemplate>  
  103. <asp:Label ID="Label3" runat="server" Text='<%#Bind("EmailID") %>'></asp:Label></ItemTemplate>  
  104. </asp:TemplateField>  
  105. <asp:TemplateField HeaderText="Mobilenumber">  
  106. <EditItemTemplate>  
  107. <asp:TextBox ID="TextBox8" runat="server" Text='<%#Bind("Mobilenumber") %>'></asp:TextBox></EditItemTemplate>  
  108. <ItemTemplate>  
  109. <asp:Label ID="Label4" runat="server" Text='<%#Bind("Mobilenumber") %>'></asp:Label></ItemTemplate>  
  110. </asp:TemplateField>  
  111. </Columns>  
  112. </asp:GridView>  
  113. </div>  
  114. </div>  
  115. </div>  
  116. </form>  
  117. </body>  
  118. </html>  
Step 12 
 
Now, add the code at the backend, which is given below into webform.aspx.cs.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using BusinessAccessLayer;  
  8. using BusinessEntitierLayer;  
  9. namespace _3TierArchi  
  10. {  
  11. public partial class index : System.Web.UI.Page  
  12. {  
  13. BAL bal = new BAL();  
  14. BEL bel = new BEL();  
  15. protected void Page_Load(object sender, EventArgs e)  
  16. {  
  17. if (!Page.IsPostBack)  
  18. {  
  19. RefreshData();  
  20. }  
  21. }  
  22. public void RefreshData()  
  23. {  
  24. GridView1.DataSource = bal.GetData();  
  25. GridView1.DataBind();  
  26. }  
  27. protected void Button1_Click(object sender, EventArgs e)  
  28. {  
  29. bel.Name = TextBox1.Text;  
  30. bel.Address = TextBox2.Text;  
  31. bel.EmailID = TextBox3.Text;  
  32. bel.Mobilenumber = TextBox4.Text;  
  33. bool status = bal.Register(bel);  
  34. TextBox1.Text = TextBox2.Text = TextBox3.Text = TextBox4.Text = "";  
  35. RefreshData();  
  36. }  
  37. protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)  
  38. {  
  39. int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["userid"].ToString());  
  40. bal.Delete(id);  
  41. RefreshData();  
  42. }  
  43. protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)  
  44. {  
  45. int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["userid"].ToString());  
  46. TextBox txtname = GridView1.Rows[e.RowIndex].FindControl("TextBox5"as TextBox;  
  47. TextBox txtaddr = GridView1.Rows[e.RowIndex].FindControl("TextBox6"as TextBox;  
  48. TextBox txtemil = GridView1.Rows[e.RowIndex].FindControl("TextBox7"as TextBox;  
  49. TextBox txtphone = GridView1.Rows[e.RowIndex].FindControl("TextBox8"as TextBox;  
  50. bal.Update(txtname.Text, txtaddr.Text, txtemil.Text, txtphone.Text,id);  
  51. GridView1.EditIndex = -1;  
  52. RefreshData();  
  53. }  
  54. protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)  
  55. {  
  56. GridView1.EditIndex = e.NewEditIndex;  
  57. RefreshData();  
  58. }  
  59. protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)  
  60. {  
  61. GridView1.EditIndex = -1;  
  62. RefreshData();  
  63. }  
  64. }  
  65. }
Step 13 
 
Run the Application and click submit button; where you will see jQuery validation. 
 
 
Step 14 
 
The output you will see like with jQuery Validations
 
Ebook Download
View all
Learn
View all