Defining Custom Attributes for Each Node
Another way to extend your Web application's navigation is to define custom attributes for the site nodes in web . sitemap and retrieve them at run time. Imagine that you want to associate a specific image with each page in your site. To accomplish this, just create a new attribute and specify it in the siteMapNode element in the site map data.
ASP.NET site map navigation support makes it very easy to add arbitrary attributes to each node. In this example, you add JPEG URLs to the site map nodes . As each page is loaded, the master page shows the JPEG in an Image control. The following example shows how to add custom attributes to the site map nodes
Adding custom attributes to the site map
1. Add six new JPEGs to the project—one to represent each kind of page . For example, produce separate JPEGs for the home page, the products page, the three contact pages, and the support page. Update the web . sitemap file to include an ImageURL property in each siteMapNode element, like so:
<?xm1 version="1.0" encoding="utf-8" ?>
<siteMap xm1ns="http://schemas.microsoft.com/AspNet/SiteMap-Fi1e-1.0" >
<siteMapNode url="~/Default.aspx" tit1e="Home" description="This is the home page" ImageURL="~/homeimage.jpg">
<siteMapNode url="~/Products.aspx" title="Products" description="This is the products page" ImageURL="~/productsimage.jpg" /> <siteMapNode url="~/Support.aspx" title="Support" description="This is the support page" ImageURL="~/supportimage.jpg"/> <siteMapNode url="~/Contact.aspx" title="Contacts" description="This is the contacts page" ImageURL="/contactimage.jpg">
<siteMapNode url="~/ContactAddress/ContactAddress.aspx" title="Contact using physical address" description="This is the first contact page" ImageURL="~/contactPliysicalAddressiiiiage.jpg"/> <siteMapNode ur1="~/ContactEmai1Phone/ContactEmai1Phone.aspx" tit1e="Contact by email or phone" description="This is the second contact page" ImageURL="~/contactPhoneimage.jpg" /> </siteMapNode>
</siteMapNode> </siteMap>
2. Programmatically, the ImageURL custom attribute appears as a property of the node when the nodes are accessed. There are many ways to use the new property. Probably the easiest way is to add an Image control to the master page and update the Image control's ImageUrl property with the value from the node in the master page's Page_Load method.
public partial class SiteMaster: System.Web.UI.MasterPage {
protected void Page_Load(object sender, EventArgs e) {
SiteMapNode current = SiteMap.CurrentNode; string strImageURL = current["ImageURL"];
this.Image1.ImageUrl = strImageURL;
3. Although setting an image during the master page's Page_Load method is pretty straightforward, it's not the only way to change the UI based on specific SiteMapNode information . For example, you might handle the OnMenuItemDataBound event and set any custom properties there . The following two graphics illustrate how the master page plugs in a new image URL each time a postback is issued:
|
1 fi Home Page - Windows Internet Explorer |
-lölKl | |||||
|
" .. v |£] http : i/localhost : 2131O/Default, aspx | § 11 *f x | |t> Bing |
p- | |||||
|
¿i Favorites ^ Suggested Sites - gj Web Slice Gallery - | ||||||
|
Home Page | | £ |
it *0 ' Q Ô |
- Page Safety ■*• Tools - (ft - | ||||
|
1 | ||||||
|
My ASP.NET Application | ||||||
|
|Home (you are here) | ||||||
|
> DVDs |
© |
^ Contact using physical address ^ Contact by email or phone | ||||
|
Welcome to asp.net! | ||||||
|
To learn more abocit ASP.NET visit www.asp.net. | ||||||
|
You can also find documentation on ASP.NET at MSDN. |
J | |||||
|
1 Internet | Protected Mode: On |
T 1+„ioo% - ^ | |||||
The following graphic shows the products page:
Post a comment