模板列 - 与雪共舞

模板列

      最近几天温习了一些ASP。NET，其中看到了有关模板列的知识。
       我尝试在Repeater里使用模板，大概思路是
       1。绑定数据源
       2。在HTML界面设定模板列

<asp:repeater id="Repeater1" runat="server">

<th>

Name

</th>

</tr>

</HeaderTemplate>

<tr>

</td>

</tr>

</ItemTemplate>

</table>

</FooterTemplate>

</asp:repeater>

下面是MSDN里关于模板列的介绍

并非所有 Web 服务器控件都支持模板。在大多数情况下，复杂的控件支持模板。在 Visual Studio 中，这将包括 DataGrid、DataList 和 Repeater Web 服务器控件。（实际上，Repeater 和 DataList 控件不仅支持模板，还需要您创建模板来定义其输出。）您从其他来源获取的控件也可以支持模板。

每一控件支持的一组模板略有不同，这些模板指定控件的不同部分的布局，例如标题、脚注、项和所选项。您可以为上述任一或全部对象指定模板，具体情况取决于您要自定义哪一对象。在 DataGrid 控件中，您可以指定列（而非行）。

下表概述了支持模板的 Web 服务器控件：

控件	模板
Repeater	HeaderTemplate FooterTemplate ItemTemplate AlternatingItemTemplate SeparatorTemplate
DataList	HeaderTemplate FooterTemplate ItemTemplate AlternatingItemTemplate SeparatorTemplate SelectedItemTemplate EditItemTemplate
DataGrid	HeaderTemplate FooterTemplate ItemTemplate (column) EditItemTemplate (column) Pager

向 Web 窗体页添加 Repeater Web 服务器控件

1.向 Web 窗体页添加一个数据源。有多种方法可处理页上的数据。若要选择适当的方法，请参见 ADO.NET 数据访问介绍和对 Web 窗体页中数据访问的介绍。

2.在“设计”视图中，从“工具箱”的“Web 窗体”选项卡将 Repeater 控件拖到页面上。

3.设置控件的 DataSource 属性。在“属性”窗口中，DataSource 属性的下拉菜单中将显示所有数据源，例如在页上定义的 DataSet 和 DataView 控件。

4.调用控件的 DataBind 方法。通常使用如下所示代码在该页的 Page_Load 事件中完成此操作，此处 Repeater1 控件绑定到 DataSet 对象。由于 DataSet 已在设计器中绑定到 Repeater 控件，所以它不需要在该代码中进行绑定：
' Visual Basic
Protected Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
' Put user code to initialize the page, including data, here.
Repeater1.DataBind()
End Sub

// C#
protected void Page_Load(object sender, EventArgs e)
{
   // Put user code to initialize the page, including data, here.
   Repeater1.DataBind();
}
5.切换到“HTML”视图。
6.在 Repeater 元素内创建包含 HTML 文本和控件的模板，以显示数据。有关详细信息，请参见 Web 服务器控件模板。有关 ItemTemplate 元素的主干可能会如下所示：
<asp:repeater id=Repeater1 runat="server" datasource="<%# dataView1 >">
   <ItemTemplate>
   </ItemTemplate>
</asp:repeater>
7.向模板添加 HTML 元素和 Web 服务器控件的任意组合以显示数据源信息。
必须通过包括一个数据绑定表达式将控件绑定到数据。通常，将它们绑定到容器控件。显示数据源中每行的“EmployeeName”和“PhoneNumber”字段的 ItemTemplate 元素将类似如下所示：
<ItemTemplate>
   <%# DataBinder.Eval(Container, "DataItem.EmployeeName") %>
   <%# DataBinder.Eval(Container, "DataItem.PhoneNumber") %>
   <br>
</ItemTemplate>
有关详细信息，请参见 Web 窗体页中的数据访问。
下面的示例说明一个完整的 Repeater 控件定义在“HTML”视图中应类似于什么样子。指定将 Repeater 控件呈现为表。<table> 元素在 HeaderTemplate 中开始并在 FooterTemplate 中结束。（“任务列表”将报告有关这种情况的错误，但是这些错误可以安全地忽略，在运行应用程序时，该表将正确地显示。）在 Repeater 控件体内，表单元格用于显示数据源的列。除了表单元格的背景色不同以创建带状效果外，AlternatingItemTemplate 元素与 ItemTemplate 项相同。
<asp:Repeater id=Repeater1 runat="server" DataSource="<%# DataView1%>">
   <HeaderTemplate>
      <table width="100%" style="font: 8pt verdana">
      <tr style="background-color:DFA894">
         <th> First Name </th>
         <th> Last Name </th>
      </tr>
   </HeaderTemplate>
   <ItemTemplate>
      <tr>
         <td><%# DataBinder.Eval(Container, "DataItem.EmployeeName") %>
         </td>
         <td><%# DataBinder.Eval(Container,"DataItem.PhoneNumber") %>
         </td>
      </tr>
   </ItemTemplate>
   <AlternatingItemTemplate>
      <tr>
         <td bgcolor="lightblue">
         <%# DataBinder.Eval(Container, "DataItem.EmployeeName") %> </td>
         <td bgcolor="lightblue">
         <%# DataBinder.Eval(Container,"DataItem.PhoneNumber") %> </td>
      </tr>
   </AlternatingItemTemplate>
   <FooterTemplate> </table> </FooterTemplate>
</asp:Repeater>
下面的示例使用标签 (Label) 控件显示数据库的值。使用分隔符模板创建列表中值之间的分隔符。请注意，Label 控件的 Text 属性的值包含在单引号中。属性值通常放在双引号中，但是由于 DataBinder 调用包含双引号，所以 Text 属性值必须括在单引号中。
<asp:Repeater id="Repeater1" runat="server" DataSource="<%# DataView1%>">
   <ItemTemplate>
      <asp:Label id=Label1 runat="server"
         Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'>
      </asp:Label>
   </ItemTemplate>
   <SeparatorTemplate>,</SeparatorTemplate>
</asp:Repeater>

向 DataGrid 添加模板列

向该页添加 DataGrid。有关更多信息，请参见向 Web 窗体页添加 DataGrid Web 服务器控件。
在“设计”视图中，选择 DataGrid 控件，然后单击“属性”窗口底部的“属性生成器”链接。
在“DataGrid 属性”对话框中，在“常规”选项卡上选择“数据源”和“数据成员”。
在 Web 应用程序中处理数据有好几种方法。若要选择适当的方法，请参见 ADO.NET 数据访问介绍和对 Web 窗体页中数据访问的介绍。如果已经在设计器中使用 DataSet 或 DataView 控件创建了数据源，将能够从 DataSource 属性的下拉列表中选取数据控件。
切换到“列”选项卡。
在“可用列”框中，选择“模板列”并单击“添加”按钮 ()。单击“确定”关闭“DataGrid 属性”对话框。
在设计器中，右击该 DataGrid 控件，指向“编辑模板”，然后选择所创建的模板列。
可以编辑四个模板：标头、脚注、项和编辑项。根据需要将控件添加到模板。
若要退出编辑模式，请右击该 DataGrid 控件，然后从菜单中选择“结束模板编辑”。
添加代码以响应来自模板列中按钮的任何按钮单击事件。有关响应模板中按钮事件的信息，请参见响应 DataList、Repeater 或 DataGrid 项中的按钮事件。

创建模板

Web 窗体设计器包括允许您以所见即所得的方式来显示模板的工具。打开特殊模板编辑模式，在“设计”视图中显示控件的模板。您可以键入 HTML 并将控件从文本框直接拖动到正在编辑的模板中。

您还可以在 .aspx 文件中直接创建模板。模板创建为 XML 声明。以下示例显示了如何使用 DataList Web 服务器控件中的模板来显示雇员名、电话号码和电子邮件地址的列表。雇员信息的布局使用数据绑定的控件的 ItemTemplate 指定。

<asp:datalist ID="DataList1" runat="server">
   <HeaderTemplate>
      Employee List
   </HeaderTemplate>
   <ItemTemplate>
      <asp:label id=Label1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")
         %>'></asp:label>
      <asp:label id=Label2 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")
         %>'></asp:label>
      <asp:Hyperlink id=Hyperlink1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
         NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
      </asp:Hyperlink>
   </ItemTemplate>
</asp:datalist>

posted on 2006-01-04 17:00 与雪共舞阅读(781) 评论(0) 收藏举报