How to use Ajax PasswordStrength indicator example in asp.net for password field.

Introduction: In this article I am going to explain How to use Ajax PasswordStrength control in asp.net to show/display/Indicate the password strength while filling/entering password in the Password field on the Registration form/Signup form etc.

Ajax PasswordStrength example in asp.net
Click on image to enlarge
In previous articles i explained Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities and Ajax AutoCompleteExtender control example in asp.net using C#,VB.Net without using web service and Ajax Accordion example to create Vertical DropDown menu and Ajax ModalPopupExtender example to open login form in popup window and  Get age in years,months,days,hours and seconds from DOB

Description: On every registration form there are basic and compulsory fields like User Name, Password and some other basic information to fill. It is strongly recommended that the password should be secure and not guessable.
So to make password strong, it should be combination of characters, numbers, Upper case letter, Lower case letter, Special symbol etc. Ajax provides the PasswordStrength control for displaying the password strength during entering password in the password field. I have implemented PasswordStrength in 3 styles i.e.
  1. Simple Password Strength
  2. Text
  3. BarIndicator
All of them are implemented in this example. In the First password field as shown in Demo figure I have implemented PasswordStrength using Basic properties. In the Second Password Field I have implemented the Text style and in the Third I have implemented PasswordStrength in BarIndicator style.

Below is the list of applicable properties of the PasswordStrength that you can set as per application requirement.

  • TargetControlID - ID of the TextBox to which password strength is to be attached.
  • DisplayPosition – Using this property we can set position of the strength indicator relative to the target control.
  • StrengthIndicatorType – There are two strength indicator types i.e. Text or BarIndicator.
  • PreferredPasswordLength – using this we can set preferred length of the password.
  • PrefixText – It is text prefixed to the display text when the StrengthIndicatorType=Text
  • TextCssClass – It is CSS class applied to the text display when the StrengthIndicatorType=Text
  • MinimumNumericCharacters – Using this we can set Minimum number of numeric characters required for password.
  • MinimumSymbolCharacters - Using this we can set Minimum number of symbol characters (ex: @#$ etc) required.
  • RequiresUpperAndLowerCaseCharacters - Specifies whether mixed case characters are required
  • MinimumLowerCaseCharacters – Applicable only if RequiresUpperAndLowerCaseCharacters property is set to true. It specifies the minimum number of lowercase characters required when requiring mixed case characters as part of your password strength considerations.
  • MinimumUpperCaseCharacters - Applicable only if RequiresUpperAndLowerCaseCharacters property is set to true. Specifies the minimum number of uppercase characters required when requiring mixed case characters as part of your password strength considerations.
  • TextStrengthDescriptions – It is List of semi-colon separated descriptions used when StrengthIndicatorType=Text (Minimum of 2, maximum of 10; order is weakest to strongest)
  • CalculationWeightings - List of semi-colon separated numeric values used to determine the weighting of a strength characteristic. There must be 4 values specified which must total 100. The default weighting values are defined as 50;15;15;20. This corresponds to password length is 50% of the strength calculation, Numeric criteria is 15% of strength calculation, casing criteria is 15% of calculation, and symbol criteria is 20% of calculation. So the format is 'A;B;C;D' where A = length weighting, B = numeric weighting, C = casing weighting, D = symbol weighting.
  • BarBorderCssClass – It is a CSS class applied to give style to the bar indicator's border when StrengthIndicatorType=BarIndicator
  • BarIndicatorCssClass – It is a CSS class applied to give style to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator
  • StrengthStyles - List of semi-colon separated CSS classes that are used depending on the password's strength. This property will override the BarIndicatorCssClass / TextIndicatorCssClass property if present. The BarIndicatorCssClass / TextIndicatorCssClass property differs in that it attributes one CSS style to the BarIndicator or Text Strength indicator (depending on which type is chosen) regardless of password strength. This property will cause the style to change based on the password strength and also to the number of styles specified in this property. For example, if 2 styles are defined like StrengthStyles="style1;style2" then style1 is applied when the password strength is less than 50%, and style2 is applied when password strength is >= 50%. This property can have up to 10 styles.
  • HelpStatusLabelID - Control ID of the label where you want to display the help text.
  • HelpHandleCssClass – It is a CSS class applied to the help element used to display a dialog box describing the password requirements
  • HelpHandlePosition – Using this property we can set the position of the help handle element relative to the target control


Implementation: In the <Head> tag of the design page (.aspx) create the styles for the PasswordStrength as: 

<style type="text/css">
.VeryWeekStrength
{
background: Red;
color:White;
}
.WeakStrength
{
background:orange;
color:White;
}
.AverageStrength
{
background: Gray ;
color:White;
}
.GoodStrength
{
background: blue;
color:White;
}
.ExcellentStrength
{
background: Green;
color:White;
}
.BarBorderStyle
{
padding: 2px;
border-style:solid ;
border-color:Gray;
border-width: 1px;
width: 150px;
}
</style>

But It is always recommended to place all the styles in the CSS ( Cascade  Style sheet) so that they can be used anywhere in the project. So to add stylesheet in the website goto website menu and click Add New item.. -> Select StyleSheet.css.

  • In the Stylesheet.css paste the following

.VeryWeekStrength
{
background: Red;
color:White;
}
.WeakStrength
{
background:orange;
color:White;
}
.AverageStrength
{
background: Gray ;
color:White;
}
.GoodStrength
{
background: blue;
color:White;
}
.ExcellentStrength
{
background: Green;
color:White;
}
.BarBorderStyle
{
border-style:solid ;
border-color:Gray;
border-width: 1px;
width: 150px;
padding: 2px;
}
 and save the file.

  • Now to use this StyleSheet we have to link this stylesheet with our design page (.aspx) . So in the <Head> tag add the line <link href="StyleSheet.css" rel="stylesheet" type="text/css" />.  
  • You can also drag the Stylesheet.css from the solution explorer to the <Head> tag. It will automatically create the <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> line.

In the <Form> tag place the ScriptManager control from the AJAX Extension category of the Visual Studio toolbox. Place a Label control from the standard category. Also place PasswordStrength control from the AjaxControlToolkit. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.

  <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <fieldset style="width:480px;">
    <legend>Ajax PasswordStrength examples in asp.net</legend>
    <table>
      <tr>
    <td>Password: </td>
    <td>
        <asp:TextBox ID="txtPwdDemo1" runat="server" TextMode="Password"></asp:TextBox>
        <asp:PasswordStrength ID="PasswordStrength1"
            runat="server"
            TargetControlID="txtPwdDemo1"    
            StrengthIndicatorType="Text"          
            PrefixText="Password Strength: " >
        </asp:PasswordStrength></td>
    </tr>   
    <tr>
     <td>Password: </td>
    <td>
     <asp:TextBox ID="txtPwdDemo2" runat="server" TextMode="Password"></asp:TextBox>
        <asp:PasswordStrength ID="PasswordStrength2"
            runat="server"
            TargetControlID="txtPwdDemo2"       
            DisplayPosition="RightSide"
            StrengthIndicatorType="Text"
            PreferredPasswordLength="8"
            PrefixText="Password Strength: "
            TextCssClass="TextIndicator_TextBox1"
            MinimumNumericCharacters="1"
            MinimumSymbolCharacters="1"
            MinimumLowerCaseCharacters="1"
            MinimumUpperCaseCharacters="1"
            RequiresUpperAndLowerCaseCharacters="true"
            TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"           

            StrengthStyles="VeryWeekStrength;WeakStrength;
AverageStrength;GoodStrength;ExcellentStrength"
            CalculationWeightings="50;15;15;20"
            HelpStatusLabelID="lblStatus"
            HelpHandlePosition="BelowRight">
        </asp:PasswordStrength>
        </td>
    </tr>
    <tr>
     <td>Password: </td>
    <td>
     <asp:TextBox ID="txtPwdDemo3" runat="server" TextMode="Password"></asp:TextBox>
        <asp:PasswordStrength ID="PasswordStrength3"
            runat="server"
            TargetControlID="txtPwdDemo3"       
            DisplayPosition="RightSide"
            StrengthIndicatorType="BarIndicator"
            PreferredPasswordLength="8"
            PrefixText="Password Strength: "          
            MinimumNumericCharacters="1"
            MinimumSymbolCharacters="1"
            MinimumLowerCaseCharacters="1"
            MinimumUpperCaseCharacters="1"
            RequiresUpperAndLowerCaseCharacters="true"
            TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"           

            StrengthStyles="VeryWeekStrength;WeakStrength;
AverageStrength;GoodStrength;ExcellentStrength"
            BarBorderCssClass="BarBorderStyle"
            CalculationWeightings="50;15;15;20"
            HelpStatusLabelID="lblStatus"
            HelpHandlePosition="BelowRight">
        </asp:PasswordStrength>
        </td>
    </tr>
    <tr>
   <td></td>
    <td>
        <asp:Label ID="lblStatus" runat="server" Text="" style="color: #FF0000"></asp:Label>       
        </td>
    </tr>
      </table>
    </fieldset>
    </div>

Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing  PasswordStrength control on design page.

Now run the application and check .

Now over to you:
" I hope you have learned how to use Ajax PasswordStrength indicator in asp.net for password field with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

10 comments

Click here for comments
Anonymous
admin
September 20, 2013 ×

Nice Explanation....

Reply
avatar
Anonymous
admin
September 20, 2013 ×

Nice Explanation...but this control does not restrict user to write password according to the requirement when he clicks on submit button. I want to restrict it. How can I do this?? Is there any property of this control to do this???
Please help...

Reply
avatar
September 20, 2013 ×

thanks..keep reading :)

Reply
avatar
Chanchal Purbia
admin
September 24, 2013 ×

Does anyone know d solution of above question??

Reply
avatar
September 24, 2013 ×

This control only indicate the password format to enter or we can say it is like guideline for entering password.. if you want to restrict the user then you can use javascript, jQuery or server side validations.. read the following articles:

Example to implement Jquery form validations in asp.net C#,Vb.net
http://www.webcodeexpert.com/2013/06/example-to-implement-jquery-form.html

JavaScript validation in asp.net website
http://www.webcodeexpert.com/2013/03/javascript-validation-in-aspnet-website.html

Reply
avatar
Chanchal Purbia
admin
October 03, 2013 ×

Thanx 4 d links....

Reply
avatar
Unknown
admin
December 01, 2013 ×

sir m Not getting password strength toolkit so how could i get

Reply
avatar
December 02, 2013 ×

Have you installed the ajax control toolkit? if not go the link http://www.webcodeexpert.com/2013/02/how-to-install-ajax-control-toolkit-in.html and download and install first...

Reply
avatar
Unknown
admin
December 27, 2013 ×

Ajax Control Toolkit is not work for me

Reply
avatar
January 01, 2014 ×

Hello moelay.thazinaung Thazinaung,
Have you installed the ajax control toolkit? if not go the link http://www.webcodeexpert.com/2013/02/how-to-install-ajax-control-toolkit-in.html and download and install first...
if still you are facing problem them let me know the error you are facing..i will help you to sort out that error..

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..