Purvi's Blog: IMP Useful Login Form using Asp.Net

IMP Useful Login Form using Asp.Net

(Example of Editable GridView, RequiredFieldValidator, RegularExpressionValidator, JavaScript in asp.net)

Here, I have made a Login Form using ASP.Net, which includes use of GridView, RequiredFieldValidator, RegularExpressionValidator and JavaScript for the client-side validation. This Program contains validation like OnlyNumeric Values in Textbox, OnlyAlphabet Value in Textbox,and Field Can’t Not be Left Blank. All these validation are done at client-side.

This program also contain a GridView which enable user to perform Update and Delete Record using GridView, which has been done usingTemplateField concept of GridView in ASP.net.

The purpose of the program is to provide authorization between users that are provided authority on the basis of their designation. Only “Super Admin” can see all the record and can modify the required when required. “Super Admin” can also delete any record if required. Rest of the all designation users can only be able to View, Modify and Delete the record of their underlying juniors.

Now, Start with Designing a User Interface for LogOn. Now design the Following User Interface. Here I named this Page Default.aspx.

Before Start with Coding on Default.aspx, open web.config file from your Website Solution Explore and modified it for creating connection with database. Select the <connectionStrings/> and add following code within this tag.

</connectionStrings>

Above code will establish a connection with Your SQL SERVER DATABSE. You can change the value of ConnectionString attributes according to your SQL SERVER Connection Configuration.

Now Add a Class File for declaration of globally used variable. Here I named it Connection.cs. Following are the code for Connection.cs class file.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

using System.Data;

/// <summary>

/// Summary description for connection

/// </summary>

public class connection

{

public static SqlConnection con = null;

public static SqlCommand cmd = null;

public static SqlCommand cmd1 = null;

public static SqlDataReader dr = null;

public static SqlDataReader dr1 = null;

public static SqlDataAdapter da = null;

public static DataSet ds = null;

public static SqlDataAdapter da1 = null;

public static DataSet ds1 = null;

public static DataTable dt = null;

public static string st = null;

}

Now, switch to code for Default.aspx page. Following are the code I have written for Default.aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.style1

{

}

.style2

{

width: 295px;

}

</style>

window.history.forward(0);

function noBack()

{

window.history.forward();

}

function trim(id)

{

if (id != null)

id.value = id.value.toString().replace(/^\s+|\s+$/g, "");

}

</script>

</head>

<tr>

<asp:Label ID="Label1" runat="server" Text="Login Form" Font-Bold="True"

Font-Size="Large"></asp:Label>

</td>

</tr>

<asp:Label ID="Label2" runat="server" Text="Email ID"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtEmailID" runat="server" Width="208px"onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

ControlToValidate="txtEmailID" ErrorMessage="*"

ToolTip="Email ID Can Not be Left Blank" ></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1"runat="server"

ControlToValidate="txtEmailID" ErrorMessage="*"

ToolTip="Incorrect Email Format"

ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

</td>

</tr>

<asp:Label ID="Label3" runat="server" Text="Password"></asp:Label>

</td>

<td>

<asp:TextBox ID="txtPassword" runat="server" Width="208px"TextMode="Password"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

ControlToValidate="txtPassword" ErrorMessage="*"

ToolTip="Password Can Not be Left Blank"></asp:RequiredFieldValidator>

</td>

</tr>

<tr>

 </td>

<td>

<asp:Button ID="btnSignIn" runat="server" Text="Sign In" Width="87px"onclick="btnSignIn_Click"

</td>

</tr>

<tr>

 </td>

<td>

<asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Following are the Codes that I have written for Default.cs file:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

try

{

//Creating SQL SERVER Connection

connection.con = newSqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);

connection.con.Open();

}

catch(Exception ex)

{

Response.Write(ex.Message);

}

protected void btnSignIn_Click(object sender, EventArgs e)

{

//following code will check the existing user, and prompt when not found in database

connection.cmd = new System.Data.SqlClient.SqlCommand("Select * from user_details where uEmail='" + txtEmailID.Text + "' ", connection.con);

connection.dr = connection.cmd.ExecuteReader();

if (connection.dr.Read())

{

connection.cmd1 = new System.Data.SqlClient.SqlCommand("Select * from user_details where uEmail='" + txtEmailID.Text + "' and uPassword='" + txtPassword.Text + "' ", connection.con);

connection.dr1 = connection.cmd1.ExecuteReader();

if (connection.dr1.Read())

{

}

else

{

lblMsg.Text = "Incorrect Password for this Email ID";

return;

}

// Passing the User Name and User Type to Session

Session["User"] = connection.dr[0].ToString();

Session["UserType"] = connection.dr[9].ToString();

Response.Redirect("UserInfo.aspx");

}

else

{

lblMsg.Text = "Email ID Not Found";

return;

}

Now, add the second web page to the project, here I named it UserInfo.aspx and Create the following UI.

Add two GridView on the page, one is for displaying the information of Logged On user, and second is for displaying the list of all underlying juniors of Logged On user. Here, I have the second GridView Editable to enable user to perform Modification and Deletion Operation on the record. By the help ofTemplate Fields, you can perform this task.

Following are the code for UserInfo.aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserInfo.aspx.cs"Inherits="UserInfo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

#form1

{

height: 829px;

width: 1103px;

}

.style1

{

width: 98px;

}

.style4

{

width: 54px;

}

</style>

window.history.forward(0);

function noBack() {

window.history.forward();

}

// This funtion will take the reference of control and will remove the white spaces.

function trim(id) {

if (id != null)

id.value = id.value.toString().replace(/^\s+|\s+$/g, "");

}

</script>

</head>

<div>

<tr>

<asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Size="Large"

Text="User Information"></asp:Label>

</td>

<asp:LinkButton ID="LinkButton1" runat="server"onclick="LinkButton1_Click">Sign Out</asp:LinkButton>

</td>

</tr>

<tr>

<asp:GridView ID="GridView2" runat="server" BackColor="White"

BorderColor="#999999" BorderStyle="None" BorderWidth="1px"CellPadding="3"

EnableModelValidation="True" GridLines="Vertical" Width="907px">

</asp:GridView>

</td>

</tr>

<tr>

 </td>

</tr>

<tr>

 </td>

</tr>

<tr>

<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Large"

Text="List of Juiniors"></asp:Label>

</td>

</tr>

<tr>

<asp:GridView ID="GridView3" runat="server" CellPadding="4"AutoGenerateColumns="false"

BorderStyle="None" BorderWidth="1px"onrowcancelingedit="RowCancelingEdit"

onrowdeleting="RowDeleting" onrowediting="RowEditing"

onrowupdating="RowUpdating"

EnableModelValidation="True" ForeColor="#333333" GridLines="None"Width="907px">

<%--Creating TemplateFields--%>

<%-- <%#Bind("User_Name") %>' means its a column name of DataTable--%>

<asp:TemplateField>

<asp:Label ID="lblUser_Name" runat="server"Text='<%#Bind("User_Name") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtUser_Name" runat="server"Text='<%#Bind("User_Name") %>' onblur="trim(this)"></asp:TextBox>

<%--Checking For Blank Text Box--%>

<asp:RequiredFieldValidator ID="checkUser_Name" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtUser_Name"></asp:RequiredFieldValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Gender</HeaderTemplate>

<asp:Label ID="lblGender" runat="server"Text='<%#Bind("Gender") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtGender" runat="server"Text='<%#Bind("Gender") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkGender" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtGender"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidatorID="RegularExpressionValidator2" runat="server" ControlToValidate="txtGender"ErrorMessage="*" ToolTip="Enter Alphabets Only" ValidationExpression="^[a-zA-Z]+$"SetFocusOnError="True"></asp:RegularExpressionValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtAge" runat="server" Text='<%#Bind("Age")%>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkAge" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtAge" ></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="checkNumeric"runat="server" Text="*" ToolTip="Enter Numeric Value" ControlToValidate="txtAge"ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Father_Name</HeaderTemplate>

<asp:Label ID="lblFather_Name" runat="server"Text='<%#Bind("Father_Name") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtFather_Name" runat="server"Text='<%#Bind("Father_Name") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkFather_Name"runat="server" Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtFather_Name"></asp:RequiredFieldValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Address</HeaderTemplate>

<asp:Label ID="lblAddress" runat="server"Text='<%#Bind("Address") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtAddress" runat="server"Text='<%#Bind("Address") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkAddress" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtAddress"></asp:RequiredFieldValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Phone</HeaderTemplate>

<asp:Label ID="lblPhone" runat="server" Text='<%#Bind("Phone")%>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtPhone" runat="server"Text='<%#Bind("Phone") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkPhone" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtPhone"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="checkNumeric11"runat="server" Text="*" ToolTip="Enter Numeric Value" ControlToValidate="txtPhone"ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Email</HeaderTemplate>

<asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email")%>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtEmail" runat="server"Text='<%#Bind("Email") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkEmail" runat="server"Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidatorID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"ErrorMessage="*" ToolTip="Incorrect Email Format" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Designation</HeaderTemplate>

<asp:Label ID="lblDesignation" runat="server"Text='<%#Bind("Designation") %>'></asp:Label>

</ItemTemplate>

<asp:TextBox ID="txtDesignation" runat="server"Text='<%#Bind("Designation") %>' onblur="trim(this)"></asp:TextBox>

<asp:RequiredFieldValidator ID="checkDesignation"runat="server" Text="*" ToolTip="Can't Be left Blank" ControlToValidate="txtDesignation"></asp:RequiredFieldValidator>

</EditItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<HeaderTemplate>Command Button</HeaderTemplate>

<asp:Button ID="btnEdit" runat="server" CommandName="Edit"Text="Edit" />

<asp:Button ID="btnDelete" runat="server" CommandName="Delete"Text="Delete" CausesValidation="true" OnClientClick="return confirm('Are you sure?')" />

</ItemTemplate>

<asp:Button ID="btnUpdate" runat="server" CommandName="Update"Text="Update"/>

<asp:Button ID="btnCancel" runat="server" CommandName="Cancel"Text="Cancel" CausesValidation="false" />

</EditItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</td>

 </td>

</tr>

</table>

</div>

</form>

</body>

</html>

This is how I have created TemplateField in GridView to make it enable for performing Modification and Deletion operation.

Now, Switch to .cs file for UserInfo.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

public partial class UserInfo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (Session["User"] != null)

{

Response.Write("<font color='#990000'><b>" + "Welcome " + Session["User"].ToString() + " (" + Session["UserType"].ToString() + ")," + "</b></font>");

}

else

Response.Redirect("Default.aspx");

try

{

connection.con = newSystem.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);

connection.con.Open();

}

catch (Exception ex)

{

Response.Write(ex.Message);

return;

}

if (!IsPostBack)

{

show();

}

public void show()

{

connection.con = newSystem.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString);

connection.con.Open();

string query=null;

if(Session["UserType"].ToString()=="Super Admin")

{

query = "select uName as 'User_Name',uGender as 'Gender',uAge as 'Age',uFatherName as 'Father_Name',uAddress as 'Address',uPhone as 'Phone',uEmail as 'Email',uDesignnation as 'Designation' from user_details where uName!='" + Session["User"].ToString() + "'";

}

else

{

}

connection.da = new System.Data.SqlClient.SqlDataAdapter(query, connection.con);

SqlCommandBuilder bui = new SqlCommandBuilder(connection.da);

connection.dt = new System.Data.DataTable();

connection.da.Fill(connection.dt);

GridView3.DataSource = connection.dt;

GridView3.DataBind();

connection.da1 = new System.Data.SqlClient.SqlDataAdapter("select uName as 'User_Name',uGender as 'Gender',uAge as 'Age',uFatherName as 'Father_Name',uAddress as 'Address',uPhone as 'Phone',uEmail as 'Email',uDesignnation as 'Designation' from user_details where uName='" + Session["User"] + "'", connection.con);

connection.ds1 = new System.Data.DataSet();

connection.da1.Fill(connection.ds1, "user");

GridView2.DataSource = connection.ds1;

GridView2.DataBind();

}

protected void LinkButton1_Click(object sender, EventArgs e)

{

Session["User"] = null;

Session["UserType"]= null;

Session.Clear();

Response.Redirect("Default.aspx");

}

protected void RowEditing(object sender, GridViewEditEventArgs e)

{

GridView3.EditIndex = e.NewEditIndex;

show();

}

protected void RowUpdating(object sender, GridViewUpdateEventArgs e)

{

try

{//find control will serch the given control name in TemplateField

TextBox User = GridView3.Rows[e.RowIndex].FindControl("txtUser_Name") as TextBox;

TextBox Gender = GridView3.Rows[e.RowIndex].FindControl("txtGender") as TextBox;

TextBox Age = GridView3.Rows[e.RowIndex].FindControl("txtAge") as TextBox;

TextBox Father_Name = GridView3.Rows[e.RowIndex].FindControl("txtFather_Name") as TextBox;

TextBox Address = GridView3.Rows[e.RowIndex].FindControl("txtAddress") as TextBox;

TextBox Phone = GridView3.Rows[e.RowIndex].FindControl("txtPhone") as TextBox;

TextBox Email = GridView3.Rows[e.RowIndex].FindControl("txtEmail") as TextBox;

TextBox Designation = GridView3.Rows[e.RowIndex].FindControl("txtDesignation") as TextBox;

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["User_Name"] = User.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Gender"] = Gender.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Age"] = Convert.ToInt32(Age.Text.Trim());

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Father_Name"] = Father_Name.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Address"] = Address.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Phone"] = Phone.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Email"] = Email.Text.Trim();

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex]["Designation"] = Designation.Text.Trim();

connection.da.Update(connection.dt);

GridView3.EditIndex = -1;

show();

}

catch(Exception ex)

{

Response.Write(ex.Message);

}

protected void RowDeleting(object sender, GridViewDeleteEventArgs e)

{

try

{

connection.dt.Rows[GridView3.Rows[e.RowIndex].RowIndex].Delete();

connection.da.Update(connection.dt);

GridView3.EditIndex = -1;

show();

}

catch(Exception ex)

{

Response.Write(ex.Message);

}

protected void RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{

GridView3.EditIndex = -1;

show();

}

Now, Build the website and then Run

By clicking on ““Sign In” button, the given User Name and Password will check for the authentication, If found incorrect it will prompt user to correct the information. Following is the sample of Error Message which will if given Information is Incorrect

If given information by user is correct then it be redirected to the next page, which will be like following.

For Modification or Deletion of any record, user has to click on Edit/Delete Button attached with every record in a single row. There is also all the Validation Implemented for Modification of records.

For Signing In as different user click on “Sign Out” link given at right upper corner of the page. It will set focus back to Login Page.

Pages

Wednesday, 3 April 2013

IMP Useful Login Form using Asp.Net

(Example of Editable GridView, RequiredFieldValidator, RegularExpressionValidator, JavaScript in asp.net)

No comments:

Post a Comment

Blog Archive