CH4: Construc-ng ASP.NET Web Pages Part 2 BUILD YOUR OWN ASP.NET 4 WEB SITE USING C# & VB

Transcription

1 CH4: Construc-ng ASP.NET Web Pages Part 2 BUILD YOUR OWN ASP.NET 4 WEB SITE USING C# & VB

2 Outlines of today s lecture Examples of advanced controls Web user controls Master Pages

3 Advanced Controls TreeView The TreeView control is a very powerful control that s capable of displaying a complex hierarchical structure of items. Typically, we d use it to view a directory structure or a site navigaqon hierarchy, but it could be used to display a family tree, a corporate organizaqonal structure, or any other hierarchical structure. The TreeView can pull its data from various sources. We ll focus on the SiteMapDataSource class, which, as its name suggests, contains a hierarchical sitemap.

4 Advanced Controls TreeView (Cont.) By default, this sitemap is read from a file called Web.sitemap that s located in the root of your project (you can easily create this file using the Site Map template in Visual Web Developer). Web.sitemap is an XML file that looks like this:

5 Advanced Controls TreeView (Cont.) An important limitaqon to note when you re working with Web.sitemap files is that they must contain only one sitemapnode as the direct child of the root sitemap element.

6 Advanced Controls TreeView (Cont.) To use this file, you ll need to add a SiteMapDataSource control to the page, as well as a TreeView control that uses this data source, like this:

7 Advanced Controls TreeView (Cont.) Note that although the SiteMapDataSource is a control, it doesn t generate any HTML within the web page. In many cases, we won t want to show the root node; we can hide it from view by se\ng the ShowStarQngNode property of the SiteMapDataSource to false:

8 Advanced Controls Menu The Menu control is similar to TreeView in that it displays hierarchical data from a data source; the ways in which we work with both controls are also very similar. The most important differences between the two lie in their appearances, and the fact that Menu supports templates for be^er customizaqon, and displays only two levels of items (menu items and submenu items).

9 Web User Controls

10 Web User Controls You ll frequently encounter pieces of the user interface that appear in mulqple places. Packaging their forms and behaviors into your own controls will allow you to reuse these components just as you can reuse ASP.NET s built- in controls. You can develop your own controls by creaqng web user controls. A web user control is represented by a class that inherits from System.Web.UI.UserControl, and contains the basic funcqonality that you need to extend to create your own controls Web user controls are implemented very much like normal web forms they re comprised of other controls, HTML markup, and server- side code. The file extension of a web user control is.ascx.

11 Crea-ng a Web User Control Suppose you have many forms consisqng of pairs of Label and TextBox controls, like the one shown below. All the labels must have a fixed width of 100 pixels, and the text boxes must accept a maximum of 20 characters.

12 Master Pages Master pages are similar to web user controls in that they, too, are composed of HTML and other controls; they can be extended with the addiqon of events, methods, or properqes. A master page is a page template that can be applied to give many web forms a consistent appearance. For example, a master page can set out a standard structure containing the header, footer, and other elements that you expect to display in mulqple web forms within a web applicaqon. Master page files have the.master extension, and, just like web forms and web user controls, they support code- behind files. All master pages inherit from the class System.Web.UI.MasterPage.

13 Master Pages (Cont.) Designing a site structure using master pages and web user controls gives you the power to modify and extend the site easily. It can be very easy to modify certain details of the layout or funcqonality of your site, because updaqng a master page or a web user control takes immediate effect on all the web forms that use the file. A master page is built using HTML and controls, including the special ContentPlaceHolder control. As its name suggests, the ContentPlaceHolder is a placeholder that can be filled with content that s relevant to the needs of each web form that uses the master page.

14 Crea-ng Master Pages In creaqng a master page, we include all of the basic structure of future pages in the master page itself, including the <html>, <head>, and <body> tags, and let the web forms specify the content that appears in the placeholders.

15 Example

16 Crea-ng Master Pages The master page looks almost like a web form, except for one important detail: it has an empty ContentPlaceHolder control. If you want to build a web form based on this master page, you just need to reference the master page using the Page direcqve in the web form, and add a Content control that includes the content you want to insert.

17 Demo