Chapter 7

1. Chapter 7 Navigation

2. 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

3. Moving around your site • You can link through a regular HTML anchor <a href="Login.aspx">You can log in here</a> • You can link through a server side Hyperlink control which renders as an HTML anchor <asp:HyperLinkrunat="server" id="LoginLink" NavigateUrl="Login.aspx">You can log in here</asp:HyperLink> • Renders as <a id="LoginLink" href="Login.aspx">You can log in here</a>

4. 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 “../”

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

6. Root-Based Relative URLs • You can use a “/” to start from the root of the website structure <a href="/Management/Default.aspx">Management</a> • 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 • <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Header.jpg" />

7. Absolute URL • The URL is using the full domain name and protocol <imgsrc="http://p2p.wrox.com/images/header/wrox_logo.gif" /> • 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.

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

9. Navigation Controls: Menu, Treeview, SiteMapPath

10. 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. <?xml version="1.0" encoding="utf-8" ?> <siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNodeurl="~/" title="Home.aspx" description="Go to the homepage"> <siteMapNodeurl="~/Reviews.aspx" title="Reviews" description="Reviews published on this site" /> <siteMapNodeurl="~/About.aspx" title="About" description="About this site" /> </siteMapNode> </siteMap> • siteMap is the top root and only one siteMapNode is allowed under sitemap (the Home page). Can work with Security to show / hide.

11. 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 <style> tag. • Or you can use a .css file to change the design of the elements in the menu (level1, level2 which are CSS classes).

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

13. 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

14. 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 <span> tags • <section id="MainContent"> • <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath><br /><br /> • <asp:ContentPlaceHolder ID="cpMainContent" runat="server">

15. 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 https://msdn.microsoft.com/en-us/library/ms178473.aspx ).

16. 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); } }

17. 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) http://localhost:49348/Default

18. 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"); }

19. Programmatic Redirection: Redirect • Often we want to redirect with the querystring, a key, value pair of paremeters which are passed by the URL call. • http://localhost:49246/Demos/Target?CategoryId=10&From=Home • 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(); }

20. 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: • http://www.domain.com/Cars/Volvo/850/T5/ • Under the hood the server might transfer to: • http://www.domain.com/Cars/ShowCar.aspx?Make=643&Model=984&Type=7345

21. 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"); }

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

23. 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