PathTrackingControl

PathTrackingControl - ASP.NET Server Control

Environment

Any environment running ASP.NET.

We were developing several projects in the company I work for and we needed to include a powerful navigation system to our web applications but without much coding. So I decided to develop the 'PathTrackingControl' which is an ASP.NET Server control to provide such navigation to our applications. The challenge was to do as little coding as possible when using this control and the result was all you need to do is Drag n' Drop this server control to your pages and you got yourself a working navigation system. This control is the same control used in our automated hosting billing solution, PanelBill.

How to Use It

To use this control, all you have to do is Drag n' Drop it on the web pages that you want to have navigation in and that's about it. Run your web application and start browsing your page and watch how the PathTrackingControl follows your path and gives you an easy "Crumb Chips" map into your site.

How Does the Control Display Its Data/Features?

The control will display for each page visited: A link (an anchor to its URL), a tool tip and possibly an icon (take a look at the snapshot, you can see the icons).

The link is extracted from the actual request to the page. The tool tip is extracted from the page's contents itself at runtime; it is extracted from the following meta-tag:

<meta name="description" Content="This is page1 description text, that will show as description">

If this meta tag is not present, a tool tip is not added.

The icon is also optionally included in the output of the control if the page visited has the following meta-tag:

<meta name="icon" Content="images/pageicon.gif">

In one of our projects, the code is a little different, the tooltips and the icons are extracted from the database according to the page's URL.

How Does the Control Work?

The control's source code is well documented; try to look at the code as you read the rest of this paragraph to understand the control better.

The control's RenderContents method is overridden. Inside method RenderControls, three private methods are called, _PreProcessPathArray();, _ProcessPath(); and _RenderCurrentPath();

I will talk about the first method _PreProcessPathArray(); last. The method _ProcessPath(); will parse the contents of the current visited page for the meta tags mentioned above, after that, it will get the current Tracked Path (an array of nodes saved in a session variable) and it will check to see whether the current page is already in the path or not, if it is not in the path, it is added, if it is, it is ignored.

The final third method _RenderCurrentPath(); called in the RenderContents will simply generate HTML text from the current Tracked Path and will display the contents to the page.

Now, back to the first method _PreProcessPathArray();. When the control was first developed, it had a very annoying bug. Sometimes, you go back in a page using the Back button on your browser and then you navigate to another page. Since the browser does not actually perform a request from the server when you press the back button, the control had no way to know that the user pressed back, I needed a way to solve this problem, I thought of saving the path in the viewstate of the page, but that failed, I thought of other solutions as well. Finally, I decided to include the number of elements inside the array of the Path Tracker in a session variable unique to every page and that solved the problem without sacrificing a lot of resources.

How to Customize the Looks of the Control to Your Needs?

The control has several properties that I want to bring your attention to. Using these properties, you should be able to make the control output the path in any way you desire. I will explain the anatomy of items generated by the control after the description of the properties to give you a better understanding of some of the properties.

LinkCSSClass

• Default value: (empty)
• Description: This is the CSS class that would be applied to the anchor (hyperlink)

TableCSSClass

• Default value: (empty)
• Description: This is the CSS class that is applied to the table that houses the PathTrackingControl. This table is generated dynamically by the control itself.

TableRowCSSClass

• Default value: (empty)
• Description: This is the CSS class that is applied to the one row of the table that is dynamically generated

PreItemSeparatorInLink

• Default value: " > "
• Description: This is the HTML code that is inserted inside the tag anchor and before the actual hyperlink.

PreItemSeparatorOutLink

• Default value: (empty)
• Description: This is the HTML code that is inserted outside the tag anchor and before the actual hyperlink.

PostItemSeparatorInLink

• Default value: (empty)
• Description: This is the HTML code that is inserted inside the tag anchor and after the actual hyperlink.

PostItemSeparatorOutLink

• Default value: " "
• Description: This is the HTML code that is inserted outside the tag anchor and after the actual hyperlink.

Anatomy of the Generated Links

This is a sample of the generated HTML code by the control, the places of where the properties go are in bold.

<div align="center">
<table class="[TableCSSClass]" ID="Table1">
<tr class="[TableRowCSSClass] ">
<td>[PreItemSeparatorOutLink]<a class="[LinkCSSClass] " title="Refresh page1
This is page1 description text" href="/page1.aspx">
[PreItemSeparatorInLink]page1[PostItemSeparatorInLink]</a>[PostItemSeparatorOutLink]
< /STRONG> </td>
</tr>
</table>
</div>

I hope you find this control useful.

************************************************************** IMPORTANT NOTE ********************************************************************************
The opinions expressed in this message/paper/article are those of the author and not necessarily those of ByteSurge, its subsidiaries and affiliates. There is no guarantee that this message/paper/article have not been altered by unauthorized sources without your or our knowledge. Nothing in the message/paper/article is capable or intended to create any legally binding obligations on either party and it is not intended to provide legal advice. ByteSurge accepts no responsibility for loss/damage from its use and/or the use of any code included with this paper, including damage from virus.
*******************************************************************************************************************************************************************

History

• 1^st February, 2005: Date posted

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below. A list of licenses authors might use can be found here.