Create Simple Login Form Using Password Widget in ASP.Net

Nilesh Jadav
Jun 08, 2015
8.3k
0
1
Article

Initial Chamber

Step 1

Open Visual Studio 2010 and create an Empty Website, name it LoginForm_demo.

Step 2

In Solution Explorer you will 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) and right-click to Add New Item, then click Web Form and name it Login_demo.aspx. Repeat the same process and add another Web form and name it Redirectpage.aspx.

Add jQuery to your website (by just copying and pasting it).

These are the files that you need, you can get these files by downloading my application source code.

Design Chamber

Step 3

Now make some design for your application by going to Login_demo.aspx and try the code like this.

Login_demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="pwdwidget.css" rel="stylesheet" type="text/css" />
<script src="pwdwidget.js" type="text/javascript"></script>
<style type="text/css">
#man
{
margin:40px 40px 40px 40px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<strong id="man">Login Form</strong>
<p>---------------------------------------------------------------------------------------</p>
<div>
<asp:Label ID="Label2" runat="server" Text="EmailId:"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<asp:Label ID="Label1" runat="server" Text="word:"></asp:Label>
<div class='pwdwidgetdiv' id='thepwddiv'></div>
<script type="text/javascript">
var pwdwidget = new wordWidget('thepwddiv', 'regpwd');
pwdwidget.enableGenerate = true;
pwdwidget.enableShowStrength = true;
pwdwidget.MakePWDWidget();
</script>
<div>
<asp:Button ID="Button1" runat="server" Text="Log in" onclick="Button1_Click" />
</div>
<p>----------------------------------------------------------------------------------------</p>
</div>
</form>
</body>
</html>

This is the JavaScript where you can enable word Generate to “True” and can also show the strength of your word.

Code Chamber

In Code Chamber we just redirect the user to a new page, so just write redirect code in the button click event.

Login_demo.aspx.cs