Note: This program will work only on Internet Explorer.
In this article I explain the best way to implement a simple login form to check the account information details of a user within a database. If the user details can be found in the database then we should instead redirect user to welcome page otherwise we should instead display "Invalid Username/Password". This is very common for all your websites before accessing it.
First I create a database named "EmpDetail". Then I create a table in this database.
Query Code
CREATE TABLE [dbo].[LoginDetail](
[Username] [varchar](50) NULL,
[Passwrd] [varchar](50) NULL
) ON [PRIMARY]
Now insert some data in the LoginDetail table.
The following procedure is used for that.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
![application-name.jpg]()
Give the name of your application as "Login_page" and then click "Ok".
Step 2
The project will then have been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file and aspx page.
![solution-explorere.jpg]()
Code
loginpage.ts
class Login_Page
{
Login()
{
var a = 0;
var txtuname = (<HTMLTextAreaElement>(document.getElementById('txtusername'))).value;
var txtpwd = (<HTMLTextAreaElement>(document.getElementById('txtpasswrd'))).value;
if (txtuname.length != 0 && txtpwd.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=******;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);
while (!rs.eof) {
alert("Welcome to " + txtuname + "\n you are successfully login");
a = 1;
rs.MoveNext();
}
if (a == 0) {
alert("Invalid UserName and Password");
}
rs.close();
connection.close();
}
else {
alert("Please Enter Values in Textbox ");
}
}
Cancel() {
document.getElementById('txtusername').innerText = "";
document.getElementById('txtpasswrd').innerText = "";
}
}
window.onload = () =>
{
var bttnLogin = document.getElementById('login');
var bttnCancel = document.getElementById('cancel');
var obj = new Login_Page();
bttnLogin.onclick = function ()
{
obj.Login();
}
bttnCancel.onclick = function ()
{
obj.Cancel();
}
};
Login_Page.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login_Page.aspx.cs" Inherits="Login_Page.Login_Page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="loginpage.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="font-size: medium; color: #000000;">
<legend style="background-color:#CCCCFF; font-size: larger;font-weight:bold">Login Page in TypeScript</legend>
<br />
<b>UserName</b>
<input id="txtusername" type="text" /><br />
<br />
<b>Password</b>
<input id="txtpasswrd" type="password" /><br />
<br />
<input id="login" type="button" value="Login" />
<input id="cancel" type="button" value="Cancel" />
</fieldset>
</div>
</form>
</body>
</html>
loginpage.js
var Login_Page = (function () {
function Login_Page() { }
Login_Page.prototype.Login = function () {
var a = 0;
var txtuname = ((document.getElementById('txtusername'))).value;
var txtpwd = ((document.getElementById('txtpasswrd'))).value;
if(txtuname.length != 0 && txtpwd.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=password@123;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);
while(!rs.eof) {
alert("Welcome to " + txtuname + "\n you are successfully login");
a = 1;
rs.MoveNext();
}
if(a == 0) {
alert("Invalid UserName and Password");
}
rs.close();
connection.close();
} else {
alert("Please Enter Values in Textbox ");
}
};
Login_Page.prototype.Cancel = function () {
document.getElementById('txtusername').innerText = "";
document.getElementById('txtpasswrd').innerText = "";
};
return Login_Page;
})();
window.onload = function () {
var bttnLogin = document.getElementById('login');
var bttnCancel = document.getElementById('cancel');
var obj = new Login_Page();
bttnLogin.onclick = function () {
obj.Login();
};
bttnCancel.onclick = function () {
obj.Cancel();
};
};
//@ sourceMappingURL=loginpage.js.map
Output 1
Enter username and password:
![enter-username-pwd.jpg]()
Click on the Login button:
![wlcome-msg.jpg]()
Output 2
If we click on the Login button without entering a value in the TextBox then:
![blank-msg.jpg]()
Output 3
If we enter an incorrect UserName or Password then:
![enter-wrong-pwd-uname.jpg]()
Output 4
If you enter a valid UserName and Password and then click on the Cancel button then:
![enter-username-pwd.jpg]()
After clicking on the Cancel button:
![cancel-click.jpg]()
For more information, download the attached sample application.