Well I’ve grown tired with my first version of the Toolbox UserControl and decided to start from scratch on a new one.  The first version used a simple ASP.NET GridView control that read the XML data and automatically built the table.  Nothing especially wrong with the results but a couple of things ended up bugging me.

First, I didn’t like that the code behind is a table.  I know, this data is perfect for a table but using an unorganized list (<ul>) allows for so much more manipulation.  And if you format your output correctly you can really take advantage of some cool styling functionality.

Second, I couldn’t seem to get rid of the rows bottom-borders that only appears in FireFox.  Try as I might I just couldn’t hold enough of my attention to ferret out the cause of the borders.  Oddly enough it was easier for me to focus on rebuilding a new usercontrol from scratch.  Go figure.

So what did I end up?  Well I think the results are way better than what it used to be.  Have a look at the current version with all of the cool styling I mentioned just a second ago:

With this version I used the XML caching that I previously mentioned to hold the contents in cache and prevent repetitive reads from the XML file.  I added several optional arguments to control the results and appearance, including limiting how many characters are shown in the description.  I added a span tag around the description so you can do custom formatting on the description.  You can specify either the Category Name, the Category ID, or neither (which will show all tools in every category).  You will notice that I add the categoryId value to the anchor class attribute.  This is helpful if you are wanting to show all tools and then manipulate the display based on the category.

Behind the scenes you can see the html is a <ul> instead of a table.

<ul class="toolbox">
    <li>
        <a class="catId2" rel="self" title="Send a thank you email for commenting on your blog " href="http://www.dscoduc.com/post/2008/01/CommentRelish---BlogEngineNet-Extension.aspx" target="_blank">Comment Relish</a> <span>Send a thank you email for commenting on your blog </span>
    </li>
    <li>
        <a class="catId2" rel="self" title="Google Analytics code (handles HTTP/HTTPS switching) " href="http://www.dscoduc.com/post/2008/04/Google-Tracker-Extension-v13.aspx" target="_blank">Google Tracker</a> <span>Google Analytics code (handles HTTP/HTTPS switching) </span>
    </li>
    ...  
</ul>

The following is a list of optional arguments that can be passed to the usercontrol:

So to load this into a stand-alone page you can use the following Syntax:

<%@ Register Src="~/User Controls/ToolboxControl.ascx" TagName="ToolBoxControl" TagPrefix="tb" %>

Then add the following tag where ever you want the results:

<tb:ToolBoxControl ID="toolboxcontrol1" runat="server" categoryName="Extensions" showDesc="true" maxLength="100" maxItems="100" />

Or if you want to use it on a Page in BlogEngine.NET you would add one of the following strings:

// This tag will display all tools
 usercontrol: ~/User controls/ToolboxControl.ascx categoryId=0;showDesc=true;maxLength=50;maxItems=100]

// This tag will display up to 100 tools in the Extensions category
 usercontrol: ~/User controls/ToolboxControl.ascx categoryName=Extensions]

// Even though categoryId=0 (all tools), the categoryName includes the name Extensions.  
// So this tag will only display tools in the Extensions category.
 usercontrol: ~/User controls/ToolboxControl.ascx categoryId=0;categoryName=Extensions;showDesc=true;maxLength=100;maxItems=100]

Because it’s a user control you can load it several times, each time specifying a different tool category.  Why would you do this?  Well as seen in My ToolBox I have loaded the usercontrol four times.  This way I can control the display format for each category.

Well that’s about it.  I definitely learned a bunch on this build.  Let me know if you find this useful.

ToolBox UserControl 2