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.

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

• Tweet
• Share
• Share
• Share

Related Post