UI Page
Design a web form as in the following with textboxes, labels and two buttons. It will look good if a table is used. And I even used validation controls such as required field validators for username, password , firstName, lastName and in a properties control to validate their respective TextBox names and compare the validator for a conforming passsword to compare with the password TextBox. For email, I used a regular expression validator for validating the email, phone and location.
![Image1.jpg]()
Without entering any values if the submit button is clicked then it looks as shown in the following:
![Image2.jpg]()
If we don't enter valid data then it looks like this:
![Image3.jpg]()
After inserting a new record at the front end you will see the same registration details in the backend, it is inserted automatically.
![Image4.jpg]()
Database
![Image5.jpg]()
If the user already exists then the label becomes visible and shows the error message since the specific user already exists.
![Image6.jpg]()
Front end
Aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 56%;
height: 220px;
}
.auto-style3 {
width: 219px;
}
.auto-style6 {
width: 128px;
}
.auto-style7 {
width: 128px;
height: 26px;
}
.auto-style8 {
width: 219px;
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<table align="center" class="auto-style1">
<tr>
<td class="auto-style7">
<asp:Label ID="Label1" runat="server" Text="UserName"></asp:Label>
</td>
<td class="auto-style8">
<asp:TextBox ID="ut" runat="server" ValidationGroup="Requried" Width="192px"></asp:TextBox>
</td>
<td class="auto-style8">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="ut" ErrorMessage="Please enter a user name" ForeColor="Red" SetFocusOnError="True"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="pt" runat="server" TextMode="Password" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="Pt" ErrorMessage="Please enter a password" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label9" runat="server" Text="Conform Password"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="cnfpt" runat="server" TextMode="Password" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="cnfpt" ControlToValidate="Pt" ErrorMessage="Password Mismatch" ForeColor="Red"></asp:CompareValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label4" runat="server" Text="FirstName"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="ft" runat="server" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ft" ErrorMessage="Please enter a first name" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label5" runat="server" Text="LastName"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="lt" runat="server" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="lt" ErrorMessage="Please enter a last name" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label6" runat="server" Text="Email"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="et" runat="server" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="et" ErrorMessage="Enter valid email address" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style6">
<asp:Label ID="Label7" runat="server" Text="Phone:"></asp:Label>
</td>
<td class="auto-style3">
<asp:TextBox ID="pnt" runat="server" Width="192px"></asp:TextBox>
</td>
<td class="auto-style3">
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="pnt" ErrorMessage="Enter a valid US phone number" ForeColor="Red" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" Width="230px"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style7">
<asp:Label ID="Label8" runat="server" Text="Location"></asp:Label>
</td>
<td class="auto-style8">
<asp:TextBox ID="loct" runat="server" Width="192px"></asp:TextBox>
</td>
<td class="auto-style8">
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="loct" ErrorMessage="Enter Correct Zip Code" ForeColor="Red" ValidationExpression="\d{5}(-\d{4})?" Width="230px"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class="auto-style6"> </td>
<td class="auto-style3">&
<br />
<asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click" />// submit button
<asp:Button ID="Button3" runat="server" Text="Reset" OnClick="Button3_Click" />// Reset Button
</td>
<td class="auto-style3"> </td>
</tr>
</table>
<br />
<asp:Label ID="lblErrorMsg" runat="server" Text="lblErrorMsg" Visible="False"></asp:Label>
</form>
</body>
</html>
Aspx.cs
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
private string message = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button2_Click(object sender, EventArgs e) // submit button
{
if (pt.Text == cnfpt.Text)
{
string username = ut.Text;
string password = pt.Text;
string confirmpassword = cnfpt.Text;
string firstname = ft.Text;
string lastname = lt.Text;
string emailaddress = et.Text;
string phone = pnt.Text;
string location = loct.Text;
string createdby = ut.Text;
SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=RAJU;Integrated Security=True");
con.Open();
SqlCommand cmd = new SqlCommand("sp_userinformation", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@UserName", username);
cmd.Parameters.AddWithValue("@Password", password);
cmd.Parameters.AddWithValue("@FirstName", firstname);
cmd.Parameters.AddWithValue("@LastName", lastname);
cmd.Parameters.AddWithValue("@Email", emailaddress);
cmd.Parameters.AddWithValue("@PhoneNo", phone);
cmd.Parameters.AddWithValue("@Location", location);
cmd.Parameters.AddWithValue("@Created_By", createdby);
cmd.Parameters.Add("@ERROR", SqlDbType.Char, 500);
cmd.Parameters["@ERROR"].Direction = ParameterDirection.Output;
cmd.ExecuteNonQuery();
message = (string)cmd.Parameters["@ERROR"].Value;
con.Close();
}
else
{
Page.RegisterStartupScript("UserMsg", "<Script language='javascript'>alert('" + "Password mismatch" + "');</script>");
}
lblErrorMsg.Text = message; // if only user exits already in database then it shows errorlabel as already existed..... initially the label visible was set to false.....
lblErrorMsg.Visible = true;
}
protected void Button3_Click(object sender, EventArgs e)// reset button
{
ut.Text = "";
ft.Text = "";
lt.Text = "";
et.Text = "";
loct.Text ="";
pnt.Text ="";
}
}
}
Backend
First create a User Table in the following format:
![Image7.jpg]()
Create a Stored Procedure sp_userinfo for inserting values. If the user doesn't exist , else the user exists in other words it must raise an error message. Here I used an output parameter for showing the error:
Create PROCEDURE [dbo].[sp_userinfo]
@UserName varchar(50),
@Password varchar(50),
@FirstName varchar(50),
@LastName varchar(50),
@Email varchar(50),
@PhoneNo varchar(50),
@Location varchar(50),
@Created_By varchar(50),
@ERROR VARCHAR(100) OUT
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
---Checking Condition if User exists or not if user not exists returns different message if exists returns different message
IF NOT EXISTS(SELECT * FROM User WHERE UserName=@UserName)
BEGIN
INSERT INTO User
(
UserName,
[Password],
FirstName,
LastName,
Email,
PhoneNo,
Location,
Created_By
)
VALUES
(
@UserName,
@Password,
@FirstName,
@LastName,
@Email,
@PhoneNo,
@Location,
@Created_By
)
--If User Successfully Registerd I am returing this Message as Output Parameter
SET @ERROR=@UserName+' Registered Successfully'
END
ELSE
BEGIN
--If User already Exists i am returning this Message as Output Parameter
SET @ERROR=@UserName + ' Already Exists'
END
END