Resources

Web site navigation in ASP.NET

Page navigation is process of moving between page on a website.

With controls such as Wizard control and AJAX(Asynchronous JavaScrip and XML) can embed a lot of functionality within one page - in this case navigation refers to moving around a page rather than between pages.

Embedding all controls for particular process on single page makes developers work easier. Instead of moving data from page to page, can rely on page itself to manage entire process.

Methods to navigate between pages

  • Client-side navigation - Client code requests new webpage in response to client-side event, e.g. clicking hyperlink or executing javascript as part of button click
  • Cross-page posting - control configured to post back to webpage that is different than one that made request
  • Client-side browser redirect - server side code sends message to browser informing browser to request a different webpage
  • Server-side transfer - transfers control of a request to a different webpage

Client-side Navigation

Easiest way to navigate to different webpage if via Hyperlink control, setting its NavigateUrl to desired destination.

No data will be posted to new page, unless embedded in query string of NavigateUrl property.

To navigate via JavaScript write code to change the document object's location property:

<script language="javascript" type="text/javascript">

   function Button1_onClick() { document.location="NavigateTest2.aspx";}

</script>

Again no data is posted back to the web server. Can send data by appending to the query string to the document.location

Cross-Page Posting

Best choice when collecting data on one page and processed on another that displays the results.

A button typically has PostBackUrl set to webpage to which the processing should postback. The page that receives the postback (referred to as processing page) receives posted data from the first page.

Processing page often needs to access data contained inside initial page. The previous page's data available via Page.PreviousPage property.

The PreviousPage property only set if cross-page post occurs, if set to null then no cross-page posting has occurred. Access control on previous page via FindControl method.

Can also access cross-page data through strongly typed properties - eliminates need to call FindControl. Two steps:

  1. define properties on data collection page to expose data
  2. add <%@ PreviousPAgeType VirtualPath="~/DataCollection.aspx" %> directive to processing page to point to data collection page.

Client-Side Browser Redirect

Redirects a user to another page based on result of processing their request, e.g. after processing order redirect user to order summary page.

Page.Response object contains Redirect method to achieve this.

The redirect is not a postback, to the server it looks like the client has clicked on a hyperlink.

PreviousPage property not populated when using Redirect. To access data from original page need to pass data using traditional methods - cookies, session state variables or query strings.

Server-Side Transfer

Causes ASP.NET to process different webpage without requiring new request from browser.

e.g. Client requests page1.aspx, which calls Page.Server.Transfer("page2.aspx") then ASP.NET will process page2.aspx whist browser address bar will still show page1.aspx

Transfer call executed on server.

Note, call to Server.Transfer will raise a ThreadAbortException. The code will work if this exception is not caught, but placing in a handler for it will result in quicker execution.

Server.Transfer has override taking boolean parameter called preserveForm. When true the form and query string data is preserved whilst access to PreviousPage property is enabled.

Very useful in real world, e.g. site sells DVD and music CD. Product.aspx page displays all products available on site, but also want to make film previews and band information available. Within Product.aspx user Server.Transfer to display either film or band information - no need to code up into Product.aspx itself.

Site Map

Helps provide navigation structure for users.

Manage and document site structure using site map - an XML file containing overall structure and hierarchy of site.

Sitemap file located in root directory of application.

Can have more than one sitemap file per application - can reference one from another by creating siteMapNode element with a siteMapFile attribute.

Can restrict access to siteMapNodes using Roles attribute - to see that portion of a site user must belong to role.

SiteMap class

Provides programmatic access to navigation hierarchy.

Two main properties - RootNode and CurrentNode both returning SiteMapNode.

To access other nodes use SiteMapNode's ParentNode, ChildNodes, NextSibling and PreviousSibling.

Displaying Site Map Information

Navigation controls can take instances of SiteMapDataSource as their data source.

SiteMapDataSource provides programmatic access to site map file.

Drag control onto page and will automatically connect to site map file defined for site.

ShowStartingNode when false will prevent user seeing root node in site map file.

StartFromCurrentNode when true will create sub-navigational control from current page.

StartingNodeUrl if creating sub-navigational control, set it to URL at which to start navigation.

StartingNodeOffset is integer value that identifies number of entries up (parent) / down (children) hierarchy from start position.

Does not have visual representation - just manages access to site map data.

Menu

Shows structure in menu like format. Two main properties (among many)

  • DataSourceId - provide ID of SiteMapDataSource to be used
  • Orientation - indicates if menu should be displayed horizontally or vertically

TreeView

Shows structure in collapsible tree format.

SiteMapPath

Displays breadcrumb trails.

Automatically picks up site map file - no need to configure data source

Downloads