This article shows how to make a Login Form using session state in ASP.Net C#. It has the two inputs username and word and a login button. When the user clicks the login button the user is redirected to a new page (his account page). In this account page we have a logout button. When he clicks he goes out from his account page and returns to his login page with the saved username and word, the user doesn't need to fill it in again, it is saved in the session using a browser cookie.

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:

LoginForm_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it Login_demo.aspx. Again get to the same process and add another web form and name it Redirectpage.aspx.

For SQL Server Database

LoginForm_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add a 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 ID as IS Identity -- True)


Figure 1: Data Table

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


Figure 2: Enter the Data

We will match this username and word so if the data is correct, the user is redirected to his account page or 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: Output1

CODE CHAMBER

Step 5

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

Login_demo.aspx.cs


Figure 4: Login Demo

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  9. public partial class _Default: System.Web.UI.Page {
  10. protected void Page_Load(object sender, EventArgs e) {
  11. }
  12. protected void Button1_Click(object sender, EventArgs e) {
  13. SqlConnection con = new SqlConnection(@
  14. "Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");
  15. SqlCommand cmd = new SqlCommand("select * from tbl_data where username=@username and word=@word", con);
  16. cmd.Parameters.AddWithValue("@username", TextBox1.Text);
  17. cmd.Parameters.AddWithValue("word", TextBox2.Text);
  18. SqlDataAdapter sda = new SqlDataAdapter(cmd);
  19. DataTable dt = new DataTable();
  20. sda.Fill(dt);
  21. con.Open();
  22. int i = cmd.ExecuteNonQuery();
  23. con.Close();
  24. if (dt.Rows.Count > 0) {
  25. Session["id"] = TextBox1.Text;
  26. Response.Redirect("Redirectform.aspx");
  27. Session.RemoveAll();
  28. } else {
  29. Label1.Text = "You're username and word is incorrect";
  30. Label1.ForeColor = System.Drawing.Color.Red;
  32. }
  33. }
  34. }
Design your Redirect Form Page so that user is redirected to his account page.

RedirectForm.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Redirectform.aspx.cs" Inherits="Redirectform" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. </head>
  8. <body bgcolor="#ffff99">
  9. <form id="form1" runat="server">
  10. <div>
  11. <p>
  12. <strong style="font-size: xx-large">Hello Everyone! Welcome to my Page.
  14. </strong>
  15. </p>
  16. </div>
  17. <asp:Image ID="Image1" runat="server" Height="335px"
  18. ImageUrl="~/2.jpg" Width="817px" />
  19. <p>
  20. </p>
  21. <p>
  22. <asp:Label ID="Label1" runat="server"></asp:Label>
  23. </p>
  24. <p>
  25. <asp:Button ID="Button1" runat="server" Height="47px" onclick="Button1_Click"
  26. Text="Logout" Width="92px" />
  27. </p>
  28. </form>
  29. </body>
  30. </html>
Redirectform.aspx.cs
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. public partial class Redirectform: System.Web.UI.Page {
  8. protected void Page_Load(object sender, EventArgs e) {
  9. Label1.Text = Session["id"].ToString();
  10. }
  11. protected void Button1_Click(object sender, EventArgs e) {
  12. Session.RemoveAll();
  13. Response.Redirect("Default.aspx");
  14. }
  15. }
OUTPUT CHAMBER


Figure 5: Login Form

Here I entered my username and word as “Nilesh” and “123”. When you login it will check the database if the details are correct then you will be redirected to other page otherwise not.


Figure 6: Welcome Page

Now as you logout from the account you again return to the loginform.aspx page with the saved username and word.


Figure 7: Login Page

Thank you for reading. Have a nice day. I hope you like it.