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

CRUD (Create, Read, Update, Delete ) operation by 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. 

Create procedure sp_insert(@Name nvarchar(50),@Address nvarchar(50),@EmailID nvarchar(50),@Mobilenumber nvarchar(50))
as
begin
insert into Userinfo (Name,Address,EmailID,Mobilenumber) values (@Name,@Address,@EmailID,@Mobilenumber)
end

 

ii) Delete stored procedure.

create procedure sp_Delete(@userid int)
as
begin
delete Userinfo where userid=@userid
end

iii) Update stored procedure.

create procedure UP_UserInfo (@userid int,@name nvarchar(50),@EmailID nvarchar(50),@Address nvarchar(50),@Mobilenumber nvarchar(50))
as
begin
update UserInfo set Name=@name ,EmailID=@EmailID,Address=@Address, Mobilenumber=@Mobilenumber where userid=@userid
return
end

iv) Delete stored procedure.

create procedure sp_GetDall
as
begin
select *from Userinfo
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.

using BusinessEntitierLayer;
namespace DataAccessLayer
{
public class DAL
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ToString());
SqlCommand cmd;
public bool Register(BEL be)
{
bool status = false;
cmd = new SqlCommand("sp_insert", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name",be.Name);
cmd.Parameters.AddWithValue("@Address", be.Address);
cmd.Parameters.AddWithValue("@EmailID", be.EmailID);
cmd.Parameters.AddWithValue("@Mobilenumber", be.Mobilenumber);
con.Open();
int res = cmd.ExecuteNonQuery();
con.Close();
if(res>0)
{
status = true;
}
return status;
}
public DataTable GetData()
{
cmd = new SqlCommand("sp_GetDall", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
public void Update(string name, string email, string address, string mobile,int id)
{
cmd = new SqlCommand("UP_UserInfo", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.AddWithValue("@Address",address);
cmd.Parameters.AddWithValue("@EmailID",email);
cmd.Parameters.AddWithValue("@Mobilenumber",mobile);
cmd.Parameters.AddWithValue("@userid", id);
con.Open();
int i = cmd.ExecuteNonQuery();
con.Close();
}
public void Delete(int id)
{
cmd = new SqlCommand("sp_Delete", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@userid", id);
con.Open();
int i = cmd.ExecuteNonQuery();
con.Close();
}
}
}

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.

using BusinessEntitierLayer;
using DataAccessLayer;
namespace BusinessAccessLayer
{
public class BAL
{
DAL da = new DAL();
public bool Register(BEL be)
{
bool status = false;
da.Register(be);
return status;
}
public DataTable GetData()
{
return da.GetData();
}
public void Delete(int id)
{
da.Delete(id);
}
public void Update(string name, string email, string address, string mobile, int id)
{
da.Update(name,email,address, mobile, id);
}
}
}

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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="_3TierArchi.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
type="text/javascript"></script>
<!--include jQuery Validation Plugin-->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<style type="text/css">
label.error {
color: red;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate({
rules: {
<%=TextBox1.UniqueID %>:{
required:true,
minlength:5
},
<%=TextBox2.UniqueID %>:{
required:true,
minlength:5
},
<%=TextBox3.UniqueID %>:{
required:true,
email:true
},
<%=TextBox4.UniqueID %>:{
required:true,
minlength:10
},
},
messages: {
<%=TextBox1.UniqueID %>:{
required: "Name is required.",
minlength:"Name should be minimum 5 characters only!!"
},
<%=TextBox2.UniqueID %>:{
required: "Address is required.",
minlength:"Name should be minimum 5 characters only!!"
},
<%=TextBox3.UniqueID %>:{
required: "Email ID is required." ,
email:"EmailD is not Valid"
},
<%=TextBox4.UniqueID %>:{
required: "Phone number is required.",
minlength:"Digit should be minimum 10 characters only!!"
},
},
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="panel panel-success">
<div class="panel-heading">Form</div>
<div class="panel-body">
<label>Name</label>
<asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Name"></asp:TextBox>
<label>Address</label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" placeholder="Address"></asp:TextBox>
<label>Email ID</label>
<asp:TextBox ID="TextBox3" runat="server" CssClass="form-control" placeholder="Email ID"> </asp:TextBox>
<label>Mobile</label>
<asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" placeholder="Phone Number"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" CssClass="btn btn-block btn-success" Text="Submit" OnClick="Button1_Click" />
</div>
</div>
</div>
<div class="col-lg-8">
<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">
<Columns>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%#Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%#Bind("Address") %>'></asp:TextBox></EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#Bind("Address") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EmailID">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%#Bind("EmailID") %>'></asp:TextBox></EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#Bind("EmailID") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobilenumber">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%#Bind("Mobilenumber") %>'></asp:TextBox></EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%#Bind("Mobilenumber") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
</form>
</body>
</html>

Step 12 

 

Now, add the code at the backend, which is given below into webform.aspx.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BusinessAccessLayer;
using BusinessEntitierLayer;
namespace _3TierArchi
{
public partial class index : System.Web.UI.Page
{
BAL bal = new BAL();
BEL bel = new BEL();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
RefreshData();
}
}
public void RefreshData()
{
GridView1.DataSource = bal.GetData();
GridView1.DataBind();
}
protected void Button1_Click(object sender, EventArgs e)
{
bel.Name = TextBox1.Text;
bel.Address = TextBox2.Text;
bel.EmailID = TextBox3.Text;
bel.Mobilenumber = TextBox4.Text;
bool status = bal.Register(bel);
TextBox1.Text = TextBox2.Text = TextBox3.Text = TextBox4.Text = "";
RefreshData();
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["userid"].ToString());
bal.Delete(id);
RefreshData();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int id = Convert.ToInt16(GridView1.DataKeys[e.RowIndex].Values["userid"].ToString());
TextBox txtname = GridView1.Rows[e.RowIndex].FindControl("TextBox5") as TextBox;
TextBox txtaddr = GridView1.Rows[e.RowIndex].FindControl("TextBox6") as TextBox;
TextBox txtemil = GridView1.Rows[e.RowIndex].FindControl("TextBox7") as TextBox;
TextBox txtphone = GridView1.Rows[e.RowIndex].FindControl("TextBox8") as TextBox;
bal.Update(txtname.Text, txtaddr.Text, txtemil.Text, txtphone.Text,id);
GridView1.EditIndex = -1;
RefreshData();
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
RefreshData();
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
GridView1.EditIndex = -1;
RefreshData();
}
}
}

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