5. User Controls, Master Pages and Navigation - ASP.NET Web Forms


Published on

This is User Controls, Master Pages and Navigation presentation of the free ASP.NET Web Forms Course in Telerik Academy.
Telerik Software Academy: http://aspnetcourse.telerik.com
The website and all video materials are in Bulgarian

Table of contents:
Data Validation; Validation Controls; Common Properties; Validation Group

ASP.NET Web Forms Course @ Telerik Academy

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

5. User Controls, Master Pages and Navigation - ASP.NET Web Forms

  1. 1. User Controls, Master Pages and Navigation Master Pages, User Controls, Site Maps, LocalizationSvetlin NakovTechnical Trainerwww.nakov.comTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents1. Master Pages2. User Controls3. Navigation Controls4. Localization 2
  3. 3. Master Pages
  4. 4. Master and Content Pages Header Content Footer 4
  5. 5. Why Use Master and Content Pages? The structure of the site is repeated over most of its pages Common Look & Feel To avoid the repeating (and copying) of HTML code and the logics behind it 5
  6. 6. Master Pages – Characteristics Provide reusable user interface Allow creating a consistent layout for the pages in your application Can be set either at the design or programmatically 6
  7. 7. Master Pages Master Pages start with the @Master directive  Almost the same attributes as the @Page directive Master Pages can contain:  Markup for the page (<html>, <body>, …)  Standard contents (HTML, ASP.NET controls)  <asp:ContentPlaceHolder> controls which can be replaced in the Content Pages 7
  8. 8. Content Pages Content Pages derive the entire content and logic from their master page Use the @Page directive with MasterPageFile attribute pointing to the Master Page  Replace a <asp:ContentPlaceHolder> from the master page by using the <asp:Content> control  Set the ContentPlaceHolderID property  Points to the ContentPlaceHolder from the Master Page which content we want to replace 8
  9. 9. Master and Content Pages – MechanicsSite.master Default.aspx (content page)<%@ Master %> <%@ Page MasterPageFile= "~/Site.master" %> Header Navigation <asp:ContentPlaceHolder <asp:Content ID="MainContent"> ContentPlaceHolderID Here we put the "MainContent"> default content Here we put the contents </asp:ContentPlaceHolder> with which we want to replace the default ones </asp:content> Footer 9
  10. 10. Using Master Pages Live Demo
  11. 11. Master and Content Pages – Advanced We can change the Master Page at runtime in the code-behind Page.MasterPageFile = "~/SiteLayout.master"; We can alsoselect the Master Page according to the browser type <%@ Page Language="C#" ie:MasterPageFile="~/IESiteLayout.master" mozilla:MasterPageFile="~/FFSiteLayout.master" %> 11
  12. 12. Nested Master Pages Master pages can be nested, with one master page referencing another as its master  Nested Master Pages allow creating componentized Master Pages  A child master page has the file name extension .master, as any master page<% @Master Language="C#" %> // Parent Master Page<asp:ContentPlaceHolder ID="MainContent" runat="server" /><% @Master Language="C#" MasterPageFile="~/Parent.master"%><asp:Content ID="Menu" ContentPlaceholderID="MainContent" runat="server"> <asp:ContentPlaceHolder ID="LeftMenu" runat="server" /> <asp:ContentPlaceHolder ID="TopMenu" runat="server" /></asp:Content> // Child Master Page 12
  13. 13. ASP.NETUser Controls
  14. 14. User Controls User controls are reusable UI components used in ASP.NET Web Forms applications User controls derive from TemplateControl  Similar to a Web form  Have HTML and CodeBehind  Allow developers to create their own controls with own UI and custom behavior 14
  15. 15. User Controls (2) To add a User Control 15
  16. 16. User Controls (3) A Web User Control:  An ASP.NET page that can be nested in another ASP.NET page  A server component which offers a user interface and attached logics  Can be shared by the pages of an application  Cannot be viewed directly in a browser  Has a code-behind class 16
  17. 17. User Controls (4) Differs from custom server controls  Custom controls are advanced and beyond the scope of the course Consists of HTML and code Doesn’t contain <head>, <body> and <form> HTML tags Uses @Control instead of @Page 17
  18. 18. User Controls – Advantages Independent  Use separate namespaces for the variables  Avoid name collisions with the names of methods and properties of the page  Reusable  User controls can be used more than once on a single page  No conflicts with properties and methods  Language neutrality  User controls can be written in a language different of the one used in the page 18
  19. 19. Sharing of User Controls User controls can be used throughout an application Cannot be shared between two Web applications  Except by the copy&paste "approach"  Another approach is to create a Web custom control  Everything is manually written 19
  20. 20. Using User Controls A user control can be added to each ASP.NET Web form The form is called "host" The form adds the control by using the @Register directive <%@ Register TagPrefix="demo" TagName="SomeName" Src="NumberBox.ascx"%> TagName defines the name used by tags that will insert an instance of the control Src is the path to the user control 20
  21. 21. User Controls Live Demo
  22. 22. Site Navigation
  23. 23. Site Navigation Site maps and navigationcontrols provide an easy way to create navigation in ASP.NET  Site Map  Describes the logical structure of a site  Built in support for XML Site Map  Object model  Programming API for accessing the Site Map  SiteMapDataSource  Used for data binding 23
  24. 24. What is Site Map? Site Map – a way to describe and store the logical structure of the site  A tree-like data structure Visual Studio supports Site Maps stored in XML files To use another storage mechanism you must use a custom SiteMapProvider 24
  25. 25. XML Site Map Create an XML file named Web.sitemap in the application root  Automatically detected by the default ASP.NET SiteMapProvider Add a siteMapNode element for each page in your Web site  Nest siteMapNode elements to create a hierarchy Should have only one root siteMapNode element 25
  26. 26. XMLSiteMapProvider – Example<siteMap> <siteMapNode title="Home" description="Home" url="~/Default.aspx" /> <siteMapNode title="Products" description= "Our products" url="~/Products.aspx"> <siteMapNode title="Hardware" description= "Hardwarechoices" url="~/Hardware.aspx" /> <siteMapNode title="Software" description= "Software choices" url="~/Software.aspx" /> </siteMapNode> …</siteMap>
  27. 27. siteMapNode Attributes Title – a friendly name of the node (page) Description – used as a tool tip description in Site Map controls URL – the URL of the page  Usually starting with "~/" meaning the application root 27
  28. 28. Site Navigation (2) Site Map Controls  Menu  TreeView  SiteMapPath 28
  29. 29. Site Navigation (3)Server Controls Menu TreeView SiteMapPath SiteMapDataSourceSite Navigation SiteMapNode SiteMapNode SiteMapNode SiteMap classAPI XmlSiteMapProvider (SiteMapProvider)Provider Layer Relational web.sitemap User Defined Store
  30. 30. Menu Control The <asp:Menu> is a fully functional menu We can change every visual aspect of the control  Images, effects, direction… Two modes  Static – all of the menu nodes are visible  Dynamic – the menu nodes are visible only when the mouse pointer is over some of the MenuItem-s 30
  31. 31. Menu Control (2) StaticDisplayLevels  The number of statically displayed levels starting from the root MaximumDynamicDisplay  The number of dynamically displayed levels after the last of the static ones Element onclick() event  Navigation to another page  Postback to the same page 31
  32. 32. TreeView control TreeView is a control used to display data in a hierarchical view Supports settings for various images and visual adjustments Supports navigation and postback We can create nodes at design time or through code  We can fill the nodes on demand (when there is lots of data) Used together with SiteMapDataSource 32
  33. 33. SiteMapPath Control Allows the user to see where he is in the site hierarchy Displayed in a straightforward fashion We can set:  PathDirection – RootToCurrent and CurrentToRoot  PathSeparator – a separator between the levels in the hierarchy  ParentLevelsDisplayed – how many parent elements to display 33
  34. 34. SiteMapDataSource SiteMapPath has integrated support for Site Map When displaying Site Map information in any of them you a SiteMapDataSource object is used First drop one on the page Set the DataSourceID property of the bound control to point to the SiteMapDataSource 34
  35. 35. Navigation Controls Live Demo
  36. 36. Localization
  37. 37. What is Localization? Localization means to displaythe Web site in a different way when a different culture is used ASP.NET supports localization through resource files  They have a .resx extension  Can be edited with Visual Studio Two ways of localization  Implicit  Explicit 37
  38. 38. Resource Files Resource files are a collection of name-value pairs  We can edit them through Visual Studio Create a separate file for each culture you want supported  Each resource file should include the locale in its name before the .resx  ASP.NET automatically picks the resource file corresponding to the UI culture of the user 38
  39. 39. Implicit Localization Implicit localization uses a set of resource files for each page Each file name should be:  The name of the page + .localecode + .resx  Example: Default.aspx.bg-bg.resx The names in the resource file correspond to the properties of controls on the page  Example: LabelPrice.Text 39
  40. 40. Implicit Localization (2) Implicit localization automatically sets the properties of controls on the page that are present in the resource file  The values are the settings for that property we want applied <asp:Label runat="server" ID="lblHelloWorld" Text="Hello" meta:resourcekey="lblHelloWorld" /> We can create a resource filefor ASP.NET page using [Tools]  [Generate Local Resource] After that we copy and rename the file for each culture and change its values 40
  41. 41. Explicit Localization In explicit localization we can use only a set of resource files for the whole application We set bindings to names in the resource files manually  Use the expression property of controls <asp:Label runat="server" ID="lblHelloWorld" Text="<%$ Resources:lblHelloWorld.Text %>" Font-Names="<%$ Resources:lblHelloWorld.Font-Names %>" ForeColor="<%$ Resources:lblHelloWorld.ForeColor %>" /> 41
  42. 42. Implicit Localization Live Demo
  43. 43. User Controls and Master Pages курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  44. 44. Free Trainings @ Telerik Academy ASP.NET Web Forms Course  aspnetcourse.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com 44