In this article, we will be looking at the AJAX Toolkit from Microsoft. This article is directed at users of Visual Studio.NET 2008, but users of the 2005 version may also take part, but will be required to install the AJAX Extensions from Microsoft.
The AJAX Control Toolkit is a group of AJAX Extenders that was released by Microsoft to make it easier for us to implement seemingly complex functions. Microsoft have made it very easy for us to implement into our web applications such dynamic features as rating systems, modal popup windows, and dynamic searching of a listbox. During this article, we will be looking at these implementations of AJAX a little more closely, but to do so, you will need to download the AJAX Control Toolkit from this link.
If you need any help with installing the Toolkit for VS.NET 2005, please view this article.
When implementing AJAX in an ASP.NET Web Application, the first thing we need to do is add a ScriptManager to the page. The ScriptManager will manage all of our AJAX calls for us, and will look something like this:
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
We should have our AJAX Toolkit in our toolbox in VS.NET, and should be able to just drag and drop any of the extenders into our ASPX page. The first we will be taking a look at will be the TextBoxWatermarkExtender. This will extend any TextBox on your page to include a Watermark of sorts that will be displayed when the textbox is empty. When the user clicks on the textbox, the watermark will disappear - only to re-appear if the textbox is still empty when it loses focus.
To use this extender, let's first add a textbox to our ASPX page:
Next, we can drag onto our ASPX page the Extender. When we do this, you should notice two things. Number one should be the assembly reference for the Custom Control, which is added at the top of the page, and two, the Extender itself is added where you dragged it onto.
The assembly reference will look something like this, just below the page directive:
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
And the Extender itself should look something like this:
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="fld_Name"
Notice that the only attributes that are required for this extender are to specify the TextBox control that it will be assigned to, and specify the text to be displayed as a Watermark. An optional third attribute is to use a CSS Class for the Watermark. In this example, we use the following CSS style:
{
font-style:italic;
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
Now if you run this page you will see the Watermark displayed in the textbox on page load. The watermark will disappear when you click the textbox and enter some text. However, if you delete that text and then click off of the textbox (losing its focus), the Watermark will re-appear. Notice that all of this happens without a delay - in true AJAX style.
The next Extender we can demonstrate is the ModalPopupExtender. With this control, we can set a Control to popup, and have the rest of the page disabled. This is useful when generating confirmation messages, or warnings, etc.
For this example, we will create a Panel to popup on a button click. Let's go ahead and add a Button and a Panel to our ASPX page:
<asp:Panel ID="panel_ModalPopup" runat="server" CssClass="ModalPopup">
<asp:Button ID="btn_Ok" runat="server" Text="OK" />
I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
Notice we specify a CSS Class for the panel, to make it stand out more. We also create a class for the background, which will cover the whole page when the popup is visible. We will assign this class to the ModalPopupExtender shortly. The CSS Classes look like this:
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
.ModalPopup
{
padding:15px;
border: solid 1px #000;
Now we can drag onto our ASPX page the ModalPopupExtender, which will look something like this:
Notice on this Extender we have three controls to reference: which will initiate the popup, which will be the popup, and which will act as the popup Ok control. We set the Panel to be the popup and the Button to initiate it. We also have an OK button in our panel, so this will close the panel. There is also the option of specifying a Cancel button for the popup. Finally, we add the CSS Class to the popup and we can then run it.
Notice that when we click the Confirm button, we are presented with a very nice popup and the rest of the page is disabled and grayed out:
When the OK button is clicked, we are returned to the normal page. Again, the functions are instantaneous and are more akin to a desktop application than a web application.
The next Extender we will be looking at is the ListSearchExtender. This can be a really useful tool, particularly when working with large, unordered data in a ListBox control. In order to successfully implement this extender, we are going to add a ListBox Control and fill it with sample data:
<asp:ListItem Text="Sandra" Value="Sandra" />
<asp:ListItem Text="Tera" Value="Tera" />
<asp:ListItem Text="Kelly" Value="Kelly" />
<asp:ListItem Text="Bryan" Value="Bryan" />
<asp:ListItem Text="Zea" Value="Zea" />
<asp:ListItem Text="Christina" Value="Christina" />
<asp:ListItem Text="Daniel" Value="Daniel" />
<asp:ListItem Text="Tina" Value="Tina" />
<asp:ListItem Text="Michael" Value="Michael" />
<asp:ListItem Text="Zach" Value="Zach" />
<asp:ListItem Text="Paxton" Value="Paxton" />
<asp:ListItem Text="Olivia" Value="Olivia" />
<asp:ListItem Text="Ella" Value="Ella" />
<asp:ListItem Text="Brian" Value="Brian" />
<asp:ListItem Text="Steffi" Value="Steffi" />
<asp:ListItem Text="Jacob" Value="Jacob" />
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Now we add our Extender from the toolbox:
This extender has a lot of power, and yet, we are only required to associate the ListBox with it and boom - instant search capabilities. Now when you run this web application, you'll be able to click on any item in the ListBox and start typing. As you type, the closest match will be selected automatically:
The final Extender we will be looking at in this article is Rating. This little control will allow your users to quickly and easily select a score from a graphical interface, which you can fully customize. This control requires four different CSS Classes by specified: FilledStarCssClass, EmptyStarCssClass, WaitingStarCssClass, and StarCssClass. We create separate classes for these and add them to the ASPX page:
{
width:15px;
height:15px;
.RatingStarOn
{
width:15px;
height:15px;
.RatingStarEmpty
{
width:15px;
height:15px;
.RatingStarWait
{
width:15px;
height:15px;
We created simple star graphics for this example and used them in the CSS classes. Next, we will also add an UpdatePanel and a Literal control to the ASPX page, in addition to the Rating control:
<ContentTemplate>
</asp:UpdatePanel>
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!
We will use the Literal control to display the selected rating, and the UpdatePanel to force an Asynchronous Postback. To do this, we also set the AutoPostBack attribute of the Rating control to true. And finally, in the code-behind, we set the value of the Literal control, using the Changed event of the Rating:
{
We use the MaxRating attribute of the Rating control instead of hard-coding 5 (or 10) because the Rating can be easily changed by setting the MaxRating attribute in the ASPX page.
That's all for this article, but the AJAX Toolkit has plenty of extenders to utilize. Don't be afraid to just dive in and check them out.
Leave a Comment
#1 Server Support
Posted By: Server Support | 1.05.2009 at 12:52 AM
Thanks for the good information..
#2 Dulwan Baddewithana
Posted By: Dulwan Baddewithana | 4.08.2009 at 9:38 PM
yeah this is really important for my friend...Thank you very much...
#3 fxcg
Posted By: fxcg | 7.28.2009 at 3:56 AM
cxvbc
#4 Homeschooling
Posted By: Homeschooling | 8.29.2009 at 12:02 AM
They assisted us with everything we needed to do for all of our applications.
#5 Online High School Diploma
Posted By: Online High School Diploma | 8.29.2009 at 12:03 AM
Great Article.
#6 Get diploma
Posted By: Get diploma | 8.29.2009 at 12:03 AM
This control requires four different CSS Classes by specified: FilledStarCssClass, EmptyStarCssClass.
#7 Management school
Posted By: Management school | 8.29.2009 at 12:03 AM
We will use the Literal control to display the selected rating, and the UpdatePanel to force an Asynchronous Postback.
#8 Online degree
Posted By: Online degree | 8.29.2009 at 12:04 AM
Nice & Great Site.
#9 Ajit Kumar Das
Posted By: Ajit Kumar Das | 10.01.2009 at 12:51 AM
This very helpful site ,we thakfull for your's essential supports.
#10 used van sales
Posted By: used van sales | 10.05.2009 at 5:30 AM
Do you have a tutorial for validation for an ajax form.
#11 buy aion kinah
Posted By: buy aion kinah | 10.09.2009 at 8:21 AM
and for a few moments they appeared to go quite mad. To the amazement of everybody three of them flung themselves upon Boxer. Boxer saw them coming and put out his great hoof, caught a dog in mid-air and pinned him to the ground. <a href="http://www.ibay24.es" title="Aion kinah">Aion kinah</a><a href="http://www.ibay24.es" title="metin2 yang">metin2 yang</a>
#12 dofus kamas
Posted By: dofus kamas | 10.09.2009 at 8:22 AM
dofus kamas
#13 metin2 yang
Posted By: metin2 yang | 10.09.2009 at 8:22 AM
metin2 yang
#14 buy aion kinah
Posted By: buy aion kinah | 10.09.2009 at 8:22 AM
buy aion kinah
#15 apotik
Posted By: apotik | 10.14.2009 at 6:16 AM
Great tutorial, you should keep it up your good work and share like this all the time. Open source is great I recon.
#16 Tiffany Rings
Posted By: Tiffany Rings | 10.23.2009 at 7:37 AM
i like
#17 Mangal
Posted By: Mangal | 11.23.2009 at 7:55 AM
I realy Thanks to this article it incress my confidance to learn abt ajax .
#18 free online games
Posted By: free online games | 11.24.2009 at 10:58 PM
We will use the Literal control to display the selected rating, and the UpdatePanel to force an Asynchronous Postback.
#19 SEO
Posted By: SEO | 12.09.2009 at 3:15 AM
Which is better java or ajax?
#20 efdfds
Posted By: efdfds | 12.12.2009 at 12:05 AM
Do you want be stronger in the game? Do you have enough [url=http://www.virgame.com/cabal-online-c-137.html]cabal alz[/url] ? We can offer you the cheapest [url=http://www.virgame.com/cabal-online-c-137.html]cabal online alz[/url] than the market. Come on, the [url=http://www.virgame.com/cabal-online-c-137.html]cabal gold alz[/url] is waiting for you.
#21 NYC Limousines
Posted By: NYC Limousines | 12.15.2009 at 8:49 PM
Post is nicely written and it contains many good things for me. I am glad to find your impressive way of writing the post. Now it become easy for me to understand and implement the concept. Thanks for sharing the post.
#22 links of london
Posted By: links of london | 12.26.2009 at 12:25 AM
i like
#23 club penguin cheats
Posted By: club penguin cheats | 12.29.2009 at 9:13 PM
I have searched the net and I should say I have not come across an article like this which is so easy to understand and learn the concepts.
#24 encuestas pagadas
Posted By: encuestas pagadas | 12.31.2009 at 7:36 AM
great post, I like AJAX but develop mor in java
#25 tiensstore
Posted By: tiensstore | 1.09.2010 at 3:19 AM
Thanks again for the time you take to put all these information down for us, you are a great and inspired personality. Thanks
#26 flower houston
Posted By: flower houston | 1.16.2010 at 1:09 PM
this is great info!
#27 shark tank season 1 episode 15
Posted By: shark tank season 1 episode 15 | 2.08.2010 at 6:47 AM
This control requires four different CSS Classes by specified: FilledStarCssClass, EmptyStarCssClass.
#28 ghost whisperer season 5 episode 14
Posted By: ghost whisperer season 5 episode 14 | 2.08.2010 at 6:48 AM
Great tutorial, you should keep it up your good work and share like this all the time. Open source is great I recon.
#29 kitchen nightmares season 3 episode 3
Posted By: kitchen nightmares season 3 episode 3 | 2.08.2010 at 6:48 AM
This control requires four different CSS Classes by specified: FilledStarCssClass, EmptyStarCssClass.
#30 Library App
Posted By: Library App | 2.15.2010 at 9:26 PM
Now when you run this web application, you'll be able to click on any item in the ListBox and start typing. As you type
#31 assignment writing
Posted By: assignment writing | 2.16.2010 at 1:19 AM
Thank you very much...this is really good information
#32 essay writing
Posted By: essay writing | 2.16.2010 at 1:20 AM
Great Article.
#33 dissertation writing
Posted By: dissertation writing | 2.16.2010 at 1:20 AM
great information thanks for share
#34 thesis writing
Posted By: thesis writing | 2.16.2010 at 1:20 AM
great share
#35 louis vuitton handbag
Posted By: louis vuitton handbag | 2.18.2010 at 12:02 AM
Rather interesting. Has few times re-read for this purpose to remember. Thanks for interesting article
#36 web designer croydon
Posted By: web designer croydon | 2.24.2010 at 2:37 AM
Learn how to extend your ASP.NET AJAX applications using the ASP.NET AJAX Control Toolkit. ASP.NET AJAX Control Toolkit: Installation and getting started is a video that starts with the basics, including downloading and installing the toolkit.
#37 Miami Web Design
Posted By: Miami Web Design | 2.24.2010 at 2:38 AM
ASP.NET Ajax control kit is a nice contribution from the ASP.NET community, which is equipped with a lot of good and handy control extenders. In this article, we are going to explore modal popup dialog extender control of Ajax control toolkit. We are going to see various scenarios in which modal popup controls can become a handy tool to use in ASP.NET rich clients and also in general purpose web applications. We will also cover few tricks and trouble shooting about modal popup extender control. First of all, we are going to cover what modal popup extender is and how we can use it.
#38 SEO Surrey
Posted By: SEO Surrey | 2.24.2010 at 2:38 AM
This book was written to introduce you to the features and capabilities that ASP.NET 3.5 offers, as well as to give you an explanation of the foundation that ASP.NET provides. We assume you have a general understanding of Web technologies, such as previous versions of ASP.NET, Active Server Pages 2.0/3.0, or JavaServer Pages. If you understand the basics of Web programming, you should not have much trouble following along with this book's content.
#39 Printer Ink
Posted By: Printer Ink | 2.24.2010 at 2:39 AM
A new version of the AJAX Control Toolkit, v3.0.20229, has been released and is the official release for Visual Studio 2008 and the .NET 3.5 Framework. It includes a number of bug fixes and the following major fixes:
* ValidatorCallout supports styling the popup using CSS and server-side validation.
* ListSearch has enabled the options of searching for sub-strings in the list items and clearing the search query if no match is found.
* AutoComplete only queries for matches when the user types a character.
#40 Business Innovation London
Posted By: Business Innovation London | 2.24.2010 at 2:41 AM
AJAX, or "Asynchronous JavaScript and XML," is a standards-based approach to building rich Internet applications that offer users a highly interactive user interface experience. Microsoft's ASP.NET AJAX, used in conjunction with Visual Studio, provides a productive environment for creating AJAX applications.
#41 Link Building Services
Posted By: Link Building Services | 2.28.2010 at 8:19 AM
great share thanks for this
#42 campingmap
Posted By: campingmap | 3.01.2010 at 5:00 PM
my CurrentRating returns 0 even I selected more. Do you know why?
#43 Electronics
Posted By: Electronics | 3.03.2010 at 3:46 AM
Useful information shared..Iam very happy to read this article..thanks for giving us nice info.Fantastic walk-through. I appreciate this post.
#44 facebook farmville cheats
Posted By: facebook farmville cheats | 3.05.2010 at 5:51 AM
AJAX in there to make the experience even quicker and easier for our visitors, programming required a lot of experience and knowledge to develop a project,
#45 games to play
Posted By: games to play | 3.07.2010 at 3:43 AM
Amazing blog post...
#46 melbourne website designers
Posted By: melbourne website designers | 3.12.2010 at 2:03 AM
Brilliant post mate, keep up the good work
#47 banner printing
Posted By: banner printing | 3.12.2010 at 2:25 AM
You really know your stuff... Keep up the good work!
#48 Electronic Cigarette
Posted By: Electronic Cigarette | 3.17.2010 at 8:18 AM
I just wanna thank you for sharing your information and your site or blog this is simple but nice article I've ever seen i like it i learn something today.