Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.

Help pages allows the users to have a more clear idea about the purpose of the page. There are various ways of providing the help to the user. Some include the help on a single page and you will have to find the help of the page or the section that you are looking for. It would be nice to have help about the page that you are currently on and with ASP.NET it is plain simple. 

In the example below I used the menu control as the navigation control. So, I created the menu control on the master page. Take a look at the code below:

<div>

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

<asp:Menu DataSourceID="sm1" ID="Menu1" runat="server" Orientation="Horizontal" BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#7C6F57" OnMenuItemDataBound="Menu1_MenuItemDataBound" StaticSubMenuIndent="10px">

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />

<DynamicMenuStyle BackColor="#F7F6F3" />

<StaticSelectedStyle BackColor="Gainsboro" />

<DynamicSelectedStyle BackColor="#5D7B9D" />

<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />

</asp:Menu>

<asp:SiteMapDataSource ShowStartingNode="false" ID="sm1" runat="server" />

</asp:contentplaceholder>

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

</asp:ContentPlaceHolder>

</div>

The site map file looks something like this:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="" title="Root" description="">

<siteMapNode url="~/Default.aspx" title="Home" description="" />

<siteMapNode url="~/ContactUs.aspx" title="Contact Us" description="" />

<siteMapNode url="~/Help.aspx" title="Help" target ="_blank" />

</siteMapNode>

</siteMap>

 

If you run the page you will see the menu like the following:

PageSensitiveHelp1

 

As, you can see in the above image that I have a asp:Menu control that displays certain links. The menu also have a "help" option which will display the help of the page the user is currently on. The code for this is pretty simple.

protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)

{

if(e.Item.Text.Equals("Help"))

{

e.Item.NavigateUrl = BuildHelpLink();

}

}

private string BuildHelpLink()

{

StringBuilder sb = new StringBuilder();

string pageName = GetCurrentPageName();

string url = "Help.aspx?pageName=" + pageName;

sb.Append("javascript:OpenHelpWindow('");

sb.Append(url);

sb.Append("','HelpWindow')");

return sb.ToString();

}

private string GetCurrentPageName()

{

string pageNameWithExtension = Page.Request.AppRelativeCurrentExecutionFilePath;

return System.IO.Path.GetFileNameWithoutExtension(pageNameWithExtension);

}

And now in the Help.aspx page you can look into an xml file and display the help that you needed.

public partial class Help : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindData();

}

}

private void BindData()

{

string pageName = Request.QueryString["pageName"] as String;

if (!String.IsNullOrEmpty(pageName))

{

lblHelpMessage.Text = CacheManager.GetHelpByPageName(pageName);

}

}

}

The CacheManager class caches the xml file and gets the content that you are looking for:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Xml;

 

public class CacheManager

{

private const string MESSAGES_FILE_PATH = "~/HelpMessages.xml";

private const string XML_DOCUMENT = "XmlDocument";

public static string GetHelpByPageName(string pageName)

{

return GetMessageByElementName(pageName);

}

private static string GetMessageByElementName(string elementName)

{

string message = String.Empty;

XmlDocument xmlDoc = null;

if (HttpContext.Current.Cache[XML_DOCUMENT] == null)

{

xmlDoc = new XmlDocument();

xmlDoc.Load(HttpContext.Current.Server.MapPath(MESSAGES_FILE_PATH));

// insert into cache object

HttpContext.Current.Cache.Insert(XML_DOCUMENT, xmlDoc, new System.Web.Caching.CacheDependency(HttpContext.Current.Server.MapPath(MESSAGES_FILE_PATH)));

}

// retrieves the value from the cache object

xmlDoc = (XmlDocument)HttpContext.Current.Cache[XML_DOCUMENT];

message = ((XmlNode)((XmlNodeList)xmlDoc.GetElementsByTagName(elementName)).Item(0)).InnerText;

return message;

}

 

}

Now, if you go to the ContactUs.aspx page and press help you will see a small popup which displays the help for the contact us page.

PageSensitiveHelp2

Hope you enjoyed it!  

 

 

 

 

 

 

 

 

 

Posted on Saturday, September 2, 2006 8:02 AM | Back to top


Comments on this post: Creating Page Sensitive Help

# re: Creating Page Sensitive Help
Requesting Gravatar...
Good article. Thanks
Left by vikram on Sep 10, 2006 11:10 PM

Your comment:
 (will show your gravatar)


Copyright © Mohammad Azam | Powered by: GeeksWithBlogs.net