You can create a user control in Visual Studio in much the same way you add a web page. Just select Website -> Add New Item, and choose Web User Control from the list. The following user control contains a single Label control:
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="Footer.ascx.cs" Inherits="Footer" %>
<asp:Label id="lblFooter" runat="server" />
Note that the Control directive uses the same attributes used in the Page directive for a web page, including Language, AutoEventWireup, and Inherits. The code-behind class for this sample user control is similarly straightforward. It uses the UserControl.Load event to add some text to the label:
public partial class Footer : System.Web.UI.UserControl
{
protected void Page_Load(Object sender, EventArgs e)
{
lblFooter.Text = "This page was served at ";
lblFooter.Text += DateTime.Now.ToString();
}
}
To test this user control, you need to insert it into a web page. This is a two-step process. First, you need to add a Register directive to the page that will contain the user control. You place the Register directive immediately after the Page directive. The Register directive identifies the control you want to use and associates it with a unique control prefix, as shown here:
<%@ Register TagPrefix="apress" TagName="Footer" Src="Footer.ascx" %>
The Register directive specifies a tag prefix and name. Tag prefixes group sets of related controls (for example, all ASP.NET web controls use the tag prefix asp). Tag prefixes are usually lowercase—technically, they are case-insensitive—and should be unique for your company or organization. The Src directive identifies the location of the user control template file, not the code-behind file.
Second, you can now add the user control whenever you want (and as many times as you want) in the page by inserting its control tag. Consider this page example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FooterHost.aspx.cs" Inherits="FooterHost"%>
<%@ Register TagPrefix="apress" TagName="Footer" Src="Footer.ascx" %>
<!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 runat="server">
<title>Footer Host</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>A Page With a Footer</h1><hr />
Static Page Text<br /><br />
<apress:Footer id="Footer1" runat="server" />
</div>
</form>
</body>
</html>
This example (shown in Figure) demonstrates a simple way that you can create a header or footer and reuse it in all the pages in your website just by adding a user control. In the case of your simple footer, you won’t save much code. However, this approach will become much more useful for a complex control with extensive formatting or several contained controls.
Of course, this only scratches the surface of what you can do with a user control.
Posts
No comments:
Write comments