Reusable User Controls: The SiteHeader and SiteFooter | Developing Microsoft ASP.NET Server Controls and Components (Pro-Developer)

Reusable User Controls: The SiteHeader and SiteFooter Examples

User controls are often used to provide header and footer functionality on pages. Listing 4-4 shows a simple header user control that we use on all our pages.

Listing 4-4 SiteHeader.ascx

 <%@ControlLanguage="c#"ClassName="SiteHeader"%> <scriptrunat="server"> publicstringHeading{ get{ returnheadingLabel.Text; } set{ headingLabel.Text=value; } } publicstringSubHeading{ get{ returnsubHeadingLabel.Text; } set{ subHeadingLabel.Text=value; } } </script> <asp:Panelid="headerPanel"runat="server"Width="100%"> <p> <asp:Labelid="headingLabel"runat="server"Font-Names="Verdana" Font-Size="14pt"Font-Bold="True"/> <br> <asp:Labelid="subHeadingLabel"runat="server" Font-Names="TrebuchetMS"Font-Size="12pt"Font-Bold="True" Font-Italic="True"/> <hr> </p> </asp:Panel>

The SiteHeader user control exposes the Heading and SubHeading properties to enable a user to provide a heading and a subheading for the page.

We also use on our pages a footer control that displays static text, as shown in Listing 4-5.

Listing 4-5 SiteFooter.ascx

 <%@ControlLanguage="c#"ClassName="SiteFooter"%> <asp:Panelid="headerPanel"runat="server"Width="100%"> <p> <br> <hr> <asp:Labelid="subHeadingLabel"runat="server"Font-Size="8pt" Font-Names="Verdana"> <b>DevelopingASP.NETServerControlsandComponents</b> <br> ByNikhilKothariandVandanaDatye <br> Copyright(c)2002,MicrosoftPress. </asp:Label> </p> </asp:Panel>

The page shown in Listing 4-6 uses the SiteHeader and SiteFooter controls and sets the Heading and SubHeading properties on the SiteHeader user control.

Listing 4-6 SiteHeaderFooterTest.aspx

 <%@Pagelanguage="c#"%> <%@RegisterTagPrefix="mspuc"TagName="SiteHeader" src="~/UserControls/SiteHeader.ascx"%> <%@RegisterTagPrefix="mspuc"TagName="SiteFooter" src="~/UserControls/SiteFooter.ascx"%> <html> <head> <linkhref="http://Default.css"type="text/css"rel="stylesheet"/> </head> <body> <formid="SiteHeaderTest"method="post"runat="server"> <mspuc:SiteHeaderid="SiteHeader1"runat="server"Heading="Chapter4" SubHeading="SiteHeaderandSiteFooterTestPage"/> <br> ThispagedemonstratestheSiteHeaderandSiteFooter usercontrols. <br> TheseusercontrolsareusedthroughouttheBookWebapplication foraconsistentlookandfeel. <br>

 <mspuc:SiteFooterid="SiteFooter1"runat="server" Heading="Chapter4" SubHeading="SiteHeaderandSiteFooterTestPage"/> </form> </body> </html>

We used the ~ syntax in Listing 4-6 to specify values for relative URLs in the Src attribute ( src="~/UserControls/SiteHeader.ascx") . This syntax can be used only within an ASP.NET Web application and denotes a Web application “relative URL ”that is, a URL relative to the virtual root of your Web application. For example, the virtual root for our Web application is /BookWeb , and the Web application “relative URLs in Listing 4-6 resolve to /BookWeb/UserControls/SiteHeader.ascx and /BookWeb/UserControls/SiteHeader.ascx .

We have used the SiteHeader and SiteFooter controls ”as well as a simple style sheet ”on all our pages. When listing pages throughout the rest of this book, however, we will not show these user controls, the corresponding Register directives, or the style sheet. These elements are present in the .aspx pages in the sample files.

Figure 4-1 shows the SiteHeaderFooterTest.aspx page viewed in a browser.

Figure 4-1. SiteHeaderFooterTest.aspx viewed in a browser

graphics/f04hn01.jpg