** 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

 1<asp:repeater id="repeaterControl" runat="server">
 2<alternatingitemtemplate>
 3<font color="red" face="verdana" size="3">
 4<table>
 5<tr>   
 6alternating data   
 7</tr>
 8</table>
 9</font>
10</alternatingitemtemplate>
11<itemtemplate>
12<font color="green" face="tahoma" size="2">
13<table>
14<tr>   
15some item   
16</tr>
17</table>
18</font>
19</itemtemplate>
20<footertemplate>
21</footertemplate>
22</asp:repeater>

** 模板类型（ ** ** Template Types ** ** ） ** ** **

template 描述了控件的每一部分的布局和样式。就像其他的控件标记一样， template 的每一对标记也有开始和关闭的标记。在例子中， HeaderTemplate 描述了控件的表头的样式和布局。 _

1<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

 1<asp:datalist id="dtList" repeatcolumns="5" repeatdirection="Horizontal" runat="server">
 2<headertemplate>
 3</headertemplate>
 4<alternatingitemtemplate>
 5</alternatingitemtemplate>
 6<itemtemplate>
 7</itemtemplate>
 8<footertemplate>
 9</footertemplate>
10 ****  
11  
12---  
13  
14上面的代码运行的结果是什么都没有，  Datalist  控件每一部分的具体内容的格式化代码需要我们添加上去。  Listing3  是上面一个例子的扩展，在这里面我们添加了具体的格式化的  HTML  标记和代码。 
15
16Listing 3. Adding templates format of a DataList control 
17
18<headertemplate>
19<font color="#cc3333" face="verdana" size="3">
20<b>DataList Control Header</b>
21</font>
22</headertemplate>
23<alternatingitemtemplate>
24<font color="green" face="verdana" size="2">
25<br/>
26<b>Category ID: </b>

DataBinder.Eval(Container.DataItem, "CategoryID")

1<br/>
2<b>Category Name: </b>

DataBinder.Eval(Container.DataItem, "CategoryName")

1<br/>
2<b>Description: </b>

DataBinder.Eval(Container.DataItem, "Description")

1<br/>
2<b>Picture: </b>

DataBinder.Eval(Container.DataItem, "Picture")

1<p>
2
3</p></font>
4</alternatingitemtemplate>
5<itemtemplate>
6<font face="verdana" size="2">
7<br/>
8<b>Category ID: </b>

DataBinder.Eval(Container.DataItem, "CategoryID")

1<br/>
2<b>Category Name: </b>

DataBinder.Eval(Container.DataItem, "CategoryName")

1<br/>
2<b>Description: </b>

DataBinder.Eval(Container.DataItem, "Description")

1<br/>
2<b>Picture: </b>

DataBinder.Eval(Container.DataItem, "Picture")

 1<p>
 2
 3</p></font>
 4</itemtemplate>
 5<footertemplate>
 6<font color="#996600" face="verdana" size="1">   
 7DataList Control footer   
 8</font>
 9</footertemplate>  
10  
11---  
12  
13** Templates in Action  ** ** **
14
15OK,  下面我们来使用  DataList  的数据来填充这些  templates  。代码在  Listing4  中列出。 
16
17我们使用了一个方法  FillData  ，这个方法用来将  Northwind  数据库的数据绑定到  Datalist  控件。 
18
19Listing 4.

@ Import Namespace="System.Data"

@ Import Namespace="System.Data.SqlClient"

 1<html>
 2<body>
 3<font color="#006699" face="verdana" size="4">   
 4DataList Server Control Sample </font>
 5<script language="VB" runat="server">   
 6Sub Page_Load(sender As Object, e As EventArgs)   
 7fillData()   
 8End SUb   
 9  
10sub fillData()   
11Dim conn As SqlConnection   
12Dim adapter As SqlDataAdapter   
13dim connectionString = _   
14"Data Source=MCB;Initial Catalog=Northwind;user id=sa;password=;"   
15conn = new SqlConnection(connectionString)   
16conn.Open()   
17dim sql = "SELECT * FROM Categories"   
18adapter = new SqlDataAdapter(sql, conn)   
19Dim ds As Dataset = new DataSet()   
20adapter.Fill(ds)   
21dtList.DataSource = ds   
22dtList.DataBind()   
23end sub   
24  
25</script>
26<p>
27<asp:datalist id="dtList" repeatcolumns="5" repeatdirection="vertical" runat="server">
28<headertemplate>
29<font color="#cc3333" face="verdana" size="3">
30<b>DataList Control Header</b> </font>
31</headertemplate>
32<footertemplate>
33<font color="#996600" face="verdana" size="1">   
34DataList Control footer </font>
35</footertemplate>
36<itemtemplate>
37<font face="verdana" size="2">
38<br/>
39<b>Category ID: </b>

DataBinder.Eval(Container.DataItem, "CategoryID")

1<br/>
2<b>Category Name: </b>

DataBinder.Eval(Container.DataItem, "CategoryName")

1<br/>
2<b>Description: </b>

DataBinder.Eval(Container.DataItem, "Description")

1<br/>
2<b>Picture: </b>

DataBinder.Eval(Container.DataItem, "Picture")

1<p>
2</p></font>
3</itemtemplate>
4<alternatingitemtemplate>
5<font color="green" face="verdana" size="2">
6<br/>
7<b>Category ID: </b>

DataBinder.Eval(Container.DataItem, "CategoryID")

1<br/>
2<b>Category Name: </b>

DataBinder.Eval(Container.DataItem, "CategoryName")

1<br/>
2<b>Description: </b>

DataBinder.Eval(Container.DataItem, "Description")

1<br/>
2<b>Picture: </b>

DataBinder.Eval(Container.DataItem, "Picture")

 1<p>
 2<div></div>
 3</p></font>
 4</alternatingitemtemplate>
 5</asp:datalist>
 6</p>
 7</body>
 8</html>  
 9  
10---  
11  
12最后运行的结果如下图所示，读取的数据为  Categories  表中的数据。 
13
14![](http://www.c-sharpcorner.com/Code/2002/July/TEmpla1.jpg)</asp:datalist>

Web服务器端控件的模板编程

DataBinder.Eval(Container.DataItem, "CategoryID")

DataBinder.Eval(Container.DataItem, "CategoryName")

DataBinder.Eval(Container.DataItem, "Description")

DataBinder.Eval(Container.DataItem, "Picture")

DataBinder.Eval(Container.DataItem, "CategoryID")

DataBinder.Eval(Container.DataItem, "CategoryName")

DataBinder.Eval(Container.DataItem, "Description")

DataBinder.Eval(Container.DataItem, "Picture")

DataBinder.Eval(Container.DataItem, "CategoryID")

DataBinder.Eval(Container.DataItem, "CategoryName")

DataBinder.Eval(Container.DataItem, "Description")

DataBinder.Eval(Container.DataItem, "Picture")

DataBinder.Eval(Container.DataItem, "CategoryID")

DataBinder.Eval(Container.DataItem, "CategoryName")

DataBinder.Eval(Container.DataItem, "Description")

DataBinder.Eval(Container.DataItem, "Picture")