I've decided to make use of the ASP.NET Ajax Toolkit for an app I'm working on after dropping out of the Atlas space for a few months. Sweet Jayzus, those guys have been busy. There are at least a dozen new controls since I last looked.

I like the idea of the extenders. That is, you extend the capabilities of existing ASP.NET controls simply by dropping them on the page and configuring them.

I purposely used the word "simply" there. Because I found the practice a little different than the promise. Let's take a look at the HTML I'm extending:

 <div style="margin: 0.5em; float: right; width: 150px; 
             background-color: steelblue; color: lightsteelblue; 
             font-weight: bold;" class="quickLinks">
     <div style="padding: 0.25em; background-color: white; 
                 height: 18px; color: steelblue; 
                 border: 1px solid steelblue;">
         <div style="float: left;">
             Quick Links
         </div>
         <div style="float: right; vertical-align: middle;">
             <asp:Image ID="Image2" runat="server" 
                  ImageUrl="~/images/collapse.jpg" />
         </div>
     </div>
     <div style="padding: 0.5em; border-bottom: 2px solid white;">
         <a href="#">Add Job</a><br />
         <a href="#">Find a Job</a><br />
     </div>
     <div style="padding: 0.5em;">
         <a href="#">Edit...</a><br />
     </div>
 </div>

I've purposely kept things out of CSS as much as possible to keep things in the same file for the purpose of this demonstration. The exception is my use of a quickLinks class in the first DIV. I did that so that I could make the links white:

.quickLinks A
{
    font-weight: normal;
    color: white;
}

The above HTML produces the output you see to the right (aligned to the right side of the browser thanks to the "float").

Now, the toolkit effects I chose for this bad boy are: Drop Shadow (which comes with its own built-in rounded corners), the Collapsible Panel,  and the Drag Panel. So I set out extending my code with these nifty little controls.

The keen observer will have noticed that the extenders apply to ASP.NET controls which was my first problem. That means using Panels rather than divs. Not such a big deal that. Usually one can just replace the <div> tag with <asp:Panel id="moo" runat="server"> and change the class tag to CssClass and be done with it.

But some of the extenders also need things to be lain out a little differently in order to attach to the appropriate elements. Take the Drop Shadow for example. In my first attempt, I converted the outer <div> to an ASP.NET Panel and applied the DropShadowExtender to it directly. This led to the grooviness you see below.

Which isn't the most ideal-looking piece of design I've done (look closely at the corners at the bottom). Also, you can't see it but the right-margin was no longer in effect. As in, this was right up against the right side of the screen.

The solution for this particular case was to wrap the entire HTML in another <div> and move the float:right and margin:0.5em; styles to the new outer <div>.

I won't go through all the little tweaks I had to make for the other controls. But here is the final HTML I needed to build to get this to work in both Firefox and IE (with *some* styles moved to CSS classes):

  <div style="float: right; margin: 0.5em; width: 150px;">
      <asp:Panel ID="panelQuickLinks" runat="server" CssClass="quickLinks" Style="z-index: 20;">
          <asp:Panel ID="quickLinksExpand" runat="server">
              <div style="padding: 0.25em; background-color: white; height: 14px; color: steelblue; 
                      border: 1px solid steelblue; cursor: pointer;">
                  <div style="float: left;">
                      Quick Links
                  </div>
                  <div style="float: right; vertical-align: middle;">
                      <asp:Image ID="Image1" runat="server" ImageUrl="~/images/collapse.jpg" />
                  </div>
              </div>
          </asp:Panel>
          <asp:Panel ID="quickLinksContent" runat="server">
              <div style="padding: 0.5em; border-bottom: 2px solid white;">
                  <a href="#">Add Job</a><br />
                  <a href="#">Find a Job</a><br />
              </div>
              <div style="padding: 0.5em;">
                  <a href="#">Edit...</a><br />
              </div>
          </asp:Panel>
      </asp:Panel>
  </div>

So now I'm five levels deep and using a mix of <div>s and Panels each with its own unique little style attached. Not very pretty.

To be fair, it didn't take very long to mangle up my HTML to accommodate the extenders. And I'm certainly not proposing that what the toolkit team is doing is anything but sublime. Let's not ignore what I've actually done here: created a draggable, collapsible box with drop shadows that works in both IE and Firefox and I wrote zero javascript code.

But like many tools that deal with HTML, you still need more than a basic knowledge of HTML and CSS to get the extenders to match what you are picturing in your head.

Still, the fact that I *can* match what's in my head is testament to how far we've come.

Or a commentary on my lack of imagination.

Kyle the Extended