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.

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>
<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

4 Comments

Join the conversation! Your thoughts help the community grow.

Omkar Mestry3y ago
Update is not working
Rohan Rao7y ago
Hi.. I have an autoincrement field of ID. How to perform Update operation if that's the case? Please help
Uday Krishna7y ago
How to download the application please provide the link
Manav Pandya9y ago
Nice ...............................