ptg 294 CHAPTER 6 Designing Websites with Themes For example, the page in Listing 6.20 enables a user to select a favorite skin for a GridView control. The GridView control displays a list of movies (see Figure 6.9). FIGURE 6.9 Applying a Skin programmatically. LISTING 6.20 ShowDynamicSkin.aspx <%@ Page Language=”C#” Theme=”DynamicSkin” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void Page_PreInit(object sender, EventArgs e) { if (Request[“skin”] != null) { switch (Request[“skin”]) { case “professional”: grdMovies.SkinID = “Professional”; break; case “colorful”: grdMovies.SkinID = “Colorful”; From the Library of Wow! eBook ptg 295 Applying Themes Dynamically 6 break; } } } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title>Show Dynamic Skin</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” Runat=”server” /> <hr /> <a href=”showdynamicskin.aspx?skin=professional”>Professional</a> | <a href=”showdynamicskin.aspx?skin=colorful”>Colorful</a> </div> </form> </body> </html> A hyperlink is used to select a particular Skin. The Skin is applied to the GridView in the PreInit event when a particular value is assigned to the GridView control’s SkinID property. Of course, I don’t recommend doing this. It makes more sense to use a CSS and modify a control’s CssClass property. This alternative approach is demonstrated by the page in Listing 6.21. From the Library of Wow! eBook ptg 296 CHAPTER 6 Designing Websites with Themes LISTING 6.21 ShowDynamicCSS.aspx <%@ Page Language=”C#” Theme=”DynamicSkin” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void btnSubmit_Click(object sender, EventArgs e) { grdMovies.CssClass = ddlCssClass.SelectedItem.Text; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show Dynamic CSS</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:GridView id=”grdMovies” DataSourceID=”srcMovies” HeaderStyle-CssClass=”Header” AlternatingRowStyle-CssClass=”Alternating” GridLines=”none” Runat=”server” /> <asp:SqlDataSource id=”srcMovies” ConnectionString=”<%$ ConnectionStrings:Movies %>” SelectCommand=”SELECT Id,Title,Director FROM Movies” Runat=”server” /> <hr /> <asp:Label id=”lblCssClass” Text=”Select Style:” AssociatedControlID=”ddlCssClass” Runat=”server” /> <asp:DropDownList id=”ddlCssClass” Runat=”server”> From the Library of Wow! eBook ptg 297 Applying Themes Dynamically 6 <asp:ListItem Text=”Professional” /> <asp:ListItem Text=”Colorful” /> </asp:DropDownList> <asp:Button id=”btnSubmit” Text=”Select” Runat=”server” OnClick=”btnSubmit_Click” /> </div> </form> </body> </html> Note that in this code sample, unlike the previous one, you can use a DropDownList and Button control to change the appearance of the GridView control when modifying the CssClass property. Because you can modify the CssClass property during any event before the page is rendered, you can handle the Button Click event to modify the value of the CssClass property (see Figure 6.10). FIGURE 6.10 Modifying a CssClass programmatically. From the Library of Wow! eBook ptg 298 CHAPTER 6 Designing Websites with Themes Summary In this chapter, you learned how to create a consistent look for your website by taking advantage of ASP.NET Themes. In the first section, you learned how to modify the appear- ance of controls in a page with Skins. You learned how to create both Default and Named Skins. You also learned how to apply a Theme by using the Theme attribute and StyleSheetTheme attribute. Next, you learned how to add Cascading Style Sheets to Themes. I recommended that you take advantage of Cascading Style Sheets and avoid Skins whenever possible. We also discussed how you can create Global Themes. You learned how to create a Theme that you can apply to every application executing on a web server. Finally, you learned how to dynamically apply Themes. You learned how to use the PreInit event to dynamically apply either an entire Theme or a particular Skin at runtime. From the Library of Wow! eBook ptg CHAPTER 7 Creating Custom Controls with User Controls IN THIS CHAPTER . Creating User Controls . AJAX and User Controls . Dynamically Loading User Controls . Summary A web User control enables you to build a new control from existing controls. By taking advantage of User controls, you can easily extend ASP.NET Framework with your own custom controls. Imagine, for example, that you need to display the same address form in multiple pages in a web application. The address form consists of several TextBox and Validation controls for entering address information. If you want to avoid declaring all the TextBox and Validation controls in multiple pages, you can wrap these controls inside a web User control. Anytime you discover that you need to display the same user interface elements in multiple pages, you should consider wrapping the elements inside a User control. By taking advantage of User controls, you make your website easier to maintain and extend. In this chapter, you learn how to build custom controls with User controls by starting with the basics. You learn how to create a simple User control and expose properties and events from the User control. You then examine how you can use AJAX with a User control. You learn how to modify the content displayed by a User control without posting the page that contains the User control back to the web server. Finally, you learn how you can load User controls dynami- cally. You learn how to load a User control at runtime and inject the User control into a page. In the final section of this chapter, dynamically loaded User controls are used to build a multipage wizard. From the Library of Wow! eBook ptg 300 CHAPTER 7 Creating Custom Controls with User Controls Creating User Controls Let’s start by building a simple User control that randomly displays one image from a folder of images (see Figure 7.1). The code for the User control is contained in Listing 7.1. LISTING 7.1 RandomImage.ascx <%@ Control Language=”C#” ClassName=”RandomImage” %> <%@ Import Namespace=”System.IO” %> <script runat=”server”> void Page_Load() { string imageToDisplay = GetRandomImage(); imgRandom.ImageUrl = Path.Combine(“~/Images”, imageToDisplay); lblRandom.Text = imageToDisplay; } private string GetRandomImage() { Random rnd = new Random(); FIGURE 7.1 Displaying an image with the RandomImage User control. From the Library of Wow! eBook ptg 301 Creating User Controls 7 string[] images = Directory.GetFiles(MapPath(“~/Images”), “*.jpg”); string imageToDisplay = images[rnd.Next(images.Length)]; return Path.GetFileName(imageToDisplay); } </script> <asp:Image id=”imgRandom” Width=”300px” Runat=”server” /> <br /> <asp:Label id=”lblRandom” Runat=”server” /> VISUAL WEB DEVELOPER NOTE You create a new User control in V isual Web Developer by sele cting we bsite, Ad d New Item, and the Web User control item. The file in Listing 7.1 closely resembles a standard ASP.NET page. Like a standard ASP.NET page, the User control contains a Page_Load() event handler. Also, the User control contains standard controls such as ASP.NET Image and Label controls. User controls are closely related to ASP.NET pages. Both the UserControl class and the Page class derive from the base TemplateControl class. Because they derive from the same base class, they share many of the same methods, properties, and events. The important difference between an ASP.NET page and a User control is that a User control is something you can declare in an ASP.NET page. When you build a User control, you build a custom control. The file in Listing 7.1 ends with the .ascx extension. You cannot request this file directly from a web browser. To use the RandomImage User control, you must declare the control in an ASP.NET page. The page in Listing 7.2 contains the RandomImage User control. When you open the page, a random image displays. LISTING 7.2 ShowRandomImage.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”user” TagName=”RandomImage” Src=”~/RandomImage.ascx” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” From the Library of Wow! eBook ptg 302 “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Show RandomImage</title> </head> <body> <form id=”form1” runat=”server”> <div> <user:RandomImage ID=”RandomImage1” Runat=”server” /> </div> </form> </body> </html> Before you can use a web User control in a page, you must register it. The page in Listing 7.2 includes a <%@ Register %> directive that contains the following three attributes: . TagPrefix—Indicates the namespace that you want to associate with the User control for the current page. You can use any string that you want. . TagName—Indicates the name that you want to associate with the User control for the current page. You can use any string that you want. . Src—Indicates the virtual path to the User control (the path to the .ascx file). The RandomImage User control is declared in the body of the page. It looks like this: <user:RandomImage ID=”RandomImage1” Runat=”Server” /> The declaration of the User control uses the TagPrefix and TagName specified in the <%@ Register %> directive. Furthermore, you provide a User control with both an ID and a Runat attribute, just as you would for any standard ASP.NET control. VISUAL WEB DEVELOPER NOTE You can a dd a User c ontrol to a page in V is ual Web Devel oper s imply by dragging the User control from the Solution Explorer window onto the Design surface. The <%@ Register %> directive is automatically added to the source of the page. CHAPTER 7 Creating Custom Controls with User Controls From the Library of Wow! eBook ptg 303 Creating User Controls 7 Registering User Controls in the Web Configuration File As an alternative to registering a User control in each page in which you need to use it by using the <%@ Register %> directive, you can register a User control once for an entire application. You can register a User control in an application’s web configuration file. For example, the web configuration file in Listing 7.3 registers the RandomImage control for the application. LISTING 7.3 Web.Config <?xml version=”1.0”?> <configuration> <system.web> <pages> <controls> <add tagPrefix=”user” tagName=”RandomImage” src=”~/UserControls/RandomImage.ascx”/> </controls> </pages> </system.web> </configuration> After you register a User control in the web configuration file, you can simply declare the User control in any page. For example, the page in Listing 7.4 contains an instance of the RandomImage User control, but it does not include the <%@ Register %> directive. LISTING 7.4 ShowAppRegister.aspx <%@ Page 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”> <title>Show Application Register</title> </head> <body> <form id=”form1” runat=”server”> <div> <user:RandomImage ID=”RandomImage1” Runat=”Server” /> From the Library of Wow! eBook . Library of Wow! eBook ptg 297 Applying Themes Dynamically 6 < ;asp: ListItem Text=”Professional” /> < ;asp: ListItem Text=”Colorful” /> < /asp: DropDownList> < ;asp: Button id=”btnSubmit” Text=”Select” Runat=”server”. resembles a standard ASP. NET page. Like a standard ASP. NET page, the User control contains a Page_Load() event handler. Also, the User control contains standard controls such as ASP. NET Image and. control in an ASP. NET page. The page in Listing 7.2 contains the RandomImage User control. When you open the page, a random image displays. LISTING 7.2 ShowRandomImage.aspx <%@ Page Language=”C#”