ASP.NET 4 Unleased - p 27 docx

ptg 234 CHAPTER 4 Using the Rich Controls throw new Error(errMsg); } </script> </head> <body> <object id=”SilverlightContent” width=”400” height=”300” data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2”> <param name=”source” value=”SilverlightApplication1.xap” /> <param name=”onerror” value=”onSilverlightError” /> <param name=”background” value=”black” /> <param name=”minRuntimeVersion” value=”3.0.40624.0” /> <param name=”autoUpgrade” value=”true” /> <a href=”http://go.microsoft.com/fwlink/?LinkID=149156” style=”text-decoration: none;”> <img src=”http://go.microsoft.com/fwlink/?LinkId=108181” alt=”Get Microsoft Silverlight” style=”border-style: none” /> </a> </object> </body> </html> Listing 4.20 displays a simple web page with a Silverlight control. The SilverlightApplication1.xap file is located in the same folder as our web page, as the source tag indicates. The background of the control is set to black, and we require a minimum version of Silverlight 3. If a user visits this page and has only Silverlight 1 or 2 installed, they are automatically prompted to upgrade to the newer version. The a and img HTML tags toward the bottom of the object display only if the user does not have the Silverlight runtime installed and shows the default Get Microsoft Silverlight installation button. Summary This chapter tackled the rich controls. You learned how to perform file uploads with the FileUpload control. You also saw how to accept and display large file uploads by dividing the file into smaller chunks. You also learned how to use the Calendar control to display a date picker and render a schedule of events. Using a tiny bit of JavaScript, you learned how to create a fancy pop- up date picker. This chapter also discussed the AdRotator control. You learned how to store a list of adver- tisements in both an XML file and a database table. You also learned how to track advertisement impressions and transfers and build a statistics page. From the Library of Wow! eBook ptg 235 Summary 4 You also learned how to use the MultiView control to display different views of a page. You learned how to create a tabbed page by using the MultiView control with the Menu control. You also learned how to use the MultiView to divide a large form into multiple subforms. We also discussed the Wizard control. You learned how to use the Wizard control to render navigation elements automatically for completing a multistep task. Finally, you learned how to add rich content to your site with Silverlight. You learned how to add Silverlight and how to display alternative content when a user doesn’t have Silverlight installed. From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook ptg CHAPTER 5 Designing Websites with Master Pages IN THIS CHAPTER . Creating Master Pages . Modifying Master Page Content . Loading Master Pages Dynamically . Summary A Master Page enables you to share the same content among multiple content pages in a website. You can use a Master Page to create a common page layout. For example, if you want all the pages in your website to share a three- column layout, you can create the layout once in a Master Page and apply the layout to multiple content pages. You also can use Master Pages to display common content in multiple pages. For example, if you want to display a standard header and footer in each page in your website, you can create the standard header and footer in a Master Page. By taking advantage of Master Pages, you can make your website easier to maintain, extend, and modify. If you need to add a new page to your website that looks just like the other pages in your website, you simply need to apply the same Master Page to the new content page. If you decide to completely modify the design of your website, you do not need to change every content page. You can modify just a single Master Page to dramatically change the appearance of all the pages in your application. In this chapter, you learn how to create Master Pages and apply them to content pages. It describes how you can apply a Master Page to an entire application by registering the Master Page in the web configuration file. It also explores different methods of modifying content in a Master Page from individual content pages. For example, you learn how to change the title displayed by a Master Page for each content page. Finally, you learn how to load Master Pages dynamically. Loading Master Pages dynamically is useful when you need to co-brand one website with another website, or when you want to enable individual website users to customize the appearance of your website. From the Library of Wow! eBook ptg 238 CHAPTER 5 Designing Websites with Master Pages Creating Master Pages You create a Master Page by creating a file that ends with the .master extension. You can locate a Master Page file any place within an application. Furthermore, you can add multiple Master Pages to the same application. For example, Listing 5.1 contains a simple Master Page. LISTING 5.1 SimpleMaster.master <%@ Master Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; font:14px Arial,Sans-Serif; } .content { margin:auto; width:700px; background-color:white; border:Solid 1px black; } .leftColumn { float:left; padding:5px; width:200px; border-right:Solid 1px black; height:700px; } .rightColumn { float:left; padding:5px; } .clear { clear:both; } From the Library of Wow! eBook ptg 239 Creating Master Pages </style> <title>Simple Master</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <div class=”leftColumn”> <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”/> </div> <div class=”rightColumn”> <asp:contentplaceholder id=”ContentPlaceHolder2” runat=”server”/> </div> <br class=”clear” /> </div> </form> </body> </html> The Master Page in Listing 5.1 looks similar to a normal ASP.NET page. You can place almost all the same elements in a Master Page that you can place in an ASP.NET page, including HTML, server-side scripts, and ASP.NET controls. VISUAL WEB DEVELOPER NOTE You c reate a Master Page in V isual Web Developer by selecting the Website menu option, Add New Item, and the Master Page item. You can see two special things about the Master Page in Listing 5.1. First, the file contains a <%@ Master %> directive instead of the normal <%@ Page %> directive. Second, the Master Page includes two ContentPlaceHolder controls. 5 From the Library of Wow! eBook ptg 240 CHAPTER 5 Designing Websites with Master Pages When the Master Page merges with a particular content page, the content from the content page appears in the areas marked by ContentPlaceHolder controls. You can add as many ContentPlaceHolders to a Master Page as you need. WARNING You c an’t do some things in a Master Page that you can do in a content page. For example, you cannot cache a Master Page with the OutputCache directive. You also cannot apply a theme to a Master Page. The Master Page in Listing 5.1 creates a two-column page layout. Each ContentPlaceHolder control is contained in a separate <div> tag. Cascading Style Sheet rules position the two <div> tags into a two-column page layout (see Figure 5.1). WEB STANDARDS NOTE The Master Page uses Cascading Style Sheets (CSS) to create the page layout. You should strive to avoid using HTML tables for layout. Use HTML tables to display only tabular information. FIGURE 5.1 Creating a two-column Master Page. From the Library of Wow! eBook ptg 241 Creating Master Pages 5 The content page in Listing 5.2 uses the Master Page that was just created. LISTING 5.2 SimpleContent.aspx <%@ Page Language=”C#” MasterPageFile=”~/SimpleMaster.master” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> Content in the first column <br />Content in the first column <br />Content in the first column <br />Content in the first column <br />Content in the first column </asp:Content> <asp:Content ID=”Content2” ContentPlaceHolderID=”ContentPlaceHolder2” Runat=”Server”> Content in the second column <br />Content in the second column <br />Content in the second column <br />Content in the second column <br />Content in the second column </asp:Content> When you open the page in Listing 5.2 in a web browser, the contents of the page merge with the Master Page. VISUAL WEB DEVELOPER NOTE In Visual Web Developer, you create an ASP.NET page associated with a particular Master Page by selecting Website, Add New Item, and Web Form. Next, check the check box labeled Select Master Page. When you click Add, a dialog box appears that enables you to select a Master Page. The Master Page is associated with the content page through the MasterPageFile attribute included in the <%@ Page %> directive. This attribute contains the virtual path to a Master Page. From the Library of Wow! eBook ptg 242 The content page does not contain any of the standard opening and closing XHTML tags. All these tags are contained in the Master Page. All the content contained in the content page must be added with Content controls. You must place all the content contained in a content page within the Content controls. If you attempt to place any content outside these controls, you get an exception. The Content control includes a ContentPlaceHolderID property. This property points to the ID of a ContentPlaceHolder control contained in the Master Page. Within a Content control, you can place anything that you would normally add to an ASP.NET page, including XHTML tags and ASP.NET controls. Creating Default Content You don’t need to associate a Content control with every ContentPlaceHolder control contained in a Master Page. You can provide default content in a ContentPlaceHolder control, and the default content appears unless it is overridden in a particular content page. For example, the Master Page in Listing 5.3 includes an additional column, which displays a banner advertisement (see Figure 5.2). The banner advertisement is contained in a ContentPlaceHolder control named contentAd. CHAPTER 5 Designing Websites with Master Pages FIGURE 5.2 Displaying default content in a Master Page. From the Library of Wow! eBook ptg 243 Creating Master Pages 5 LISTING 5.3 DefaultMaster.master <%@ Master Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; font:14px Arial,Sans-Serif; } .content { margin:auto; width:700px; background-color:white; border:Solid 1px black; } .leftColumn { float:left; padding:5px; width:200px; border-right:Solid 1px black; height:700px; } .middleColumn { float:left; padding:5px; } .rightColumn { float:right; width:175px; height:300px; border-left:solid 1px black; border-bottom:solid 1px black; background-color:#eeeeee; text-align:center; } From the Library of Wow! eBook . data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2”> <param name=”source” value=”SilverlightApplication1.xap” /> <param name=”onerror” value=”onSilverlightError” /> <param. Master Page in Listing 5.1 looks similar to a normal ASP. NET page. You can place almost all the same elements in a Master Page that you can place in an ASP. NET page, including HTML, server-side. file any place within an application. Furthermore, you can add multiple Master Pages to the same application. For example, Listing 5.1 contains a simple Master Page. LISTING 5.1 SimpleMaster.master <%@