第五章 用用户控件创建自定义控件
第五章 用【用户控件】创建自定义控件
主要内容：
l 用【用户控件】包含标准内容
l 显露用户控件中的属性和方法
l 显露用户控件中的Web控件
l 显露用户控件中的事件
l 通过程序装载用户控件
用户控件是已经被转换为控件的ASP.NET页面。用户控件使你能轻易地在多个ASP.NET页面上重复使用相同的内容和编程逻辑。
首先，学习的内容是如何使用用户控件在多个ASP.NET页面上显示相同的内容。例如：如何构造标准的页眉和页脚并且在多个ASP.NET页面上显示它们。
接下来，学习内容是如何使用用户控件将多个控件打包到一个控件中。例如：如何将多个Web控件打包到一个代表地址表单的用户控件中。
最后，学习如何动态地将用户控件装载进ASP.NET页面。以及如何设置动态装载的用户控件的属性，以及调用其方法。
1、 用【用户控件】包含标准内容
可以使用用户控件在多个ASP.NET页面上重复显示静态内容。
使用用户控件在多个页面上显示相同内容的优点是，如果此内容改变了，可以很容易地更新它。
在ASP传统提示中，#INCLUDE文件用于在多个页面上显示静态内容。
在ASP.NET中，仍然可以使用#INCLUDE文件，但是用户控件提供了更多的功能。
建立用户控件，只需要创建一个扩展名为.ascx的文件。可以在用户控件中放入任何静态内容。但是，用户控件不能之间在Web浏览器中打开它们。
下面演示一个代表标准的网站页眉的用户控件（文件名SimpleHeader.ascx）
|
<html> <head> <title>Global Super Company</title> </head> <body> <h2>Global Super Company</h2> <i>We mean business!</i> <hr /> |
下面程序演示如何使用上述控件（文件HomePage.aspx）
|
<%@ register TagPrefix="SuperCompany" TagName="Header" Src="~/SimpleHeader.ascx" %>
<SuperCompany:Header ID="ctlHeader" runat="server" /> Welcome to out home page! </body> </html> |
下面是两段清单的解释：
注意：使用控件的程序，第一行必须先注册用户控件才能使用它，用Register指令。
<%@ register TagPrefix="SuperCompany" TagName="Header" Src="~/SimpleHeader.ascx" %>
Register指令有三个属性：
l TagPrefix——与用户控件的名称控件相关联的别名。能够将一个惟一的名称空间分配给用户控件。即使，如果用相同的TagName向页面中添加多个控件，仍然可以使用TagPrefix属性来区分这些控件。
l TagName——与用户控件的类相关联的别名。就是使你能够给自定义控件起名字。在页面上创建用户控件的实例时，要使用这个名字。
l Src——包含用户控件的文件的虚拟路径。如果用户控件与包含它的页面在相同的目录中，那么只需提供文件名。如果用户控件在另一个目录中，那么需要提供相对或绝对的文件路径。
在注册页面上的用户控件之后，就可以像使用其他任何的ASP.NET控件一样使用此控件。
<SuperCompany:Header ID="ctlHeader" runat="server" />
|
注意：不必总是要在<Form Runat=”server”/>标记中，包含用户控件。 只在需要控件参与视图状态时，或者在它包含其他需要视图状态的控件时，才需要在表单标记中包含用户控件。 |
可以在一个ASP.NET页面中多次使用相同的用户控件。惟一的要求就是每个示例要具有惟一的ID。ID="ctlHeader"
假设你使用多个HTML元素创建一个复杂的页面分隔线。可以将所有这些HTML元素放进一个用户控件中，并且在一个页面上多次显示这个分隔线。
|
<%--下面的用户控件代表一个从HTML <table>标记建立的页面分隔线--%> <p/> <table width="90%" cellpadding="2" cellspacing="0" border="1" bordercolor="red"> <tr> <td bgcolor="orange" height="3"></td> </tr> </table> <p /> |
|
<%@ Page Language="VB" %> <%@ register TagPrefix="SuperCompany" TagName="Divider" Src="~/Divider.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--此页面中多次显示这个分隔线--%>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>User controls Divider</title> </head> <body> <form id="form1" runat="server"> <div> <h1>Here is some text...</h1> <SuperCompany:Divider ID="ctlDivider1" runat="server" /> Here is some more text... <SuperCompany:Divider ID="ctlDivider2" runat="server" /> Yet some more text... <SuperCompany:Divider ID="ctlDivider3" runat="server" /> </div> </form> </body> </html> |
2、 显露用户控件中的属性和方法
上一节，显示的标准页眉控件有一个问题：它在每个页面上显示完全一样的页面标题。
幸运的是，这个问题很容易解决，而且此解决方案体现了用户控件的灵活性和强大功能。
用户控件不一定是简单的静态文件。你可以显露用户控件中的属性，并且可以在包含它的页面中设置和读取这些属性。
HeaderTitle.ascx
|
<%--在页眉用户控件中可以显露一个代表页面标题的属性--%>
<%@ Control Language="VB" ClassName="HeaderTitle" %>
<script runat="server"> Public PageTitle As String = "Global Super Company" '此处声明了一个PageTitle变量，并且被声明为公共的，因此可以在包含这个用户控件的任何页面中访问它。 </script> <html> <head><title><%=PageTitle %></title></head> <%--PageTitle变量显示页面的标题，变量的值在<title>标记对内显示。此变量有默认值，若没有为这个变量赋值，那么它显示默认标题。--%> <%--既然已经声明了公共变量，就可以在包含这个用户控件的任何页面中设置它--%> <body> <h2>Global Super Company</h2> <i>We mean business!</i> <hr /> |
使用自定义用户控件的页面文件HomePageTitle.aspx清单
|
<%@ register TagPrefix="SuperCompany" TagName="Header" Src="~/HeaderTitle.ascx" %>
<SuperCompany:Header ID="ctlHeader" PageTitle="我的主页" runat="server" /> <%--PageTitle="我的主页" 就是为自定义用户控件的属性赋值的方法--%>
<h1>欢迎来到我们的主页！</h1> </body> </html> |
请注意：在声明用户控件标记时，如何为页眉用户控件赋值。
<SuperCompany:Header ID="ctlHeader" PageTitle="我的主页" runat="server" />
赋值在页眉用户控件的声明中进行。
也可以通过程序，为PageTitle用户控件的属性赋值。
（例如，如下程序，在Page_Load子例程为PageTitle变量赋值）
|
<%@ register TagPrefix="SuperCompany" TagName="Header" Src="~/HeaderTitle.ascx" %>
<script runat="server"> Sub page_load() ctlHeader.PageTitle &= " - 今天的日期：" & Now.ToString("D") End Sub </script>
<SuperCompany:Header ID="ctlHeader" PageTitle="我的主页" runat="server" /> <%--PageTitle="我的主页" 就是为自定义用户控件的属性赋值的方法--%>
<h1>欢迎来到我们的主页！</h1> </body> </html> |
在用户控件中声明的所有公共变量都被显露为用户控件的属性。
用户控件文件中的函数和子例程也可以被显露。但是，函数和子例程不被显露为属性，而是用户控件的方法。
|
<%--此处用户控件以特定的次数重复显示一个单词。 它有一个名为Word的属性，这个属性代表要重复显示的单词。 它还有一个名为Repeat()的方法--%>
<%@ Control Language="VB" ClassName="WordRepeater" %>
<script runat="server"> Public Word As String Sub Repeate(ByVal intNumTimes As Integer) Dim intCounter As Integer For intCounter = 0 To intNumTimes - 1 Response.Write(Word) Next End Sub </script> |
|
<%--下面演示用自定义用户控件，重复50个Hello！--%>
<%@register TagPrefix="SuperComany" TagName="WordRepeater" Src="~/WordRepeater.ascx" %>
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub page_load() myWordRepeater.Repeate(50) End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <SuperComany:WordRepeater ID="myWordRepeater" word="Hello<p/>" runat="server" /> </div> </form> </body> </html> |
3、 显露用户控件中的Web控件
用户控件可以包含HTML和Web控件。
地址控件Address.ascx
|
<p>Street Address街道地址：</p> <br /> <asp:TextBox ID="txtStreet" runat="server" /> <p>City城市：</p> <br /> <asp:TextBox ID="txtCity" runat="server" /> <p>State州：</p> <br /> <asp:TextBox ID="txtState" runat="server" /> <p>Zip邮编：</p> <br /> <asp:TextBox ID="txtZip" runat="server" /> |
使用控件的页面文件DisplayAddress.aspx
|
<%@ register TagPrefix="SuperCompany" TagName="Address" Src="~/Address.ascx" %>
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <h2>比尔家的地址：</h2> <SuperCompany:Address ID="ctlBillingAddress" runat="server" /> <h2>邮寄地址Shipping Address：</h2> <SuperCompany:Address ID="ctlShippingAddress" runat="server" /> <p /> <asp:button Text="Submit" runat="server" /> </div> </form> </body> </html> |
注意：绝不要在用户控件内声明表单。相反，应该在包含用户控件的页面内创建一个表单。
现在，你需要一个方法在包含用户控件的页面内访问表单域的值。由于，地址表单域的TextBox控件在用户控件内，因而，不能在用户控件之外访问这些控件的属性。
要想从地址用户控件内的TextBox控件获得值，需要在用户控件中添加属性，由这些属性显露表单控件的值。
下面的自定义控件文件AddressProperties.ascx，添加了一些属性，来显露表单控件的值。
|
<%@ Control Language="VB" ClassName="AddressProperties" %>
<script runat="server"> Public Property Street() As String Get Return txtStreet.Text End Get Set(ByVal value As String) txtStreet.Text = value End Set End Property Public Property City() As String Get Return txtCity.Text End Get Set(ByVal value As String) txtCity.Text = value End Set End Property Public Property ZIP() As String Get Return txtZip.Text End Get Set(ByVal value As String) txtZip.Text = value End Set End Property </script>
<p>街道地址：</p> <br /> <asp:TextBox ID="txtStreet" runat="server" /> <p>城市：</p> <br /> <asp:TextBox ID="txtCity" runat="server" /> <p>州：</p> <br /> <asp:TextBox ID="txtState" runat="server" /> <p>邮编：</p> <br /> <asp:TextBox ID="txtZip" runat="server" /> |
在为用户控件包含的每一个控件创建代理属性之后，就可以从包含用户控件的页面访问地址信息。页面文件名称为DisplayAddressProperties.aspx
|
<%@ Page Language="VB" %> <%@ register TagPrefix="SuperCompany" TagName="Address" Src="~/AddressProperties.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) lblOutput.Text = "<h2>你输入了以下的内容：</h2>" lblOutput.Text &= "<b>Billing Address:</b>" lblOutput.Text &= "<li>街道:" & ctlBillingAddress.Street lblOutput.Text &= "<li>城市:" & ctlBillingAddress.City lblOutput.Text &= "<li>州:" & ctlBillingAddress.State lblOutput.Text &= "<li>邮编:" & ctlBillingAddress.ZIP lblOutput.Text &= "<p>" End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <h2>比尔家的地址：</h2> <SuperCompany:Address ID="ctlBillingAddress" runat="server" /> <h2>邮寄地址：</h2> <SuperCompany:Address ID="ctlShippingAddress" runat="server" /> <p /> <asp:button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" /> <p /> <asp:Label ID="lblOutput" runat="server" /> </div> </form> </body> </html> |
为用户控件内的每个TextBox控件创建代理属性，是一个冗长乏味的过程。
如果，不想为每个控件创建单独的属性，你可以创建一个代表所有控件的值的属性。
|
<%--此控件文件名AddressHashTable.ascx--%> <%@ Control Language="VB" ClassName="AddressHashTable" %>
<script runat="server"> Public ReadOnly Property Values() As Hashtable Get Dim colHashTable As New Hashtable Dim ctlControl As Control Dim txtTextBox As TextBox For Each ctlControl In Controls If TypeOf ctlControl Is TextBox Then txtTextBox = ctlControl colHashTable.Add(txtTextBox.ID, txtTextBox.Text) End If Next Return colHashTable End Get End Property </script>
<p></p>街道地址：<asp:TextBox ID="txtStreet" runat="server" /> <p></p>城市：<asp:TextBox ID="txtCity" runat="server" /> <p></p>州：<asp:TextBox ID="txtState" runat="server" /> <p></p>邮编：<asp:TextBox ID="txtZip" runat="server" /> |
上段程序，在用户控件中利用散列表HashTable内返回多个TextBox控件的值。
在Values属性的Get函数中，通过遍历所有TextBox控件，将其ID和Text加入HashTable实例中。
注意：HashTable是键、值对的集合。
下面，要想在包含用户控件的页面内获取TextBox控件值，必须从其Values属性返回的HashTable对象中读取值。
|
<%@ register TagPrefix="SuperCompany" TagName="Address" Src="~/AddressHashTable.ascx" %> <%@ Page Language="VB" %>
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) lblOutput.Text = "<h2>你输入了以下的内容：</h2>" lblOutput.Text &= "<b>Billing Address:</b>" lblOutput.Text &= "<li>街道:" & ctlBillingAddress.Values("Street") lblOutput.Text &= "<li>城市:" & ctlBillingAddress.Values("City") lblOutput.Text &= "<li>州:" & ctlBillingAddress.Values("State") lblOutput.Text &= "<li>邮编:" & ctlBillingAddress.Values("ZIP") lblOutput.Text &= "<p>" '下面显示Shipping Information lblOutput.Text &= "<b>Shipping Address:</b>" Dim objItem As Object For Each objItem In ctlShippingAddress.Values lblOutput.Text &= "<li>" & objItem.key & ": " & objItem.value Next End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <h2>比尔家的地址：</h2> <SuperCompany:Address ID="ctlBillingAddress" runat="server" /> <h2>邮寄地址：</h2> <SuperCompany:Address ID="ctlShippingAddress" runat="server" /> <p /> <asp:button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" /> <p /> <asp:Label ID="lblOutput" runat="server" /> </div> </form> </body> </html> |
4、 显露用户控件中的事件
用户控件可以【包含与一般的ASP.NET页面相同的事件处理子例程】。
例如：用户控件中的Page_Load子例程与父页面中的Page_Load子例程完全不是一回事儿。
|
<%@ Control Language="VB" ClassName="UserControlEvnet" %>
<script runat="server"> Sub page_load() Dim rannum As New Random Select Case rannum.Next(3) Case 0 lblQuote.Text = "A penny saved is a penny earned" Case 1 lblQuote.Text = "Look before you leap" Case 2 lblQuote.Text = "He who hesitates is lost" End Select End Sub </script>
<asp:Label ID="lblQuote" runat="server" /> |
|
<%@ Control Language="VB" ClassName="UserControlEvnet" %>
<script runat="server"> Sub page_load() Dim rannum As New Random Select Case rannum.Next(3) Case 0 lblQuote.Text = "A penny saved is a penny earned" Case 1 lblQuote.Text = "Look before you leap" Case 2 lblQuote.Text = "He who hesitates is lost" End Select End Sub </script>
<asp:Label ID="lblQuote" runat="server" /> |
5、 通过程序装载用户控件
如果不想【在页面中声明用户控件】，也可以在代码中以程序方式添加用户控件。
下面演示如何用代码随机装载用户控件
|
第一个用户控件产品 <%--假设每一特色产品对应一个用户控件，并且在每次显示主页时都随机显示这些控件之一。--%> <%@ Control Language="VB" ClassName="FeaturedProduct1" %>
<script runat="server"> '声明一个变量表示背景色，并且公布出去 Public BackColor As String = "lightgreen" </script> <%--一个表--%> <table width="200" cellpadding="10" cellspacing="0" bgcolor="<=%BackColor%>"> <tr> <td> <h3>Hammers on Sale!</h3> Quality hammers are now on sale in the hardware department. </td> </tr> </table> |
|
下面是第二个用户控件产品 <%@ Control Language="VB" ClassName="FeaturedProduct2" %> <%--第二个用户控件--%> <script runat="server"> Public BackColor As String = "lightgreen" </script> <table width="200" cellpadding="10" cellspacing="0" bgcolor="<%=BackColor%>"> <tr> <td> <h3>Blenders on Sale!</h3> See our selection of blenders in the home application department. </td> </tr> </table> |
|
下面的页面代码，演示如何使用用户控件 <%--下面的页面演示如何随机显示这两个特色产品之一--%> <%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub page_load() Dim strFeatured As String Dim RanNum As New Random Dim ctlControl As Control strFeatured = "FeaturedProduct" & RanNum.Next(1, 3) & ".ascx" ctlControl = LoadControl(strFeatured)
plhFeatured.Controls.Add(ctlControl) End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:PlaceHolder ID="plhFeatured" runat="server" /> </div> </form> </body> </html> |
上述代码中，使用LoadControl()方法动态地装载用户控件。它只有一个参数（用户控件的路径）
1. 指定用户控件的类型
注意：LoadControl方法有一个问题——它返回一个Control类型的对象。它并不返回用户控件的实际类型。这意味者，如果不做些额外的工作，就无法设置用LoadControl方法装载的用户控件的任何属性，也无法调用用户控件的任何方法。
在设置动态装载的用户控件的属性之前，必须将用户控件的类型转换为正确的类型。你应该注意到“用户控件程序清单”的开头都有一个指令，用来指定用户控件的ClassName。ClassName属性声明了用户控件的类型。
下面的页面代码演示如何将动态装载的用户控件转换为正确的类型，并且设置它的属性。
|
<%@ Page Language="VB" %> <%--此页面演示如何将动态装载的用户控件转换为正确的类型，并且设置它的属性--%> <%@ register TagPrefix="SuperCompany" TagName="FeaturedProduct1" Src="~/featuredProduct1.ascx" %> <%@ register TagPrefix="SuperCompany" TagName="FeaturedProduct2" Src="~/featuredProduct2.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub page_load() Dim strFeatured As String Dim RanNum As New Random Dim ctlControl As Control
Select Case RanNum.Next(1, 3) Case 1 ctlControl = LoadControl("FeaturedProduct1.ascx") CType(ctlControl, FeaturedProduct1).BackColor = "Yellow" Case 2 ctlControl = LoadControl("FeaturedProduct2.ascx") CType(ctlControl, FeaturedProduct2).BackColor = "Yellow" End Select plhFeatured.Controls.Add(ctlControl) End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:PlaceHolder ID="plhFeatured" runat="server" /> </div> </form> </body> </html> |
Ctype()函数，可以把对象转换为合适的类型。要注意的是，你必须在带有寄存器指令的页面中注册要使用的用户控件。
上述代码中，就包含两个寄存器指令：
<%@ register TagPrefix="SuperCompany" TagName="FeaturedProduct1" Src="~/featuredProduct1.ascx" %>
<%@ register TagPrefix="SuperCompany" TagName="FeaturedProduct2" Src="~/featuredProduct2.ascx" %>
如果，忘记了注册用户控件，那么在将用户控件转换为特定类型时，将收到错误信息“Type is not defined”。
2. Code-Behind和用户控件
如果不想：“一一注册可能在页面上使用的每个用户控件”，可以“从一个类派生多个用户控件”。
例如：可以创建一个具有BackColor属性的FeaturedProduct类，然后，从这个类派生所有的FeaturedProduct用户控件。
这么做之后，就可以通过将用户控件转换为FeaturedProduct类的实例，来设置任何子类产品的BackColor属性。
下面的代码演示此种Code-Behide方式。
首先，创建FeaturedProduct类，他是特色产品用户控件的基类。
|
Imports Microsoft.VisualBasic Imports System Imports System.Web.UI Imports System.Web.UI.WebControls
Public Class FeaturedProduct Inherits UserControl
Public BackColor As String = "lightgreen"
End Class |
第二步，建立两个特殊产品用户控件
|
<%@ inherits="FeaturedProduct" %> <table width="200" cellpadding="10" cellspacing="0" bgcolor="<%=BackColor %>">
<tr> <td> <h2>Hammers on Sale!</h2> Quality hammers are now on sale in the hardware department. </td> </tr> </table> |
|
<%@ Inherits="FeaturedProduct" %> <table width="200" cellpadding="10" cellspacing="0" bgColor="<%=BackColor %>"> <tr> <td><h1>Blenders on Sale!</h1> See our selction of blenders in the home application department. </td> </tr> </table> |
最后，列出使用用户控件的页面文件代码
|
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Sub page_load() Dim strFeatured As String Dim ranNum As New Random Dim ctl As Control strFeatured = "Featured" & ranNum.Next(1, 3) & ".ascx" ctl = LoadControl(strFeatured) CType(ctl, FeaturedProduct).BackColor = "Orange" plhFeatured.Controls.Add(ctl) End Sub </script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:PlaceHolder ID="plhFeatured" runat="server" /> </div> </form> </body> </html> |
