Working With the PasswordStrength Control in AJAX

Davin Martyn
Jan 30, 2012

19.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. AJAX can help develop a web application and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

JavaScript
XML
Asynchronous Call to the server

PasswordStrength Control

The PasswordStrength extender shows the strength of the password in the TextBox and updates itself as the user types the password. The indicator can display the strength of the password as a text message or with a progress bar indicator. The styling and position of both types of indicators is configurable. The required strength of the password is also configurable, allowing the page author to tailor the password strength requirements to their needs.

Property

TargetControlID
DisplayPosition
StrengthIndicatorType
BarBorderCssClass
BarIndicator
PrefixText

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to the Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Go to the Default.aspx page and click on the [Design] option and drag the control from the Toolbox.

Drag ScriptManager control, UpdatePanel control, Label,TextBox

Define Content Template for UpdatePanel

Step 4 : Go to Default.aspx [Source] option and define <ContentTemplate>.

<ContentTemplate>
<h1 style="background-color: #CEC2B3">write password and check strength indicator</h1>
    <asp:TextBox ID="TextBox1" runat="server" Width="200px" TextMode="Password"></asp:TextBox>
    <br />
    <br />
    <br />
        Enter Password
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <br />
    <br />
    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
    <asp:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="TextBox1" DisplayPosition="RightSide"    StrengthIndicatorType="BarIndicator" BarBorderCssClass="barBorder" BarIndicatorCssClass="barInternal" PrefixText="Strength:" HelpStatusLabelID="Label1" PreferredPasswordLength="8" MinimumNumericCharacters="1" MinimumSymbolCharacters="1" >
</asp:PasswordStrength>

Step 5 : We have two Textboxes inside the Update Panel. For the one that will perform a successful Ajax postback, define the textbox property "TextMode="Password".

Code

<asp:TextBox ID="TextBox1" runat="server" Width="200px" TextMode="Password"></asp:TextBox>

Step 6 : Go to the Default.aspx page [Design] option and click on the UpdatePanel Control.

Select the Properties option and define UpdateMode

Step 7 : We will define CSS for the Password Strength.

Code

<style type="text/css">
.barBorder
{
      border: solid 1px red;
      width: 300px;
}
.barInternal
{
      background: Red;
}
.barInternalGreen
{
      background: green;
}
</style>

Step 8 : Go to the Toolbox option and drag Password Strength Extender control.

Step 9 : Go to the Default.aspx[Source] page option and define all Password Strength property.

Code

<asp:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="TextBox1" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator"
BarBorderCssClass="barBorder" BarIndicatorCssClass="barInternal" PrefixText="Strength:" HelpStatusLabelID="Label1" PreferredPasswordLength="8"
MinimumNumericCharacters="1" MinimumSymbolCharacters="1" >
</asp:PasswordStrength>

Step 10 : Go to the Default.aspx page and write the following code:

Code

<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.barBorder
{
border: solid 1px red;
width: 300px;
}
.barInternal
{
background: Red;
}
.barInternalGreen
{
background: green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="background-color: #978168">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h1 style="background-color: #CEC2B3">write password and check strength indicator</h1>
<asp:TextBox ID="TextBox1" runat="server" Width="200px" TextMode="Password"></asp:TextBox>
<br />
<br />
<br />
Enter Password
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<asp:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="TextBox1" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator"
BarBorderCssClass="barBorder" BarIndicatorCssClass="barInternal" PrefixText="Strength:" HelpStatusLabelID="Label1" PreferredPasswordLength="8"
MinimumNumericCharacters="1" MinimumSymbolCharacters="1" >
</asp:PasswordStrength>
<asp:PasswordStrength ID="PasswordStrength2" runat="server" TargetControlID="TextBox2" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator"
BarBorderCssClass="barBorder" BarIndicatorCssClass="barInternal" PrefixText="Strength:" HelpStatusLabelID="Label2" PreferredPasswordLength="8"
MinimumNumericCharacters="1" MinimumSymbolCharacters="1" >
</asp:PasswordStrength>
</ContentTemplate>
</asp:UpdatePanel>
</div>

Step 11 : Now run the application by Pressing F5.