.Netaspires: Registration page in asp.net

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

)

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>

<title>Loginform</title>

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>

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>

<h3>SignUp here..

</h3>

</div>

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

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

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

...for more information about previous tutorial please visit this link ASP.Net Tutorials and

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.

Menu

Tuesday, 2 August 2016

Registration page in asp.net

4 comments: