ASP.NET

How To Create Login Page In ASP.NET Web Application Using C# And SQL Server

Introduction

This article demonstrates how to create a login page in an ASP.NET Web Application, using C# connectivity by SQL server. This article starts with an introduction of the creation of the database and table in SQL Server. Afterwards, it demonstrates how to design ASP.NET login page. In the end, the article discusses how to create a connection ASp.NET Web Application to SQL Server.

Prerequisites

VS2010/2012/2013/15/17, SQL Server 2005/08/2012

Project used version

VS2013, SQL SERVER 2012

Step 1 

Creating a database and a table

To create a database, write the query in SQL Server 

  1. Create database abcd     //Login is my database name  
  2. Use abcd                    //Select database or use database  
  3. Create table Ulogin           // create table Ulogin is my table name  
  4. (  
  5.    UserId varchar(50) primary key not null,   //primary key not accept null value  
  6.    Password varchar(100) not null  
  7. )  
  8. insert into  Ulogin values ('Krish','kk@321')     //insert value in Ulogin table   

Proceed, as shown below.

ASP.NET
Figure 1

Step 2

Step 1 is complete. Let’s start design login view in ASP.NET Web Application. I am using simple design to view this article is not the purpose of design, so let’s start opening VS (any version) and go to File, select New select Web site. You can also use shortcut key (Shift+Alt+N). When you are done with expanding Solution Explorer, right click on your project name, select add click Add New Item (for better help, refer the screenshot given below). Select Web Form, if you want to change Web form name. You can save it as it is. Default.aspx is added in my project.

ASP.NET

ASP.NET

Now, let’s design my default.aspx page in <div >tag insert table, as per required the rows and columns and set the layout style of the table. If you want all tools set in center, go to Table propeties and click Style text align.

ASP.NET
The source code is given below.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .auto-style1 {  
  10.             width: 100%;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.     <div>  
  17.       
  18.         <table class="auto-style1">  
  19.             <tr>  
  20.                 <td colspan="6" style="text-align: center; vertical-align: top">  
  21. </tr>  
  22. </table>  
  23.       
  24.     </div>  
  25.     </form>  
  26. </body>  
  27. </html>  

Afterwards, drag and drop two labels, two textbox and one button below design view source code. Set the password textbox properties Text Mode as a password.

  1. <asp:TextBox ID="TextBox2" runat="server" Font-Size="X-Large" TextMode="Password"></asp:TextBox>  

ASP.NET

Complete source code is given below.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .auto-style1 {  
  10.             width: 100%;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.     <div>  
  17.       
  18.         <table class="auto-style1">  
  19.             <tr>  
  20.                 <td colspan="6" style="text-align: center; vertical-align: top">  
  21.                     <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="XX-Large" Font-Underline="True" Text="Log In "></asp:Label>  
  22.                 </td>  
  23.             </tr>  
  24.             <tr>  
  25.                 <td> </td>  
  26.                 <td style="text-align: center">  
  27.                     <asp:Label ID="Label2" runat="server" Font-Size="X-Large" Text="UserId :"></asp:Label>  
  28.                 </td>  
  29.                 <td style="text-align: center">  
  30.                     <asp:TextBox ID="TextBox1" runat="server" Font-Size="X-Large"></asp:TextBox>  
  31.                 </td>  
  32.                 <td> </td>  
  33.                 <td> </td>  
  34.                 <td> </td>  
  35.             </tr>  
  36.             <tr>  
  37.                 <td> </td>  
  38.                 <td style="text-align: center">  
  39.                     <asp:Label ID="Label3" runat="server" Font-Size="X-Large" Text="Password :"></asp:Label>  
  40.                 </td>  
  41.                 <td style="text-align: center">  
  42.                     <asp:TextBox ID="TextBox2" runat="server" Font-Size="X-Large" TextMode="Password"></asp:TextBox>  
  43.                 </td>  
  44.                 <td> </td>  
  45.                 <td> </td>  
  46.                 <td> </td>  
  47.             </tr>  
  48.             <tr>  
  49.                 <td> </td>  
  50.                 <td> </td>  
  51.                 <td> </td>  
  52.                 <td> </td>  
  53.                 <td> </td>  
  54.                 <td> </td>  
  55.             </tr>  
  56.             <tr>  
  57.                 <td> </td>  
  58.                 <td> </td>  
  59.                 <td style="text-align: center">  
  60.                     <asp:Button ID="Button1" runat="server" BorderStyle="None" Font-Size="X-Large" OnClick="Button1_Click" Text="Log In" />  
  61.                 </td>  
  62.                 <td> </td>  
  63.                 <td> </td>  
  64.                 <td> </td>  
  65.             </tr>  
  66.             <tr>  
  67.                 <td> </td>  
  68.                 <td> </td>  
  69.                 <td>  
  70.                     <asp:Label ID="Label4" runat="server" Font-Size="X-Large"></asp:Label>  
  71.                 </td>  
  72.                 <td> </td>  
  73.                 <td> </td>  
  74.                 <td> </td>  
  75.             </tr>  
  76.         </table>  
  77.       
  78.     </div>  
  79.     </form>  
  80. </body>  
  81. </html>  

Step 3

Let’s create connection Web Application to SQL Server. Double click in Log in button. Prior to doing this, open web config file, write add connection code given below.

  1. <connectionStrings>  
  2.     <add name="mycon" connectionString="server=KRISHNA\SQLEXPRESS;database=abcd;integrated security=true;" />  
  3.   </connectionStrings>  

Write the source code for the connection, add namespace for SQL Server.

  1. using System.Data.SqlClient; //this namespace is for sqlclient server  
  2. using System.Configuration; // this namespace is add I am adding connection name in web config file config connection name  

Create a SQL connection object with the connection name and write the code given below.

  1. SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());  

Adding a Button Click Event Handler

The Click attribute of the button element adds the click event handler. The code given below adds the click event handler for a button.

  1. <td style="text-align: center">  
  2.                     <asp:Button ID="Button1" runat="server" BorderStyle="None" Font-Size="X-Large" OnClick="Button1_Click" Text="Log In" />  
  3.                 </td>  

The code for the click event handler looks, as shown below.

  1. protected void Button1_Click(object sender, EventArgs e)  
  2. {  
  3.   
  4. }  

Now, whatever code you write in the click event handler, it will be executed on the click of a button.

  1. private void DrawCircleButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3. try{  
  4.         string uid = TextBox1.Text;  
  5.         string pass = TextBox2.Text;  
  6.         con.Open();  
  7.         string qry = "select * from Ulogin where UserId='" + uid + "' and Password='" + pass + "'";  
  8.         SqlCommand cmd = new SqlCommand(qry,con);  
  9.         SqlDataReader sdr = cmd.ExecuteReader();  
  10.         if(sdr.Read())  
  11.         {  
  12.             Label4.Text = "Login Sucess......!!";  
  13.         }  
  14.         else  
  15.         {  
  16.             Label4.Text = "UserId & Password Is not correct Try again..!!";  
  17.   
  18.         }  
  19.             con.Close();  
  20.         }  
  21.         catch(Exception ex)  
  22.         {  
  23.             Response.Write(ex.Message);  
  24.         }  
  25. }      
  26.   
  27. }  

Final output is given below.

ASP.NET

 ASP.NET

Summary

In this article, I discussed how to create login page in ASP.NET Web Application, using C# connectivity by SQL Server. We also saw how  we we create a database and create a table. Afterwards, we saw how to design ASP.NET login view and its properties to insert the table. In the end of this article, we saw how to connect an ASP.NET Web Application to SQL server. My next article will discuss how to validate textbox, so stay tuned. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs