Chapter 7 Navigation

Objectives How to move around in your site using server controls and plain HTML How to address pages and other resources like images How to use the ASP.NET Menu, TreeView, and SiteMapPath navigation controls How to use ASP.NET’s routing capabilities How to send users from one page to another programmatically

Moving around your site You can link through a regular HTML anchor You can log in here You can link through a server side Hyperlink control which renders as an HTML anchor You can log in here Renders as You can log in here

Relative URL URL stands for Uniform Resource Locator and is used to access another web resource. Relative URL: Points to another resource based on the location of the current resource If some was to ask you how to get to FIU, you could ask them where they are and then give them directions based on their location. If they were to change location, you would have to give them different directions. Relative URL looks at the current folder structure, and you can go to the parent folder by using “../”

Relative URL Starting at the root of the site. To link from Login.aspx at the root to Default.aspx, under the management folder Management To refer to the image Header.jpg from Default.aspx in the management folder You can also use multiple “../” together to go up multiple folders For example “../../Images/Header.jpg” would work from the Reviews folder

Root-Based Relative URLs You can use a “/” to start from the root of the website structure Management This works regardless of where the URL call is made, because it starts at the root and finds the resource in the structure. Server-Side Relative URLs: You can use the ~ to point to the root on the website If an application folder is configured on the web server, the ~ will navigate the application folder instead of the usual root

Absolute URL The URL is using the full domain name and protocol Required for resources outside your website When possible, use relative URLs If website is move to a new domain Absolute URLs will break Carries more overhead than the same file using a relative path.

Default documents Files can be configured to be the default file that gets accessed in the web server if a call to is called. If the web server is configured to use default.aspx as the default document, then: will automatically go to If there is a default document, you should use the domain in a link instead of domain/defaultdocument

Navigation Controls: Menu, Treeview, SiteMapPath

Navigation Controls Web.sitemap is an XML file which is used as the configuration for the navigation controls and contains the logical structure of the site. <siteMapNode url="~/Reviews.aspx" title="Reviews" description="Reviews published on this site" /> <siteMapNode url="~/About.aspx" title="About" description="About this site" /> siteMap is the top root and only one siteMapNode is allowed under sitemap (the Home page). Can work with Security to show / hide.

Menu Control You can add a menu control and configure its SiteMapDataSource to point to the configured site map and it will be ready to use. There are many properties for this control…you can control its styling through CSS class RenderingMode can be switched between heavier tables with inline styles and more lightweight unordered lists. You can design the control through the properties which will add it to a tag. Or you can use a.css file to change the design of the elements in the menu (level1, level2 which are CSS classes).

CSS in for the menu control Menu rendered can be styled with CSS Home <a title="Reviews published on this site" Class="level1" href="/Reviews/Default.aspx">Reviews <a title="All Reviews Grouped by Genre" class="level2" href="/Reviews/AllByGenre.aspx">By Genre <a title="All Reviews" class="level2" href="/Reviews/All.aspx">All Reviews... a.level1:hover, a.level2:hover { background-color: #BCD1FE; }

Treeview control Hierarchical and collapsible structure, like Windows Explorer Can use other XML files instead of the SiteMap Uses the SiteMapDataSource to bind to a menu data file. You can hide the -, + images which affect the collapse and expand of the nodes. Rendering generates table HTML with a lot of overhead

SiteMapPath Often referred as a breadcrumb, a series or of links usually with a parent-> children relationship. Usually has a separate between the links SiteMapPath helps users understand where they are in the site and gives them an easy way to navigate to pages higher up in the site hierarchy. Renders as a series of tags

Routing FriendlyURL routing can be configured to drop the.aspx extension on a URL call, so accessing /Contact would redirect to /Contact.aspx Must install a new package from NuGet package manager A Configuration class is created under App_Code folder The Global.asax file must be modified. Global.asax is a special file at the root of your website in which we can program to respond to global events on your site. These global events include (Application_Init, Application_Start, Application_Error, BeginRequest and others ).

Routing In the package manager command prompt, install: Install-Package Microsoft.AspNet.FriendlyUrls.Core Create a class called RouteConfig in the App_Code using System.Web.Routing; using Microsoft.AspNet.FriendlyUrls; public static class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { var settings = new FriendlyUrlSettings(); settings.AutoRedirectMode = RedirectMode.Permanent; routes.EnableFriendlyUrls(settings); }

Routing In the Global.asax file, add the following code under Application_Start void Application_Start(object sender, EventArgs e) { // Code that runs on application startup RouteConfig.RegisterRoutes(System.Web.Routing.RouteTable.Routes); } The requests to the different pages will no longer have the extension showing (.aspx)

Programmatic Redirection: Redirect In ASPX, Response object gives you access to useful properties and methods that are all related to the response from the server to the user’s browser. Response.Redirect is a method on the server side which instructs the client browser to go to another page, so control goes from the redirect (server side) -> browser (client) -> new request to new resource (another server). Response.RedirectPermanent works with search engines to keep note of the redirect as a permanent one and stop requesting the current file. protected void Page_Load(object sender, EventArgs e) { Response.RedirectPermanent("Default"); }

Programmatic Redirection: Redirect Often we want to redirect with the querystring, a key, value pair of paremeters which are passed by the URL call. The Redirect in the “FROM” page: protected void Page_Load(object sender, EventArgs e) { Response.Redirect("Target?Test=SomeValue"); } The Request in the “TO” page: protected void Page_Load(object sender, EventArgs e) { Label1.Text = Request.QueryString.ToString(); }

Server Side Transfer Uses the.NET Server Object. Never returns control back to the user’s browser and hence doesn’t show the URL that it is being transferred to in the browser. For example, a user may request a page like this: Under the hood the server might transfer to: 345

Server Side Transfer Use the Server.Transfer() method. Can only transfer to pages within your website. ASP.NET will throw an error if you try to transfer to a page outside of your domain. Pass it resource or page to load and it will do so right away. protected void Page_Load(object sender, EventArgs e) { Server.Transfer("Target.aspx?Test=SomeValue"); }

Try it Out Pg. 248 Pg. 255 Pg. 259 Pg. 261 Pg. 265 Pg. 267

Summary In this chapter we covered: Learned how to move around in your site using server controls and plain HTML Learned how to link pages and other resources like images Learned How to use the ASP.NET Menu, TreeView, and SiteMapPath navigation controls Understood how to use ASP.NET’s routing capabilities Learned to send users from one page to another programmatically