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

类别:.NET开发 点击:0 评论:0 推荐:

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

 

开发windows web GUI程序的时候,我们大量的使用数据绑定控件。幸运的是windows formsweb forms都提供丰富的数据绑定控件共我们使用,用他们可以编写十分丰富的数据驱动的程序。

数据绑定控件不仅用来显示数据,它还可以通过对数据绑定控件的布局特性来显示不同的布局。在服务器端的数据绑定控件中,templates(模板)用来定制我们自己需要的数据显示的格式和布局。

 

Introduction

 

Templates在定制ASP.NET数据绑定控件的格式和布局方面扮演了一个主要的角色。在我们使用这些Templates之前,先让我们对这些基本的Templates和怎样使用作一下快速的预览。

Templates提供了一条通过使用header, footeritems等控件标记来完成复杂的数据格式化。Template是一系列HTML标记集,它定义了控件特定的部分的样式。在HTML标记里面,一个模板也可以包含其他控件和ASP.NET inline code.

OK,为了我们更好的理解,让我们看一个使用Templates的简单例子。代码已经列出在List1中。这个例子使用Repeater控件,它使用了AlternatingTemplateItemTempate两个Templates。我们将在接下来的部分进一步讨论不同的Templates的使用。在AlternatingTemplate,我们设置了font color = red, face = verdana and size = 3,在ItemTempate中,我们设置了color = green, face = Tahoma, and size = 2。并且使用了HTMLtable标记。从上面的设置可以看得出来,这个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标记和格式化的代码。举例子来说,如果你想添加templatesDataList中去,首先你得知道有哪些templates是可以使用的。DataList支持header, footer, item, alternating item, selected item, edit item templates.

下面我们来看看仅使用header, item, alternating item footer templates的例子。代码在List2中列出。DatalistRepeateColumns属性定义了可以显示的行数。

 

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表中的数据。

 

 

本文地址:http://com.8s8s.com/it/it45721.htm