Web Site Navigation 1

Web Site Navigation

How to get around in an ASP.NET web application

Web Site Navigation 2

Links

• HTML anchor– <a href=”URL”>Text</a>

• ASP.NET HyperLink control– <asp:HyperLink … NavigateUrl=”URL"> Text

</asp:HyperLink>– Can be manipulated in the code-behind

• Example: aspnet/navigation/links

Web Site Navigation 3

URLUniform Ressource Locator

• Absolute URL– http://laerer.rhs.dk/andersb/– Protocol://host/ressource

• Relative URL– Relative to the current page– /file.txt

• File in current folder

– /subfolder/file.txt• File in subfolder

– ../file.txt• File in parent folder

Web Site Navigation 4

Default documents

• URLS may lead to a folder, not a file– http://laerer.rhs.dk/andersb/

• The web server will look for a default document in the folder

• Web servers can be configured to handled a list of default documents like1. Default.aspx2. Index.htm3. Index.html4. Etc.

Web Site Navigation 5

ASP.NET navigation controls

• ASP.NET includes a few navigation controls– Menu– TreeView– SiteMapPath (aka. Bread crumps)– Visual studio

• The controls uses a logical structure of the web site defined in the file web.sitemap

• Example: aspnet/navigation/sitemap

Web Site Navigation 6

Web.sitemap• XML file with the logical structure of the web site

– Not much help from Visual Studio to create this file

<?xml version="1.0" encoding="utf-8" ?><siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="~/Default.aspx" title="Home" description="My home page"> <siteMapNode url="~/cv.aspx" title="CV" description="My resume" /> <siteMapNode url="~/courses.aspx" title="Courses" description="My courses"> <siteMapNode url="~/devenv2011spring/Default.aspx" title="Development Environments" description="The

course Development Environments"> <siteMapNode url="~/devenv2011spring/plan.aspx" title="Plan" description="Plan for the course

Development Environments" /> </siteMapNode> <siteMapNode url="~/wpan2011spring/default.aspx" title="WPAN" description="The course WPAN"> <siteMapNode url="~/wpan2011spring/plan.aspx" title="Plan" description="Plan for the course WPAN" /> </siteMapNode> </siteMapNode> </siteMapNode>

</siteMap>

Web Site Navigation 7

Menu Control

• Menu sub-items a unfolded as you hover the mouse over an item

• Uses the web.sitemap through a DataSource control– May also use other data sources than

web.sitemap• Can be styled in many different ways– Using CSS

Web Site Navigation 8

TreeView Control

• Sub-trees can be collapsed / expanded by clicking

• Uses the web.sitemap through a DataSource control– May also use other data sources than

web.sitemap• Can be styled in many different ways– Using CSS

Web Site Navigation 9

SiteMapPath

• Also known ad bread crumps• Typically shown at the top of each page to tell the user where in

the web site’s structure.• Uses the file web.sitemap directly

– No DataSource control used• Typically included in a master page

…<div> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> …

Web Site Navigation 10

Programmatic Redirection

• A web form usually submits data back the itself.– Sometimes you might want to go to a different page

• Client-side redirects– The client is responsible for the redirect.– Requires extra request/response– Can redirect to any web site

• Server-side redirect– The server is responsible for the redirect– No extra request/response– Can only redirect to other pages in this web site

Web Site Navigation 11

Client-side redirects

• Client does the redirect• ASP.NET Response object– Response.Redirect(newUrl)• HTTP response: 303 moved temporarily

– Response.RedirectPermanent(newUrl)• HTTP response: 301 moved permanent• Search engines will stop looking for the page

Web Site Navigation 12

Server-side redirects

• Server does the redirect• URL in browser not changed– Browser does not know about the redirect

• ASP.NET– Server.Transfer(url);– Server.Transfer(url?parameterName:value)• Get the parameter value using

Request.QueryString(parameterName)

Web Site Navigation 13

Further readings, etc.• Imar Spaanjaars Beginning ASP.NET 4 in C# and VB, Wrox 2010

– Chapter 7 Navigation, page 239-269• Bill Evjen Professional ASP.NET 4 in C# and VB, Wrox 2010

– Chapter 13 Site Navigation, page 519-567• George Shepherd Microsoft ASP.NET 4 Step by Step, Microsoft

Press 2010– Chapter 11 Web Site Navigation, page 237-256

• W3Schools.com ASP.NET 2.0 – Navigation– http://www.w3schools.com/aspnet/aspnet_navigation.asp

• Chris Peels How Do I Implements Site Navigation in ASP.NET (video)– http://

www.asp.net/general/videos/how-do-i-implement-site-navigation-in-aspnet, 2007