Chapter 12 Web Site Navigation 273a business and the other for displaying other contact information such as e-mail dresses and phone numbers.. By using the site map fi le and underlying
Trang 1Chapter 12 Web Site Navigation 271
“Default” page To remove the page, select it in Solution Explorer and press the Delete
key Visual Studio will ask if you really want to delete the page (as it will be deleted manently) Click Yes
3 Create a master page for the Web site Click the right mouse button on the project
node in the solution and select Add New Item Choose Master Page from the
tem-plates.The default name will be fi ne Click Add
4 Add several pages based on the master page The example here uses four—a Default
page, a products page, a support page, and a contact page For each page you add, click the right mouse button on the project and select Add New Item Choose Web Page from the templates Make sure the Select Master Page check box is checked as
you select the template (so the master page will be applied automatically) Populate the pages with some content so you know what you’re looking at when you run the site (simple text placed directly on the page will be fi ne)
5 Add a new site map to the project Click the right mouse button on the project within
the solution explorer Select Site Map from the templates Keep the name Web.sitemap
The following graphic shows the Visual Studio templates with the site navigation plate highlighted:
6 Add the following data to the site map (you can change the URLs if the names of the
page fi les are different) Simply edit (or overwrite) the two blank nodes Visual Studio inserted for you:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="Navigation Menu" description="">
<siteMapNode url="Default.aspx" title="Home"
description="This is the home page" />
Trang 2272 Part II Advanced Features
<siteMapNode url="Products.aspx" title="Products"
description="This is the products page" />
<siteMapNode url="Support.aspx" title="Support"
description="This is the support page" />
<siteMapNode url="Contact.aspx" title=”Contacts"
description="This is the contacts page" />
</siteMapNode>
</siteMap>
7 To see how the site map data work with the site, add some navigation controls to the
master page Start by adding a Menu Go to the toolbox and pick up a Menu control
and drop it onto the master page When adding the Menu, one of the tasks you can
perform is to set the data source Select New Data Source from the Menu Tasks
window Set the Menu’s data source to the default site map fi le and click OK The
fol-lowing graphic shows how to select a site map data source for the Menu control:
8 Run the site so that you can see the Menu in action Select some pages from the Menu
and notice that the selections navigate you to the correct places
9 Next add a TreeView to the master page Pick one up from the Toolbox and place it on
the master page Point the TreeView to the default site map data source Run the
appli-cation and see what happens
10 Now add a SiteMapPath control to the master page Apply the XML site map data
source to the DataSource property of the SiteMapPath control
11 Now add two more pages to the project in order to display two ways to contact
the business running this site—perhaps one for displaying the physical address of
Trang 3Chapter 12 Web Site Navigation 273
a business and the other for displaying other contact information such as e-mail dresses and phone numbers First, create two new folders—one for each page Name the folders ContactAddress and ContactEmailPhone Add the new pages—one per
ad-folder Name the pages ContactAddress.aspx and ContactEmailPhone.aspx Be sure to
have these pages use the master page Add labels or text as before describing the page
to each of these pages so you may identify them as the Web application runs
12 Now add two more elements to the site map XML fi le (web.sitemap) to refl ect these
new pages Nest them so their parent node is the Contact node
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="Navigation Menu" description="">
<siteMapNode url="Default.aspx" title="Home"
description="This is the home page" />
<siteMapNode url="Products.aspx" title="Products"
description="This is the products page" />
<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" >
<siteMapNode url="~/ContactAddress/ContactAddress.aspx"
title="Contact using physical address"
description="This is the first contact page" />
<siteMapNode url="!/ContactPhone/ContactEmailPhone.aspx"
title="Contact by email or phone"
description="This is the second contact page" />
</siteMapNode>
</siteMapNode>
</siteMap>
13 Now run the Web site and see what effect the changes have had You should see new
navigation options appear in the Menu and the TreeView, and the new pages should
also be refl ected in the SiteMapPath control
14 Experiment with the SiteMapDataSource properties to see how the Menu and TreeView
are affected For example, SiteMapDataSource.ShowStartingNode turns off the root
node (often the “home” page node) SiteMapDataSource.StartFromCurrentNode
deter-mines the hierarchical position at which the data source begins producing data
15 Experiment with the Menu properties to see how the Menu is affected For example,
the Menu.StaticDisplayLevels and MaximumDynamicDisplayLevels determine how much
of the data from SiteMapDataSource the Menu displays
16 Notice how easy it is to add navigation capability to your Web site By using the site
map fi le (and underlying provider-based architecture), you limit the number of places you need to modify to update site navigation
Trang 4274 Part II Advanced Features
Trapping the SiteMapResolve Event
ASP.NET is full of extensibility points They’re all over the place—and the navigation tecture is no exception ASP.NET’s site map support includes an application-wide event that informs listeners (usually the application object) whenever the end user is navigating through the Web site using a control connected to the site map data Here’s an example that shows how to handle that event
Handling SiteMapResolve event
1 You may add the SiteMapResolve handler anywhere you’d like to the project In this
example, it’ll go in the global application object Add a global application class to your project using Add New Item
2 Add a SiteMapResolve event handler to the Global.asax fi le you just added The handler
can do whatever you want it to do The example here clones the SiteMapNode object
that’s passed in via the event arguments (by cloning the node, the handler avoids fying the underlying data structure) Then the handler modifi es the node’s Title fi eld to
modi-add the phrase “(you are here).” (Note you’ll see this only if the Title fi eld is displayed
by your navigation control The SiteMapPath control displays it by default.) After fi
nish-ing the handler, update Application_Start to connect the handler to the SiteMapResolve
event within the Application_Start handler of Global.asax
3 Now run the site and navigate through the pages You should see the title of each
SiteMapNode change as you page through the site (refl ected by the display name in the
Trang 5Chapter 12 Web Site Navigation 275
SiteMapPath control) The following graphic shows the site map path control with the
modifi ed title:
Custom Attributes for Each Node
Another way to extend your Web application’s navigation includes the ability to defi ne tom attributes for the site nodes in web.sitemap and retrieve them at run time Imagine that you wanted to associate a specifi c image for each page in your site How would you do this?
cus-To accomplish this, just create a new attribute and specify it in the siteMapNode element in
the site map data The following example shows how to add custom attributes to the site map nodes
Adding custom attributes to the site map
ASP.NET’s site map navigation support makes it very easy to add arbitrary attributes to each node In this example, you’ll add some JPEG URLs to the site map nodes As each page is loaded, the master page will show the JPEG in an Image control
Trang 6276 Part II Advanced Features
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 fi le to include an ImageURL
property in each siteMapNode element, like so:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="Navigation Menu" description="">
<siteMapNode url="Default.aspx" title="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.aspx"
title="Contact using physical address"
description="This is the first contact page"
ImageURL="contactPhysicalAddressimage.jpg"/>
<siteMapNode url="ContactEmailPhone.aspx"
title="Contact by email or phone"
description="This is the second contact page"
ImageURL="contactPhoneimage.jpg" />
</siteMapNode>
</siteMapNode>
</siteMap>
2 Programmatically, the ImageURL custom attribute will show up 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 MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
SiteMapNode current = SiteMap.CurrentNode;
string strImageURL = current["ImageURL"];
3 While setting an image during the master page’s Page_Load method is pretty
straight-forward, it’s not the only way to change the UI based on specifi c SiteMapNode
informa-tion For example, you might handle the OnMenuItemDataBound event and set any
Trang 7Chapter 12 Web Site Navigation 277
custom properties there The following two graphics illustrate how the master page plugs in a new image URL each time a postback is issued:
Trang 8278 Part II Advanced Features
Security Trimming
ASP.NET’s navigation support works with the authentication and authorization mechanisms
to support security trimming Security trimming means showing only part of the menu based
on the role of the current user Of course, this means that the Web site must somehow thenticate the user (see Chapter 10)
To make security trimming work, turn the securityTrimmingEnabled attribute on within
web.confi g The list of roles for which the navigation option is available is a property for each
SiteMapNode
URL Mapping
Finally, ASP.NET’s navigation architecture supports URL mapping URL mapping means ping a virtual (or nonexistent) URL to existing ASPX fi le This is done within the web.confi g
map-fi le using the urlMappings element Setting up URL mappings causes ASP.NET to read the
re-quested URL and uses the handler for the mapped URL This is done in HttpApplication using HttpContext.RewritePath
For example, imagine your Web site contained a single products page containing both CDs and DVDs However, your UI model requires you to build a menu structure that separates the
CD products and the DVD products into two options appearing separately on the menu URL mapping provides a way of handling this situation
Here’s an exercise showing how to use URL mapping to represent a single page as two rate menu items In this case, the page’s content is distinguished by a URL parameter
Implementing URL mapping
1 Update the Products page so that it shows different content when the ID parameter is
“1” or “2.” This example divides the products into CDs and DVDs The page will display different content based on the value of the ID parameter (whether it’s “1” or “2” or something else) Place a Label control on the Products page and assign its ID property
the value LabelProductType Then, drop a ListBox on the page and assign its ID the
value ListBoxProducts The code-beside fi le then implements the URL mapping
func-tionality within the Page_Load handler, as shown here
public partial class Products : System.Web.UI.Page
{
protected void AddCDsToListBox()
{
this.ListBoxProducts.Items.Add("CD- Snakes and Arrows");
this.ListBoxProducts.Items.Add("CD- A Farewell To Kings");
this.ListBoxProducts.Items.Add("CD- Moving Pictures");
this.ListBoxProducts.Items.Add("CD- Hemispheres");
Trang 9Chapter 12 Web Site Navigation 279 this.ListBoxProducts.Items.Add("CD- Permanent Waves");
this.ListBoxProducts.Items.Add("CD- Counterparts");
this.ListBoxProducts.Items.Add("CD- Roll the Bones");
this.ListBoxProducts.Items.Add("CD- Fly By Night");
this.ListBoxProducts.Items.Add("CD- 2112");
}
protected void AddDVDsToListBox()
{
this.ListBoxProducts.Items.Add("DVD- A Show Of Hands");
this.ListBoxProducts.Items.Add("DVD- Exit Stage Left");
this.ListBoxProducts.Items.Add("DVD- Rush In Rio");
2 Update the web.sitemap fi le to include the new menu items mapped to virtual fi les (for
example, CDs.aspx and DVDs.aspx) Add this to the Web.site fi le:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns=
"http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="Navigation Menu" description="">
<siteMapNode url="Default.aspx" title="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="CDs.aspx" title="CDs"
description="This is the CDs page"
ImageURL="productsimage.jpg"/>
<siteMapNode url="DVDs.aspx" title="DVDs"
description="This is the DVDs page"
ImageURL="productsimage.jpg"/>
</siteMapNode>
Trang 10280 Part II Advanced Features
<siteMapNode url="Support.aspx" title="Support"
description="This is the support page"
ImageURL="supportimage.jpg"/>
<siteMapNode url="Contact.aspx" title="Contact"
description="This is the contacts page"
ImageURL="contactimage.jpg">
<siteMapNode url="ContactAddress.aspx"
title="Contact using physical address"
description="This is the first contact page"
ImageURL="contactPhysicalAddressimage.jpg"/>
<siteMapNode url="ContactEmailPhone.aspx"
title="Contact by email or phone"
description="This is the second contact page"
<add url="~/CDs.aspx" mappedUrl="~/Products.aspx?ID=1"/>
<add url="~/DVDs.aspx" mappedUrl="~/Products.aspx?ID=2"/>
</urlMappings>
</system.web>
</configuration>
4 Run the page Notice the menu has changed and now includes two new items under
the Products menu The site map points these two items to the CDs.aspx fi le and the DVDs.aspx fi le Although the application does NOT include fi les with these names, the user still sees a page that works when they redirect using one of these menu items The web.confi g fi le remaps the request back to the Products.aspx page, passing a URL parameter with a specifi c value When the Products.aspx page is loaded and the ID parameter is “1” or “2,” the page loads the list box with CD titles or DVD titles
Trang 11Chapter 12 Web Site Navigation 281
The following graphic shows the CDs “product page” being selected from the site map data:
The following graphic shows the DVDs “product page” being selected from the site map data:
Trang 12282 Part II Advanced Features
The following graphic shows the normal “product page” being selected from the site map data:
URL mapping is useful in all kinds of situations in which you need to represent pages within a navigation control, even though there may not be a physical page to support it
Summary
Web applications have always been organized hierarchically; even the earliest sites containing simple HTML fi les and perhaps some image fi les (or other types of fi les) are typically hierar-chical by nature The fundamental architecture of any Web site is always considered hierar-chical—whether the application is one or several layers deep
Modern Web UIs have become sophisticated enough to need to represent a site’s hierarchy Very often you’ll see a Web site’s structure represented as a menu or some sort of tree In addition, many sites now include a UI element representing the “path” along which the user
is browsing (this is a common UI idiom with online forums)
ASP.NET includes an entire architecture designed to support Web site navigation The dard involves using an XML fi le describing the site’s hierarchy The SiteMap object populates
stan-itself by reading the XML fi le and building an internal data structure representing the chy That data structure is made up of SiteMapNodes You can always fi nd the current node
Trang 13hierar-Chapter 12 Web Site Navigation 283
(representing the current page) within the Web site using the static Current property from
the SiteMap object
ASP.NET supports three controls for navigating a Web site: the Menu, the TreeView, and the SiteMapPath control Each of these controls may be hooked up to the SiteMap data, and
their contents will refl ect the contents of the site map data In addition to wiring the tion controls up to the site map data source, ASP.NET supports hooking up an event handler for the SiteMapResolve event, which occurs every time the user navigates through a naviga-
naviga-tion control hooked up to the site map data These controls are most useful when placed on
a master page where they may be shared across all the pages on the site, giving the site a singular look to its layout In addition, using the site map architecture makes updating the navigation scheme very straightforward Simply update the site map information and it will
be refl ected by all the controls using it the next time the page renders
Chapter 12 Quick Reference
This is useful for adding an XML-based site map to your site
Add a navigation control to a
page in your site
Open the Navigation controls node on the Toolbox Select the Menu, the TreeView, or the SiteMapPath control and place it on the page.
When you place the navigation control on the page, you’ll see a small task window asking you to choose the data source If you already have the appropriate data source on your page, select it If you’ve created an XML-based site map for your page, choose New Data Source and select
“SiteMap” or “XML File”—depending on how your navigation data are aged.
Intercept navigation requests as
they occur
Write a handler for the SiteMapResolve event in the Global.asax fi le
Map virtual nonexistent URLs to
real URLs
Add a urlMapping section to web.confi g to map the virtual URLs Add the
virtual URLs to your site map data so that the user can more easily navigate
to the given page.
Trang 15285
Chapter 13
Personalization
After completing this chapter, you will be able to
Use ASP.NET personalization
Apply personalization to a Web site
This chapter covers ASP.NET’s built-in personalization features A major theme throughout ASP.NET is to provide frameworks and support for implementing features most Web sites need For example, we saw the support ASP.NET provides for making a common look and feel throughout a site via Master Pages and Themes in Chapter 8 We saw the new login con-trols in Chapter 10 The new login controls are there so you don’t have to hash out yet one more login control Then there are authentication and authorization, site maps, and on and
on ASP.NET today is just packed with features to make your site development task easier and faster
Personalizing Web sites is another feature that often makes for a great Web site Until ASP.NET 2.0, it was up to you to provide any personalization support for your site Now these features are rolled into ASP.NET
Let’s take a look at Web personalization
Personalizing Web Visits
When the Internet and the Web fi rst began coming into prominence, most of the sites you could surf to contained only static content That is, they offered only text, graphics, and per-haps links to other pages The early Web-surfi ng community consisted of only the few folks who knew about the Internet browsers peering into the contents of those early Web servers Until the Web began exploding with interactive sites, there was really no need for the Web site to care who was looking at it However, any businessperson worth his or her salt will tell you that tailoring and targeting content toward specifi c individuals is good for business The next time you go online to shop or visit a subscription-type site, take note of how much the site knows about you Very often (if you’ve provided login information) the site will greet you with your name It may point you to information or products that might interest you This demonstrates the notion of personalizing a Web site
In the past, any personalization of your site resulted from code you wrote, such as code to manage user preferences in cookies or code to store personal information in databases In addition to simply storing and managing the personal information, you had to integrate the