Web服务器端控件的模板编程
Web服务器端控件的模板编程
开发windows 和web GUI程序的时候，我们大量的使用数据绑定控件。幸运的是windows forms和web forms都提供丰富的数据绑定控件共我们使用，用他们可以编写十分丰富的数据驱动的程序。
数据绑定控件不仅用来显示数据，它还可以通过对数据绑定控件的布局特性来显示不同的布局。在服务器端的数据绑定控件中，templates（模板）用来定制我们自己需要的数据显示的格式和布局。
Introduction
Templates在定制ASP.NET数据绑定控件的格式和布局方面扮演了一个主要的角色。在我们使用这些Templates之前，先让我们对这些基本的Templates和怎样使用作一下快速的预览。
Templates提供了一条通过使用header, footer和items等控件标记来完成复杂的数据格式化。Template是一系列HTML标记集，它定义了控件特定的部分的样式。在HTML标记里面，一个模板也可以包含其他控件和ASP.NET inline code.
OK，为了我们更好的理解，让我们看一个使用Templates的简单例子。代码已经列出在List1中。这个例子使用Repeater控件，它使用了AlternatingTemplate和ItemTempate两个Templates。我们将在接下来的部分进一步讨论不同的Templates的使用。在AlternatingTemplate，我们设置了font color = red, face = verdana and size = 3，在ItemTempate中，我们设置了color = green, face = Tahoma, and size = 2。并且使用了HTML的table标记。从上面的设置可以看得出来，这个repeater控件的行和交替行将显示怎么样的字。
Listing 1. Applying a simple template on a Repeater control
<ASP:Repeater id="repeaterControl" runat="server">
<AlternatingItemTemplate>
<font color="red" face = "verdana" size = 3>
<table>
<tr>
alternating data
</tr>
</table>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font color="green" face = "tahoma" size = 2>
<table>
<tr>
some item
</tr>
</table>
</font>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</ASP:Repeater></P>
模板类型（Template Types）
template描述了控件的每一部分的布局和样式。就像其他的控件标记一样，template的每一对标记也有开始和关闭的标记。在例子中，HeaderTemplate描述了控件的表头的样式和布局。<HeaderTemplate></HeaderTemplate>代表了控件的表头。下表列出了各种各样的templates。
Table 1. ASP.NET Templates
Template
Description
HeaderTemplate
描述控件表头的布局和样式。
FooterTemplate
描述了控件的表尾的布局和样式。
ItemTemplate
描述了控件的每一项的布局和样式。
AlternatingItemTemplate
描述了控件的交替项的布局和样式。
SeparatorTemplate
描述了每两项之间的分隔样式和布局。
SelectedItemTemplate
描述了选中项的样式和布局。
EditItemTemplate
有些控件支持编辑功能。他描述了正在被编辑的项的样式和布局。
Pager template
DataGrid控件的页面布局和样式。
Which Controls Support Templates?
Templates 并不是被ASP.NET 所有的数据绑定控件支持，它只是被那些复杂的控件所支持。特别需要指出的是，不同的控件支持不同集合的Templates及其特性。
例如：
Repeater控件支持HeaderTemplate, FooterTemplate, ItemTemplate, AlternatingItemTemplate, SeperatorTemplate.
DataList控件支持HeaderTemplate, FooterTemplate, ItemTemplate, AlternatingItemTemplate, SeparatorTemplate, SelectedItemTemplate, and EditItemTemplate.
DataGrid控件支持HeaderTemplate, FooterTemplate, ItemTemplate, EditItemTemplate, and Pager.
Creating Templates
你可以再aspx页面的代码中通过使用templates标记来直接编写templates代码。
在Listing 1中，我们可以看到能够轻松的添加templates标记和格式化的代码。举例子来说，如果你想添加templates到DataList中去，首先你得知道有哪些templates是可以使用的。DataList支持header, footer, item, alternating item, selected item, edit item templates.
下面我们来看看仅使用header, item, alternating item 和footer templates的例子。代码在List2中列出。Datalist的RepeateColumns属性定义了可以显示的行数。
Listing 2. Adding templates to a DataList control
<ASP:DataList
id="dtList"
RepeatColumns="5"
RepeatDirection="Horizontal"
runat="server">
<HeaderTemplate>
</HeaderTemplate>
<AlternatingItemTemplate>
</AlternatingItemTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</ASP: DataList >
上面的代码运行的结果是什么都没有，Datalist控件每一部分的具体内容的格式化代码需要我们添加上去。Listing3 是上面一个例子的扩展，在这里面我们添加了具体的格式化的HTML标记和代码。
Listing 3. Adding templates format of a DataList control
<HeaderTemplate>
<font color = #cc3333 face ="verdana" size = 3>
<b>DataList Control Header</b>
</font>
</HeaderTemplate>
<AlternatingItemTemplate>
<font face ="verdana" size = 2 color ="green" >
<br>
<b>Category ID: </b>
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
<br>
<b>Category Name: </b>
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
<br>
<b>Description: </b>
<%# DataBinder.Eval(Container.DataItem, "Description") %>
<br>
<b>Picture: </b>
<%# DataBinder.Eval(Container.DataItem, "Picture") %>
<p>
</div>
</font>
</AlternatingItemTemplate>
<ItemTemplate>
<font face ="verdana" size = 2>
<br>
<b>Category ID: </b>
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
<br>
<b>Category Name: </b>
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
<br>
<b>Description: </b>
<%# DataBinder.Eval(Container.DataItem, "Description") %>
<br>
<b>Picture: </b>
<%# DataBinder.Eval(Container.DataItem, "Picture") %>
<p>
</div>
</font>
</ItemTemplate>
<FooterTemplate>
<font color= #996600 face ="verdana" size = 1>
DataList Control footer
</font>
</FooterTemplate>
Templates in Action
OK, 下面我们来使用DataList的数据来填充这些templates。代码在Listing4中列出。
我们使用了一个方法FillData，这个方法用来将Northwind 数据库的数据绑定到Datalist控件。
Listing 4.
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<HTML>
<BODY>
<font color="#006699" size="4" face="verdana">
DataList Server Control Sample </font>
<script language="VB" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
fillData()
End SUb
sub fillData()
Dim conn As SqlConnection
Dim adapter As SqlDataAdapter
dim connectionString = _
"Data Source=MCB;Initial Catalog=Northwind;user id=sa;password=;"
conn = new SqlConnection(connectionString)
conn.Open()
dim sql = "SELECT * FROM Categories"
adapter = new SqlDataAdapter(sql, conn)
Dim ds As Dataset = new DataSet()
adapter.Fill(ds)
dtList.DataSource = ds
dtList.DataBind()
end sub
</script>
<P>
<ASP:DataList id="dtList" RepeatColumns="5"
RepeatDirection="vertical" runat="server">
<HeaderTemplate>
<FONT face="verdana" color="#cc3333" size="3">
<B>DataList Control Header</B> </FONT>
</HeaderTemplate>
<FooterTemplate>
<FONT face="verdana" color="#996600" size="1">
DataList Control footer </FONT>
</FooterTemplate>
<ItemTemplate>
<FONT face="verdana" size="2">
<BR>
<B>Category ID: </B>
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
<BR>
<B>Category Name: </B>
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
<BR>
<B>Description: </B>
<%# DataBinder.Eval(Container.DataItem, "Description") %>
<BR>
<B>Picture: </B>
<%# DataBinder.Eval(Container.DataItem, "Picture") %>
<P>
</FONT>
</ItemTemplate>
<AlternatingItemTemplate>
<FONT face="verdana" color="green" size="2">
<BR>
<B>Category ID: </B>
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
<BR>
<B>Category Name: </B>
<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
<BR>
<B>Description: </B>
<%# DataBinder.Eval(Container.DataItem, "Description") %>
<BR>
<B>Picture: </B>
<%# DataBinder.Eval(Container.DataItem, "Picture") %>
<P>
<DIV></DIV>
</FONT>
</AlternatingItemTemplate>
</ASP:DataList>
</P>
</BODY>
</HTML>
最后运行的结果如下图所示，读取的数据为Categories表中的数据。
