Simple Login Form in ASP.Net Using C#

byGaurav Dixit •
0

Simple Login Form in ASP.Net Using C#


There are two inputs, Username and word, and a login button. When the user clicks that login button the user is redirect to a new page (his account page), otherwise it gets an error message.
INITIAL CHAMBER
Step 1
Open Your Visual Studio 2010 and create an Empty Website, provide a suitable name (LoginForm_demo).

Step 2
In Solution Explorer you get your empty website, then add two web forms and a SQL Server database as in the following.

For Web Form

Right-click LoginForm_demo (your empty website) then select Add New Item -> Web Form. Name it Login_demo.aspx. Use that process again and add another web form and name it Redirectpage.aspx.

For SQL Server Database

Right-click LoginForm_demo (your empty website) then select Add New Item -> SQL Server Database. Add the database inside the App_Data_folder.

DATABASE CHAMBER
Step 3
In Server Explorer, click on your database (Database.mdf) then select Tables -> Add New Table. Make the table like this:

Table -> tbl_data (Don't forget to make the ID as IS Identity = True).


Figure 1 Database Chamber

Now enter some data into your database by right-clicking Tables then select Show Table Data and enter whatever you want to add in the username and word. I entered the following data.


Figure 2 Database Table

We will match this username and word so if the data is correct, the user is redirect to his account page otherwise the user gets an error message.

DESIGN CODE

Step 4
Now make some design for your application by going to Login_demo.aspx and try the code as in the following.

Login_demo.aspx
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div >  
  4.             <table style="width:100%;">  
  5.                 <caption class="style1">  
  6.                     <strong>Login Form</strong>  
  7.                 </caption>  
  8.                 <tr>  
  9.                     <td class="style2">  
  10.  </td>  
  11.                     <td>  
  12.  </td>  
  13.                     <td>  
  14.  </td>  
  15.                 </tr>  
  16.                 <tr>  
  17.                     <td class="style2">  
  18. Username:</td>  
  19.                     <td>  
  20.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  21.                     </td>  
  22.                     <td>  
  23.                         <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"   
  24. ControlToValidate="TextBox1" ErrorMessage="Please Enter Your Username"   
  25. ForeColor="Red"></asp:RequiredFieldValidator>  
  26.                     </td>  
  27.                 </tr>  
  28.                 <tr>  
  29.                     <td class="style2">  
  30. word:</td>  
  31.                     <td>  
  32.                         <asp:TextBox ID="TextBox2" TextMode="word" runat="server"></asp:TextBox>  
  33.                     </td>  
  34.                     <td>  
  35.                         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"   
  36. ControlToValidate="TextBox2" ErrorMessage="Please Enter Your word"   
  37. ForeColor="Red"></asp:RequiredFieldValidator>  
  38.                     </td>  
  39.                 </tr>  
  40.                 <tr>  
  41.                     <td class="style2">  
  42.  </td>  
  43.                     <td>  
  44.  </td>  
  45.                     <td>  
  46.  </td>  
  47.                 </tr>  
  48.                 <tr>  
  49.                     <td class="style2">  
  50.  </td>  
  51.                     <td>  
  52.                         <asp:Button ID="Button1" runat="server" Text="Log In" onclick="Button1_Click" />  
  53.                     </td>  
  54.                     <td>  
  55.                         <asp:Label ID="Label1" runat="server"></asp:Label>  
  56.                     </td>  
  57.                 </tr>  
  58.             </table>  
  59.         </div>  
  60.     </form>  
  61. </body> 
You will get something like this:


Figure 3 Login Form

CODE CHAMBER

Step 5
We will provide some code in the Login_demo.aspx.cs page so that our login form works.

Login_demo.aspx.cs


Figure 4 Login Demo
  1. public partial class _Default: System.Web.UI.Page {  
  2.     protected void Page_Load(object sender, EventArgs e) {  
  3.   
  4.     }  
  5.     protected void Button1_Click(object sender, EventArgs e) {  
  6.         SqlConnection con = new SqlConnection(@  
  7.         "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  8.         SqlCommand cmd = new SqlCommand("select * from tbl_data where username=@username and word=@word", con);  
  9.         cmd.Parameters.AddWithValue("@username", TextBox1.Text);  
  10.         cmd.Parameters.AddWithValue("word", TextBox2.Text);  
  11.         SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  12.         DataTable dt = new DataTable();  
  13.         sda.Fill(dt);  
  14.         con.Open();  
  15.         int i = cmd.ExecuteNonQuery();  
  16.         con.Close();  
  17.   
  18.         if (dt.Rows.Count > 0) {  
  19.             Response.Redirect("Redirectform.aspx");  
  20.         } else {  
  21.             Label1.Text = "Your username and word is incorrect";  
  22.             Label1.ForeColor = System.Drawing.Color.Red;  
  23.   
  24.         }  
  25.   
  26.   
  27.     }  
  28. }  
OUTPUT CHAMBER

This is your final output. As you can see, this is our Default.aspx page (in your terms, Login_demo.aspx) when the user clicks on the login button, the user is redirected to a new page (Redirectpage.aspx).


Figure 5 Output 


Figure 6 Welcome Page

I hope you like it. Thank you for reading. Have a nice Day!
    Tags:

    Post a Comment

    Previous Post Next Post