Yesterday, I began talking about the ASP.NET AJAX framework and went over the basics of the UpdatePanel. If you are simply wanting a “no refreshing” website, then that is basically all you need to know.

However, if you are wanting to use some of the cool client enriching doodads like animation, accordions or draggable lists, then you need to employ the Toolkit. That is the subject of today’s article.

Oops
Before I go into the meat of today’s article, I want to correct an oversight from yesterday. I forgot to mention an important piece of the whole ajax.net puzzle and that is the ScriptManager. In order for any of the new ajax enabled .NET controls to work you have to start the page out with this:

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

Basically, this is how you tell .NET to load up the javascript files that run things behind the scenes. Simple, but important. Ok…on with the show.

Getting Started
Starting with the toolkit is a pretty easy process. Since these are client controls you don’t really have to install anything to get moving. The easiest way get setup is to check out this video from Microsoft.

Once you have the toolkit loaded, you have everything you need to start playing. One of the nice things about the toolkit is it comes with a nice sample website that allows you to see the controls in action and get a glimpse at how you can use the various tools. If you just want to get a feel for what is possible with the extenders, you can see the samples online.

So what is an Extender? Well, there are two ways to look at it. The first, and easiest way is to look at it simply as a toolkit. The sample website is loaded with a bunch of controls that you can use without much hassle (I will go over a couple of the tools in a sec). Most of these controls are really useful and are ready to use on your site. I say most because a few are a bit buggy (see the end of this article for my warning about that).

The other way of looking at Extenders is as a toolset. The extenders part of the framework is built in such a way that it is highly extensible. Another way of saying that is you can use it to build your own ajax enabled controls. Building your own is outside of the scope of this article, but if you want to learn more about that Microsoft has a good starting point.

That is something, I think, that sets this framework apart from some of the others out there. It really is extendable, and Microsoft is really encouraging people to do just that. In fact, most of the tools in the toolkit have been built my community members. Kind of a nice touch. Other frameworks, such as YUI and scriptaculous can be extended, but it doesn’t seem to really be encouraged. I could be wrong on that, but it is just a feeling I get when I have played with those.

Gettin’ Dirty
So lets get into some specifics. In order to give you a handle on the extenders ready for prime time, I will break a couple of them down. At the end of the article I will include a simple page that has all the code I talk about today.

Drag Panel
First, lets play with the drag panel. Basically, this allows you to grab onto a panel and move it around the screen. You see this guy pretty regularly around the net and is a staple for any ajax framework.

So to get this guy working you need a few pieces…2 panels (at least) and an extender. Simple enough.

Now, if you are new to Visual Studio, you will notice that you can drag any control (such as a panel or button) right to your web page. However, I believe it is good practice to use the designer as little as possible. Maybe I am a bit old school, but I just don’t like code generators, so unless I am using a new control for the first time, I typically stay away from the designer.

So with that in mind, I am gonna hack up a few panels…

<asp:Panel ID="pnlDrag" runat="server" Width="250px" style="z-index: 20;">
   <asp:Panel ID="pnlHeader" runat="server" Width="100%" Height="20px" BackColor="#DADCDF" 
   BorderStyle="Solid" BorderWidth="1px" BorderColor="#DADCDF">
      <div style="cursor: move">Click and Drag!</div>
   </asp:Panel>
   <asp:Panel  ID="pnlBody" runat="server" Width="100%" Height="250px"
   Style="overflow: auto;" BackColor="#FFFFCC" ForeColor="#666666"
   BorderWidth="1px" BorderColor="#DADCDF" BorderStyle="solid" >
      <br/>
      Look at me! I am a drag panel.
   </asp:Panel>
</asp:Panel>

There we go. So first you will notice that I am using 3 panels rather than the minimum of 2. That is simply so that I can have a small area to drag rather that making the entire control be the handle.

For the noobs out there, a Panel is basically a div in .NET (actually if you view the HTML of a page, panels actually turn into a div). The only real difference is they are made to run server side. When you get back to the server they have lots of nice properties that a div simply doesn’t have.

Our top panel’s job is to hold everything that can be moved around the screen. Under him you will see the pnlHeader. As you might guess, this is guy acts as our “handle”. Finally you see a third panel (pnlBody). This guy is just there to be there…basically he holds the content.

Ok, so the panels are done, lets visit the DragPanelExtender.

<ajaxToolkit:DragPanelExtender ID="dragExt" runat="server"
    TargetControlID="pnlDrag"
    DragHandleID="pnlHeader" />

Basically there are two properties that we care about. The TargetControlID tells the control who the top panel is. Everything inside the top panel will be moved when the user drags the handle. The DragHandleID states which panel is acting as our handle. If you only have 2 panels, then this would effectively make the entire area a handle.

So that is all there is to it.

I like the drag panel…I am not sure why…but it just says something about a site that uses it. “Hi I’m fancy” or something like that. As a web nerd, this speaks to me. Who knew it was so easy to make one?

Collapsible Panel
You see these guys a lot in FAQs or anywhere there is a good deal of content in a single area.

Tools required: 2 panels and an Extender (sound familiar?).

Lets start with the panels

<asp:Panel ID="pnlClick" runat="server" Height="20px" BackColor="#DADCDF" BorderStyle="Solid" 
BorderWidth="1px" BorderColor="#DADCDF" Width="250px"> 
    <div style="padding:5px; cursor: pointer; vertical-align: middle;">
        I am a collapsible panel.
        <asp:Label ID="Label1" runat="server" Font-Size="80%">Show Me</asp:Label>
    </div>
</asp:Panel>
<asp:Panel ID="pnlHide" runat="server" Height="250px" Width="250px"
Style="overflow: auto;" BackColor="#FFFFCC" ForeColor="#666666"
BorderWidth="1px" BorderColor="#DADCDF" BorderStyle="solid">
<br />
<span style="padding: 5px"> Look here I am!</span>
<br/><br/>
</asp:Panel>

Basically the two panels breaks down into the “clicker” and the “hider”. The clicker panel is the guy the user clicks on to show/hide the hider panel. They don’t have to be near each other, of course, but it makes it easier for our example here.

One thing you will want to notice is the label control inside our clicker panel (pnlClick). We will talk about why it is there when we get to the extender, but for now just take note.

The hider panel (pnlHide) is just a content holder. Nothin’ special about it really, but it is an important part. Content is king right?

Ok, so now to the main event…the extender.

<ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server"
TargetControlID="pnlHide"
ExpandControlID="pnlClick"
CollapseControlID="pnlClick" 
Collapsed="True"
TextLabelID="Label1"
ExpandedText="Hide Me"
CollapsedText="Show Me"
SuppressPostBack="true"
/>

There are lots of properties here, so lets take a look at each of them:

• ID - Just your everyday id property.
• runat - Tells .NET that this is a server control.
• TargetControlID - This property points out the “hider”, or rather which panel appears/disappears.
• ExpandControlID - This tells the extender who the clicker is. More specifically, it says what panel the user clicks on to show the hider panel.
• CollapseControlID - This property is the opposite of the ExpandControlID. It tells the extender what panel needs to be clicked to hide the hider panel. In our case, the same panel is used to hide and show the panel.
• TextLabelID - This property points to the label I mentioned earlier. By using it, you tell the extender which control should be updated when the clicker is, well…clicked on.
• ExpandedText - What the label shows when the panel is showing.
• CollapsedText - What the label shows when the panel is hidden.
• SupressPostBack - The clicker panel basically acts like a button. If, for some reason, you want to go back to the server when the panel is clicked, then just set this to true.

So that is the CollapsiblePanel extender. Now these are just a couple of examples in the toolkit, but you can already begin to see the pattern of how they are all used. It really is a nice implementation that takes a lot of the more difficult aspects of some of these controls out of the equation. Plus, being able to bug them doesn’t hurt either…

I hope this series gaves you an idea on what is possible with ASP.NET AJAX. It really is a powerful framework that is pretty easy to use. One thing is important to note…some of the extenders can be a bit buggy. For instance in my site I tried to use the calendar extender and ran into all sorts of formatting issues. It probably had something to do with my master page, but I got so frustrated I just came up with another solution. So keep that in mind when you are trying them out.

As promised here is the little sample file I made for this article.

If there is something that you think I missed or would like me to go over, let me know.