Simple Registration Page
This example shows how to create a simple Registration Form
in ASP.NET
STEP-1:-
First we need to create a database in Sql Server for our Registration page
1.
Lunch Sql Server and connect
2.
Expend the databases folder from the Sql Server
object explorer
3.
Right click on the Databases folder and select
“New Database”
4.
From the pop up window input the database name what
you like and click ok
5.
Expand the database folder that you have just
added
6.
Right click on the Tables folder and select “New
Table”
7.
Then add the following fields as shown billow
Ä In this table I set the Id of the table is auto
increment so that the Id will be automatically generated for every new added row.
To do this select the Column name “Id” and the column properties set the “Identity Specification” to Yes.
ÄThen after adding all the necessary fields
name the table as “tblRegistration”.
STEP:-2
Create the UI for the Registration
page. I design the web form like this
Add a web form in your web site
and name it as “Registration.aspx”
Registration.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample Registration Page</title>
<style type="text/css">
.style1
{
background-color:Olive;
width: 40%;
padding:5px;
margin:5px;
border: 2px solid black;
}
.style2
{
width: 280px;
}
.style3
{
background-color:#66FF66;
border-color:#009900;
color:Blue;
}
.style4
{
text-align: right;
font-size:large;
}
</style>
</head>
<body style="background-color: #00FFFF">
<form id="form1" runat="server">
<div align="center">
<h1 style="color: #FF0000">New
Registration</h1>
<table class="style1"
align="center">
<tr>
<td
class="style4">Full
Name:</td>
<td
class="style2">
<asp:TextBox ID="TxtName"
runat="server"
CssClass="style3"></asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Username:</td>
<td
class="style2">
<asp:TextBox ID="TxtUserName"
runat="server"
CssClass="style3"></asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Password:</td>
<td
class="style2">
<asp:TextBox ID="TxtPassword"
runat="server"
TextMode="Password"
CssClass="style3"></asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Re
Password:</td>
<td
class="style2">
<asp:TextBox ID="TxtRePassword"
runat="server"
TextMode="Password"
CssClass="style3"></asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Address:</td>
<td
class="style2">
<asp:TextBox ID="TxtAddress"
runat="server"
CssClass="style3"> </asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Age:</td>
<td
class="style2">
<asp:TextBox ID="TxtAge" runat="server" CssClass="style3"></asp:TextBox>
</td>
</tr>
<tr>
<td
class="style4">Gender:</td>
<td
class="style2">
<asp:DropDownList ID="DropDownList1"
CssClass="style3"
runat="server"
AppendDataBoundItems="true">
<asp:ListItem Value="-1">Select</asp:ListItem>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="Button1"
runat="server"
Text="Save" BackColor="#FFFF66"
BorderColor="Lime"
BorderStyle="Double"
Width="60px"
onclick="Button1_Click"
/>
<asp:Button ID="Button2"
runat="server"
Text="Cancel"
BackColor="#FFFF66"
BorderColor="Lime"
BorderStyle="Double"
Width="60px"
onclick="Button2_Click"
/></td>
</tr>
</table>
</div>
</form>
</body>
</html>
After design like this just see
your UI page it will be just like this.
STEP:-3
In your web.config file set the
connection string as shown below:
<connectionStrings>
<add name=”MyConsString”
connectionString=”Data Source=AJIT; Initial Catalog=MyDatabase; uid=sa; pwd=123;
Integrated Security=SSPI” providerName=”System.Data.SqlClient”/>
</connectionStrings>
NOTE: MyConsString is the name of
the connection string that we can use as a reference in our codes for setting
the connection string later.
Initial Catalog is your database
name, here we create our database name as MyDatabase.
STEP-4
Here the method for calling the
connection string that was set up in the web.config file
public string
GetConnectionString()
{
return System.Configuration.ConfigurationManager.ConnectionStrings["MyConsString"].ConnectionString;
}
//sets the
connection string from your web config file "ConnString" is the name
of your Connection String
STEP-5
In this example I use the ADO.NET
objects for manipulating the data from the page to the database. Here is the
code block for inserting the data to the database.
private void
ExecuteInsert(string name, string username, string
password, string gender, string age, string
address)
{
SqlConnection conn = new
SqlConnection(GetConnectionString());
string sql = "INSERT
INTO tblRegistration (Name, UserName, Password, Gender, Age, Address) VALUES
" + "
(@Name,@UserName,@Password,@Gender,@Age,@Address)";
try
{
conn.Open();
SqlCommand cmd = new
SqlCommand(sql, conn);
SqlParameter[] param = new
SqlParameter[6];
//param[0] = new SqlParameter("@id",
SqlDbType.Int, 20);
param[0] = new SqlParameter("@Name", SqlDbType.VarChar,
50);
param[1] = new SqlParameter("@UserName", SqlDbType.VarChar,
50);
param[2] = new SqlParameter("@Password", SqlDbType.VarChar,
50);
param[3] = new SqlParameter("@Gender", SqlDbType.Char,
10);
param[4] = new
SqlParameter("@Age",
SqlDbType.Int, 100);
param[5] = new SqlParameter("@Address", SqlDbType.VarChar,
50);
param[0].Value = name;
param[1].Value = username;
param[2].Value = password;
param[3].Value = gender;
param[4].Value = age;
param[5].Value = address;
for (int i = 0; i
< param.Length; i++)
{
cmd.Parameters.Add(param[i]);
}
cmd.CommandType = CommandType.Text;
cmd.ExecuteNonQuery();
}
catch (System.Data.SqlClient.SqlException
ex)
{
string msg = "Insert
Error:";
msg += ex.Message;
throw new Exception(msg);
}
finally
{
conn.Close();
}
}
STEP-6
You can call the method above at
Button_Click event for saving the data to the database. Here is the code given
bilow
protected void
Button1_Click(object sender, EventArgs e)
{
if (TxtPassword.Text == TxtRePassword.Text)
{
ExecuteInsert(TxtName.Text,
TxtUserName.Text,
TxtPassword.Text,
DropDownList1.SelectedItem.Text,
TxtAge.Text,
TxtAddress.Text);
Response.Write("Record was successfully
added!");
ClearControls(Page);
}
else
{
Response.Write("Password did not
match");
TxtPassword.Focus();
}
}
As you can see from the above code
block, we check the value of the TxtPassword and TxtRePassword to see if match.
If it match then call the method ExecuteInsert else display the error message
starting that the “Password did not match”.
You also noticed that we call the
method ClearControls for clearing the text fields in the page. So the code
below for the ClearControls method:
public static void ClearControls(Control
Parent)
{
if (Parent is TextBox)
{
(Parent as TextBox).Text
= string.Empty; }
else
{
foreach (Control c
in Parent.Controls)
ClearControls(c);
}
}
I designed this example to know
how the data store at the backend from the frontend page and I think this will
be very helpful for all.
