Post
Ask Question

Create Simple Login Form Using Password Widget in ASP.Net

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).

Add JQuery

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <link href="pwdwidget.css" rel="stylesheet" type="text/css" />  
  9.     <script src="pwdwidget.js" type="text/javascript"></script>  
  10.   
  11.     <style type="text/css">  
  12.     #man  
  13.     {  
  14.         margin:40px 40px 40px 40px;  
  15.      }  
  16.       
  17.       
  18.     </style>  
  19.   
  20.   
  21.      
  22. </head>  
  23. <body>  
  24.   
  25.     <form id="form1" runat="server">  
  26.     <div>  
  27.     <strong id="man">Login Form</strong>  
  28.     <p>---------------------------------------------------------------------------------------</p>  
  29.       
  30.     <div>  
  31.     <asp:Label ID="Label2" runat="server" Text="EmailId:"></asp:Label>  
  32.     </div>  
  33.     <div>  
  34.             <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>   
  35.      </div>  
  36.      <asp:Label ID="Label1" runat="server" Text="word:"></asp:Label>  
  37.     <div class='pwdwidgetdiv' id='thepwddiv'></div>  
  38.         <script type="text/javascript">  
  39.             var pwdwidget = new wordWidget('thepwddiv', 'regpwd');  
  40.             pwdwidget.enableGenerate = true;  
  41.             pwdwidget.enableShowStrength = true;  
  42.             pwdwidget.MakePWDWidget();  
  43.         </script>  
  44.   
  45.         <div>  
  46.         <asp:Button ID="Button1" runat="server" Text="Log in" onclick="Button1_Click" />  
  47.         </div>  
  48.      <p>----------------------------------------------------------------------------------------</p>     
  49.       
  50.     </div>  
  51.     </form>  
  52.   
  53. </body>  
  54. </html>  
Enable word Generate

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
  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.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.   
  13.     }  
  14.     protected void Button1_Click(object sender, EventArgs e)  
  15.     {  
  16.         Response.Redirect("Default2.aspx");  
  17.   
  18.     }  
  19. }  
Output Chamber

Output

word Strength

word Strength

Show and mask the word

Show and mask the word

Auto Generate word

Auto Generate word

I hope you like this. Have a good day, thank you for reading!


Similar Articles