Creating a Simple AJAX Control in ASP.NET 2.0 and C#

Category: AJAX

A Simple AJAX control in ASP.NET 2.0 and C#

Introduction

In this article I will explain how you can easily create an AJAX enabled web site within Visual Studio 2005 utilizing C# and how to utilize the AJAX framework to add a simple control from the list of controls available in the AJAX Control Toolkit.
The AJAX control we will be working with in this article is the “PasswordStrength” control. As mentioned above this control is in the AJAX Control Toolkit we installed in the previous article of this series. We will also learn that the PasswordStrength control can easily secure passwords as they are being entered and notify the user real time as to what else they need to add to their password in order for it to meet your requirements.
In the previous article we learned the following about AJAX and what you can with it?
“ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers.”

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

ASP.NET AJAX:

  • Create interfaces with AJAX components that can be reused.
  • Upgrade your existing pages with AJAX controls.
  • AJAX comes with support for all modern browsers
  • AJAX comes as part of Visual Studio 2008 and does not need to be downloaded and installed as in Visual Studio 2005.

What we will learn in this article:

  • How to Create an AJAX enabled Web Site
  • How to utilize the PasswordStrength control

Please Note:
AJAX functionality is integrated in ASP.NET 3.5 and does not require any additional downloads. If you are using ASP.NET 3.5 this article does not apply to you.

Getting Started with our AJAX Application

Before we begin coding we will need to download the AJAX framework and install it onto our system in order to have the framework available for us to create our first AJAX web project.
In our previous article titled “Getting Started with AJAX, ASP.NET 2.0 and C#“ we went through the steps involved to install AJAX and how to AJAX enable Visual Studio. We explained where to go to find out about AJAX and that you could download step by step tutorials that will guide you through using every control within the AJAX Control Toolkit.
Here is the AJAX web site for you to add to your bookmarks in your favorite browser:
http://www.asp.net/

Configure Visual Studio 2005

  • The first step in our process is to create a new web site from the ASP.NET AJAX web site template by opening the "File" menu, and clicking "New Web Site...", and selecting the "ASP.NET AJAX-Enabled Web Site" under "Visual Studio Installed Templates".

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Fig. 1


[Click to see full-size]

 

  • You will be presented with the following “Default.aspx.cs” generated file. You will notice that there is a reference to a control called ScriptManager and that there is a ScriptManager control on the form called “ScriptManager1”. This is a required control for the AJAX framework and when it is needed this control will always be generated and added to your form as you drop AJAX controls onto your form.




Untitled Page








  • The next step is to add the TextBox that we will be using for entering the password. This is also the “TargetControlID” of the PasswordStrength control. Meaning that we are extending the TextBox control with the PasswordStrength functionality.

  • The next step is to add the label that will hold the help text as we are typing the password. This is a real time display and is constantly changing based on your keystrokes entered into the TextBox.

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!


  • The next step is to drop the PasswordStrength control onto your web page. We do that by adding the following entry into the Markup.

TextCssClass="TextIndicator_TextBox1"
HelpStatusLabelID="Label1"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
DisplayPosition="RightSide"
PreferredPasswordLength="6"
RequiresUpperAndLowerCaseCharacters="True"
StrengthIndicatorType="Text"
TargetControlID="TextBox1"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent">

The properties in the above code example do not reflect the entire list of properties available for this control. These are the properties that we are using for this example to give you an insight on how to use this control.

PasswordStrength Properties

TextCssClass="TextIndicator_TextBox1"

This is the CSS class applied to the text display, this does not apply when using the StrengthIndicatorType =”BarIndicator”

HelpStatusLabelID="Label1"

This is the control that is used to display the help text, in our example this is the Label1 control.

MinimumNumericCharacters="1"

This sets the minimum allowable numeric characters within your password. For example, setting this value to “1” means that you have to have at least 1 numeric value within your password.
 

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

MinimumSymbolCharacters="1"

This sets the minimum allowable symbol characters within your password. For example, setting this value to “1” means that you have to have at least 1 symbol within your password. Symbol characters (ex: # % @)

DisplayPosition="RightSide"

This sets the position of the strength indicator corresponding to the target controls position. By setting this to the “RightSide” our strength indicator will be located on the right hand side of our textbox.

PreferredPasswordLength="6"

This is the minimum preferred length you would like the password to be.

RequiresUpperAndLowerCaseCharacters="True"

This setting states that you want upper and lower case characters within your Password.

StrengthIndicatorType="Text"

This setting dictates whether you will have a strength indicator that is a bar or whether it will be text. In our example we used text for our strength indicator.

TargetControlID="TextBox1"

This is the control that you are extending with the PasswordStrength, this is the TextBox where we will be typing in the password and watching how the indicators and text react together.

TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent">

This is a list of semi-colon delimited descriptions that we can use when StrengthIndicatorType=Text. There is a minimum of 2 values and a maximum of 10 values that can used, the order of the values are weakest to strongest)

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

We have now covered all of the pertinent points of using the PasswordStrength control within the AJAX Control Toolkit. We are ready to run our example and see how the application works. The following screen shot will show what the application will look like.

What our example application will look like
Fig. 2

 

What we have Learned

We have learned that we can easily create an AJAX enabled web site and that we can add AJAX controls to it very easily. In our example we added the PasswordStrength control and explained how we can now display easy to follow visual aids with our password controls.

Attachments

I use this site frequently and so should you, go to www.asp.net. Their reference material was very helpful when it came to researching this article.

Attachments



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!