Write and explain code in ASP. NET to create login page.
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 Create database abcd //Login is my database name Use abcd //Select database or use database
Create table Ulogin // create table Ulogin is my table name
(
UserId varchar(50) primary key not null, //primary key not accept null value
Password varchar(100) not null
)
insert into Ulogin values ('Krish','kk@321') //insert value in Ulogin table
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 Website. 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. 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.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 { width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td colspan="6" style="text-align: center; vertical-align: top">
</tr>
</table>
</div>
</form>
</body>
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.
Complete source code is given below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 { width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td colspan="6" style="text-align: center; vertical-align: top">
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="XX-Large" Font- Underline="True" Text="Log In "></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td style="text-align: center">
<asp:Label ID="Label2" runat="server" Font-Size="X-Large" Text="UserId
:"></asp:Label>
</td>
<td style="text-align: center">
<asp:TextBox ID="TextBox1" runat="server" Font-Size="X-Large"></asp:TextBox>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style="text-align: center">
<asp:Label ID="Label3" runat="server" Font-Size="X-Large" Text="Password
:"></asp:Label>
</td>
<td style="text-align: center">
<asp:TextBox ID="TextBox2" runat="server" Font-Size="X-Large" TextMode="Password"></asp:TextBox>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="text-align: center">
<asp:Button ID="Button1" runat="server" BorderStyle="None" Font-Size="X-Large" OnClick="Button1_Click" Text="Log In" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<asp:Label ID="Label4" runat="server" Font-Size="X-Large"></asp:Label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
