Introduction: Hi, friends .Here I explained how to create a
user
registration form in asp.net using C# and sql server that will allow
the user to register in website. And also I applied all client side validations
using JavaScript .that restrict
the user doesn’t allow to entered any invalid input. So let’s see how we go
ahead step by step to achieve this.
Before going to this tutorial please
see what does web form in asp.net. In my previous article I clearly explained
all.
Prerequisites:
- Must know about the asp.net controls
- Visual studio IDE-2012/13/15(any edition: Express, ultimate and professional)
- .Netframework-3.5/4.0/4.5/4.5.1.sqlserver-2008/08sp2/12/14
Database: now, let’s create a table named as Register
with required fields, if you don’t know how create a table in sql then
must see my previous article how to create a table in sql.
Create
Table register
(
regid
int primary key identity(1,1),
firstname
varchar(25),
lastname
varchar(25),
gender
varchar(25),
email
varchar(25),
password
varchar(10),
phone
bigint,
address
varchar(50),
createddate
datetime
)
Go
Design
view: just copy and paste the above code in your
query designer, then select all and press f5 or Execute button in menu bar.
Application:
Step1:
To create signup page first you need to open visual studio and run as administrator.
Step2:
File-->new-->website-->a Template
will be opened-->choose
the language which you want in left side-->select
visual C# -->select
ASP.NET Empty website.
Step3: In bottom, specify the website is http,
ftpsystem or file system-->choose Http-->specify
the name of the website as http://localhost/yourwebsitename -->click
on ok.
Step4: Now got view-->other
windows-->Solution Explorer-->Right Click-->Add-->New Item-->choose
language as C#-->Choose web form-->Named
as Signup-->Click ok.
Design view: Design the form shown below using asp.net
controls.
Signup.aspx:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Loginform</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' />
<style type="text/css">
body {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
th {
text-align: right;
}
.content {
width: 55%;
padding: 2%;
background-color: rgba(33, 150, 243, 0.04);
margin: 0 auto;
text-align: center;
}
.head {
background-color: rgba(0, 150, 136, 0.39);
text-align: center;
padding: 1%;
width: 57%;
margin: 0 auto;
}
.btnsubmit {
background-color: #DB4437;
border-style: None;
padding: 9px;
border-radius: 9px;
width: 80px;
font-size: 16px;
color: white;
}
textarea {
resize: none;
}
</style>
<script type="text/javascript">
function validate() {
if (document.getElementById("<%=txtname.ClientID%>").value == "") {
alert("firstname Feild can
not be blank");
document.getElementById("<%=txtname.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtlstname.ClientID%>").value == "") {
alert("lastname Feild can
not be blank");
document.getElementById("<%=txtlstname.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtemail.ClientID %>").value == "") {
alert("email id can not be
blank");
document.getElementById("<%=txtemail.ClientID %>").focus();
return false;
}
var emailPat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var emailid = document.getElementById("<%=txtemail.ClientID %>").value;
var matchArray = emailid.match(emailPat);
if (matchArray == null) {
alert("Your email address
seems incorrect. Please try again.");
document.getElementById("<%=txtemail.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=txtpwd.ClientID%>").value == "") {
alert("password Field can
not be blank");
document.getElementById("<%=txtpwd.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtphone.ClientID%>").value == "") {
alert("Phonenumber Field can
not be blank");
/^\d{10}$/
document.getElementById("<%=txtphone.ClientID%>").focus();
return false;
}
var phonePat = /^\d{10}$/;
var phone = document.getElementById("<%=txtphone.ClientID %>").value;
var matchArray = phone.match(phonePat);
if (matchArray == null) {
alert("Your entered phone
number seems to be incorrect. Please try again.");
document.getElementById("<%=txtphone.ClientID %>").focus();
return false;
}
ValidateRadioButtonList();
return true;
}
function ValidateRadioButtonList() {
var isChecked = false;
var rblImageFormat = document.getElementById("<%=rdbgender.ClientID%>");
var radioButtons = rblImageFormat.getElementsByTagName("input");
for (var i = 0; i <
radioButtons.length; i++) {
if (radioButtons[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert("Please select image
format from the list.");
}
return isChecked;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="head">
<h3>SignUp here..
</h3>
</div>
<div class="content">
<asp:Label ID="lblmsg" runat="server"></asp:Label>
<table>
<tr>
<th>
<asp:Label ID="lblfirstname" runat="server" Text="Fisrt Name:" AssociatedControlID="txtname"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<th>
<asp:Label ID="lbllastname" runat="server" Text="Last Name:" AssociatedControlID="txtlstname"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtlstname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<th>
<asp:Label ID="lblrdb" runat="server" Text="Email:" AssociatedControlID="rdbgender"></asp:Label>
</th>
<td>
<asp:RadioButtonList ID="rdbgender" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1" Text="Male" Selected="True" />
<asp:ListItem Value="2" Text="Female" />
</asp:RadioButtonList>
</td>
</tr>
<tr>
<th>
<asp:Label ID="lblemail" runat="server" Text="Email:" AssociatedControlID="txtemail"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtemail" runat="server" TextMode="Email"></asp:TextBox>
</td>
</tr>
<tr>
<th>
<asp:Label ID="lblpwd" runat="server" Text="Password:" AssociatedControlID="txtpwd"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<th>
<asp:Label ID="lblphone" runat="server" Text="Mobile:" AssociatedControlID="txtphone"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtphone" runat="server" TextMode="Phone"></asp:TextBox>
</td>
</tr>
<tr>
<th style="vertical-align: top">
<asp:Label ID="lbladdress" runat="server" Text="Address:" AssociatedControlID="txtadd"></asp:Label>
</th>
<td>
<asp:TextBox ID="txtadd" runat="server" TextMode="MultiLine" Rows="5" Columns="21"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnsignup" runat="server" Text="Submit" CssClass="btnsubmit" OnClick="btnsignup_Click" OnClientClick="validate()"></asp:Button>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Signup.aspx.cs:
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class loginform : System.Web.UI.Page
{
SqlConnection _con;
SqlCommand _cmd;
string _strqry = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
_con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
if (!Page.IsPostBack)
{
txtname.Text = txtlstname.Text
= txtpwd.Text = txtemail.Text = txtadd.Text
= txtphone.Text = "";
}
}
protected void btnsignup_Click(object sender, EventArgs e)
{
_strqry = "insert into register
values(@fname,@lname,@gender,@email,@pwd,@phone,@address,@date)";
_cmd = new SqlCommand(_strqry, _con);
_cmd.Parameters.AddWithValue("@fname", txtname.Text);
_cmd.Parameters.AddWithValue("@lname", txtlstname.Text);
_cmd.Parameters.AddWithValue("@gender", rdbgender.SelectedItem.Text);
_cmd.Parameters.AddWithValue("@email", txtemail.Text);
_cmd.Parameters.AddWithValue("@pwd", txtpwd.Text);
_cmd.Parameters.AddWithValue("@phone", txtphone.Text);
_cmd.Parameters.AddWithValue("@address", txtadd.Text);
_cmd.Parameters.AddWithValue("@date", DateTime.Now);
if (_con.State != ConnectionState.Open)
_con.Open();
int row = Convert.ToInt32(_cmd.ExecuteNonQuery());
if (row > 0)
{
lblmsg.Text = "Registered
successfully!!";
lblmsg.ForeColor = System.Drawing.Color.Green;
txtname.Text = txtlstname.Text
= txtpwd.Text = txtemail.Text = txtadd.Text
= txtphone.Text = "";
}
else
{
lblmsg.Text = "registration
failed";
lblmsg.ForeColor = System.Drawing.Color.Red;
}
}
}
Output:
To run the page on server Press F5 or cntl+F5.
Step1: Click on submit button, it alerts you to
enter all the fields must shown below.
Step2: Now, Enter all the fields without fail
Step3: Click on submit, Data will be submitted successfully.
Thank you for visiting my blog ,don't forget to comment on post or else if you want daily updates please follow in Google Plus.
