AJAX .Net VIII : PasswordStrength Extender

PasswordStrength extender provides immediate feedback to the user about the strength of a password based on the site's Password Strength policy.

Add an Ajax Web Form or a classical Asp .Net Page and add a ScriptManager instead.
PasswordStrength extends a TextBox.
Add a TextBox and set the TextMode to Password. Add a PasswordStrength extender and set its TargetId to the TextBox.







HelpStatusLabelId Property
If you want extra information on the status of Password Strength you can use HelpStatusLabelId property.
Place a Label and set the HelpStatusLabelId Property of PasswordStrength extender control to the Label.







MinimumSymbolCharacters Property
The above example expects the user to enter 10 characters. But in many cases the site expects you to provide additional special characters, numeric characters and the like to make a strong password for this you can use properties like MinimumSymbolCharacters, MinimumLowerCaseCharacters, MinimumUpperCaseCharacters and MinimumNumericCharacters properties of PasswordStrength extender control.

In this example I am setting MinimumSymbolCharacters of PasswordStrength extender control to 1. As shown in the figure the user is expected to enter a special character to make it unbreakable.








PasswordStrength BarIndicator
We exploring TextIndicator option of PasswordStrength. It is possible to have BarIndicator for a PasswordStrength extender control.
You should have a CSS class for enabling BarIndicator as shown in the figure below.




















Now you can specify the CSS class in BarBorderCssClass property.

cc1:PasswordStrength ID="PasswordStrength1" runat="server"
StrengthIndicatorType="BarIndicator"
TargetControlID="txtPassword"
BarIndicatorCssClass = ""
BarBorderCssClass="BarBorder"

The user is expected to provide BarIndicatorCSSClass property also. To make things simple I am omitting the value.

Ajax ASP .Net VII : Accordion Control and CollapsiblePanelExtender

First let's see Ajax in action.

The page is displaying Shalvin's content by default. Only headers of Site and Contact Info are visible.








When you click on Site and Blog header, it will show its contents and other contents are invisible as shown in the figure below.













Having seen the functionality lets try to implement it.
Working with Accordion is a bit tough in comparison to the controls I have already explained because you won't get a visual interface for working with Accordion and you have to work this control in source view.

If you are not familiar working with Asp .Net is source view visit my blog Asp .Net Introduction : Notepad way



















Inside the Accordion tag place a Panes tag. Inside Panes you can have AccodionPane. AccordionPane inturn have Header and Content. I have added a b tag for Header. In real time you have to use CSS for better look and feel.


Accordion Databinding

Accordion control would most likely be used in conjunction with database data.

Here I am creating an SqlDataSource Control that point to Northwind database's Suppliers table.

I am setting the DataSourceId property of Accordion to the SqlDataSource id and creating HeaderTemplate and ContentTemplate as shown below.

If you are not comfortable working with templated controls visit my blog Asp .net DataList.

Result

























Here I have made the header Bold and Underline. When you click on a header you can see the contents.










Adding CSS

CollapsiblePanelExtender

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
CollapseControlID="Header"
ExpandControlID= "Header"
TargetControlID="Content">
</asp:CollapsiblePanelExtender>
</div>

<asp:Panel ID="Header" runat="server" Height="16px" Width="293px">
<u>Shalvin P D </u></asp:Panel>

<asp:Panel ID="Content" runat="server">
.Net Consultant and Corporate trainer<br /> Blog :shalvinpd.blogspot.com
</asp:Panel>

Related Blogs

Ajax .Net I : Extension Controls in Visual Studio 2008

Ajax .Net II : Setting up Ajax Control Toolkit controls

Ajax .Net III : CalendarExtender Control

Ajax .Net IV : TextBoxWaterMarkExtender

Ajax .Net V : FilteredTextBoxExtender

Ajax .Net VI : ConfirmButtonExtender