How to create a simple registration page in Asp.net

Hi friends …

In this user will fill up the registration form with details such as username, password, email address, etc. and these details will be saved in the database table.

Step 1: Make connection string in web.config page

<connectionStrings>
    <add name=”RegistrationConnectionString” connectionString=”Data Source=DEEPAK-PC;Initial Catalog=Registration ;Integrated Security=True”
      providerName=”System.Data.SqlClient” />
 </connectionStrings>

Step 2: Database

You have to create a new database named Registration which contains the following table named UserDetails in it.
Asp.net

Step 3: Html Design

<html>
<head id=”Head1″ runat=”server”>
<title>Registration</title><style type=”text/css”>
.style4 {
width: 212px;
}.style7 {
width: 212px;
height: 31px;
}

.style9 {
height: 26px;
}

.style11 {
width: 259px;
}

.style12 {
width: 259px;
height: 31px;
}

.auto-style1 {
width: 259px;
height: 26px;
}

.auto-style2 {
width: 261px;
height: 26px;
}

.auto-style3 {
width: 261px;
}

.auto-style4 {
width: 261px;
height: 31px;
}

.auto-style6 {
width: 229px;
height: 26px;
}

.auto-style7 {
width: 229px;
}

.auto-style8 {
width: 229px;
height: 31px;
}
</style>
</head>

<body>
<form id=”form1″ runat=”server”>
<div>
<table style=”border: 1pt solid #FF6600; width: 90%; height: 500px; font-family: Verdana; border-collapse: collapse; background-color: #ffffff;”
align=”center”>
<tr>
<td align=”center” colspan=”3″ class=”style9″>
<asp:Label ID=”lblHeader” runat=”server” Text=”Registration Form” Font-Bold=”True” ForeColor=”#FF6600″ Font-Size=”Large” Font-Names=”Levenim MT”></asp:Label>
<br />
<br />
</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblFirstName” runat=”server” Text=”First Name :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvFirstName” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtFirstName”></asp:RequiredFieldValidator>
&nbsp;<asp:RegularExpressionValidator ID=”RegularExpressionValidator1″ runat=”server” ErrorMessage=”Invalid Firstname” ControlToValidate=”txtFirstName” ForeColor=”#FF3300″ ValidationExpression=”[a-zA-Z]*$”></asp:RegularExpressionValidator>
<br />

</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblLastName” runat=”server” Text=”Last Name :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtLastName” runat=”server”></asp:TextBox>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvLastName” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtLastName”></asp:RequiredFieldValidator>
&nbsp;<asp:RegularExpressionValidator ID=”RegularExpressionValidator2″ runat=”server” ErrorMessage=”Invalid Lastname” ControlToValidate=”txtLastName” ForeColor=”#FF3300″ ValidationExpression=”[a-zA-Z]*$”></asp:RegularExpressionValidator></td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblEmail” runat=”server” Text=”E-Mail :”></asp:Label>

</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtEmail” runat=”server”></asp:TextBox>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvUserName” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtEmail”></asp:RequiredFieldValidator>
&nbsp;<asp:RegularExpressionValidator ID=”RxvEmail” runat=”server” ControlToValidate=”txtEmail”
ErrorMessage=”Invalid E-mail” ForeColor=”#FF3300″ ValidationExpression=”\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*”></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblPassword” runat=”server” Text=”Password :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtPassword” runat=”server” TextMode=”Password”></asp:TextBox>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvPwd” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtPassword”></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class=”auto-style1″ align=”right”>
<asp:Label ID=”lblConfirmPwd” runat=”server” Text=”Confirm Pasword :”></asp:Label>
</td>
<td class=”auto-style6″ align=”left”>
<asp:TextBox ID=”txtConfirmPwd” runat=”server” TextMode=”Password”></asp:TextBox>
</td>
<td class=”auto-style2″ align=”left”>&nbsp;
<asp:RequiredFieldValidator ID=”RfvCnfrmPwd” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtConfirmPwd”></asp:RequiredFieldValidator>
&nbsp;
<asp:CompareValidator ID=”CvCnfmPwd” runat=”server” ErrorMessage=”Password and Confirm Password didnt matched”
ForeColor=”#FF3300″ ControlToCompare=”txtPassword” ControlToValidate=”txtConfirmPwd”></asp:CompareValidator>
</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblGender” runat=”server” Text=”Gender :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:RadioButtonList ID=”RdoGender” runat=”server” RepeatDirection=”Horizontal” Width=”176px”>
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvGender” runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”RdoGender”></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblDob” runat=”server” Text=”Date of Birth :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtDob” runat=”server”></asp:TextBox>
&nbsp;<asp:Label ID=”Label1″ runat=”server” Text=”(dd/mm/yyyy)”></asp:Label>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator5″ runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”txtDob”></asp:RequiredFieldValidator>
&nbsp;<br />
<asp:RegularExpressionValidator ID=”RxvDob” runat=”server” ControlToValidate=”txtDob”
ErrorMessage=”Invalid Date Format” ValidationExpression=”^(((((0[1-9])|(1\d)|(2[0-8]))\/((0[1-9])|(1[0-2])))|((31\/((0[13578])|(1[02])))|((29|30)\/((0[1,3-9])|(1[0-2])))))\/((20[0-9][0-9])|(19[0-9][0-9])))|((29\/02\/(19|20)(([02468][048])|([13579][26]))))$”
ForeColor=”#FF3300″></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td align=”right” class=”style11″>
<asp:Label ID=”lblMobile” runat=”server” Text=”Mobile :”></asp:Label>
</td>
<td class=”auto-style7″>
<asp:TextBox ID=”txtMobile” runat=”server” MaxLength=”10″ Style=”margin-left: 0px”></asp:TextBox>
</td>
<td class=”auto-style3″>
<asp:RegularExpressionValidator ID=”RxvMobile” runat=”server” ErrorMessage=”Invalid Mobile Number”
ForeColor=”#FF3300″ ValidationExpression=”^([7-9]{1})([0-9]{9})$” ControlToValidate=”txtMobile”></asp:RegularExpressionValidator>
</td>
</tr>

<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”lblAddress” runat=”server” Text=”Address :”></asp:Label>
</td>
<td class=”auto-style7″ align=”left”>
<asp:TextBox ID=”txtAddress” runat=”server” TextMode=”MultiLine”></asp:TextBox>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RfvAddress” runat=”server” ErrorMessage=”* Required”
ForeColor=”Red” ControlToValidate=”txtAddress”></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class=”style11″ align=”right”>
<asp:Label ID=”upload” runat=”server” Text=”Upload Your Photo :”></asp:Label>
</td>
<td class=”auto-style7″>
<asp:FileUpload ID=”FileUploadControl” runat=”server”></asp:FileUpload>
</td>
<td class=”auto-style3″ align=”left”>
<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server” ErrorMessage=”* Required”
ForeColor=”#FF3300″ ControlToValidate=”FileUploadControl”></asp:RequiredFieldValidator>
<asp:Label ID=”StatusLabel” runat=”server” Text=”Label” ForeColor=”#990000″ Visible=”False”></asp:Label>
</td>
</tr>
<td align=”center” class=”style12″>&nbsp;
<asp:Label ID=”lblMsg” runat=”server” ForeColor=”#CC3300″ Visible=”False”></asp:Label>
</td>
<td class=”auto-style8″>
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” OnClick=”btnSubmit_Click” BackColor=”#FF6600″ ForeColor=”White” Font-Names=”Levenim MT” class=”buttonx” />&nbsp;
<asp:Button ID=”btnClear” runat=”server” CausesValidation=”False” OnClick=”btnClear_Click”
Text=”Clear” BackColor=”#FF6600″ ForeColor=”White” Font-Names=”Levenim MT” class=”buttonx” />
</td>
<td align=”center” class=”auto-style4″></td>
</tr>
</table>
</div>
</form>
</body>
</html>

  Your design will look like this 

Asp.net

Step 4:  C# Code

Add some header files 

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Security;
using System.Data;
using System.ComponentModel;
using System.IO;
Paste following code into class
string path;
    string filename;
    protected void Page_Load(object sender, EventArgs e)
    {
    }
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“RegistrationConnectionString”].ToString());
    SqlCommand cmd = new SqlCommand();
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        try
        {
            cmd.Connection = con; //assigning connection to command
            cmd.CommandType = CommandType.Text; //representing type of command
            cmd.CommandText = “INSERT INTO UserDetails values(@Fname,@Lname,@Email,@Password,@Gender,@Dob,@Mobile,@Address,@Image)”;
            if (FileUploadControl.HasFile)
            {
                try
                {
                    filename = FileUploadControl.FileName;
                    FileUploadControl.PostedFile.SaveAs(Server.MapPath(“~//uploads//”) + filename);
                    path = “~//uploads//” + filename.ToString();
                    StatusLabel.Visible = true;
                    StatusLabel.Text = “Upload status: File uploaded!”;
                    Session[“emailid”] = txtEmail.Text;
                }
                catch (Exception ex)
                {
                    StatusLabel.Visible = true;
                    StatusLabel.Text = “Upload status: The file could not be uploaded. The following error occured: ” + ex.Message;
                }
            }
            //adding parameters with value
            cmd.Parameters.AddWithValue(“@Fname”, txtFirstName.Text.ToString());
            cmd.Parameters.AddWithValue(“@Lname”, txtLastName.Text.ToString());
            cmd.Parameters.AddWithValue(“@Email”, txtEmail.Text.ToString());
            cmd.Parameters.AddWithValue(“@Password”, txtPassword.Text.ToString());
            cmd.Parameters.AddWithValue(“@Gender”, RdoGender.SelectedItem.Text.ToString());
            cmd.Parameters.AddWithValue(“@Dob”, txtDob.Text.ToString());
            cmd.Parameters.AddWithValue(“@Mobile”, txtMobile.Text.ToString());
            cmd.Parameters.AddWithValue(“@Address”, txtAddress.Text.ToString());
            cmd.Parameters.AddWithValue(“@Image”, “uploads/” + filename);
            //===================upload pic code=================
            con.Open(); //opening connection
            cmd.ExecuteNonQuery();  //executing query
            con.Close(); //closing connection
            lblMsg.Visible = true;
            lblMsg.Text = “Registered Successfully..”;
            Response.Redirect(“login.aspx”);
        }
        catch (Exception ex)
        {
            lblMsg.Visible = true;
            lblMsg.Text = ex.Message.ToString();
        }
    }
    protected void btnClear_Click(object sender, EventArgs e)
    {
        //refreshing/reloading page to clear all the controls
        Page.Response.Redirect(Page.Request.Url.ToString(), true);
    }

Demo :Asp.net

Asp.net

 Finally we have got this UserDetails table with inserted value

Asp.net

Thanks Friends

How To Create Image wipe Effect With CSS3 Webkit Animation

Hi Friends…

In this article we learn how to create a Image wipe effect with CSS. CSS transition and animations provide a way for web developers to describe various kind of animation of CSS properties.
you can use this code in your project copy this code and paste it.

Your Code is as under (html , css)

<!Doctype Html>

<head>
<meta charset=”utf-8″>
<title>C# jadu Image Wipe</title>
<style>
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
#rollover {
width: 330px;
height: 310px;
position: relative;
border: 8px solid #eee;
            margin-left: 50px;
            margin-top: 50px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
-webkit-transition: -webkit-mask-position 1s ease;
-webkit-mask-size: 600px 600px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.35,  rgba(0,0,0,1)),
color-stop(0.50,  rgba(0,0,0,0)),
color-stop(0.75,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0)));
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
</style>
</head>
<body>
<div id=”page-wrap”>
<div id=”rollover”>
<div><img src=”http://4.bp.blogspot.com/-rWU2czr6S0Q/VivJ_UMx7sI/AAAAAAAAAhg/AeOXq3s7TjM/s1600-r/finalc%2523logoPNGupdated.png” alt=”Smile”></div>
<div><img src=”http://4.bp.blogspot.com/-XTbSfbMmLc4/VipM4r19QQI/AAAAAAAAAhI/S1WtmPRFQWE/s320/3D%2BCube_C%2523%2Bjadu.jpg” alt=”Sleep”></div>
</div>
</div>
</body>
</html>