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