扩展 ASP.NET Repeater 以增加布局控制

• 下载演示项目 - 17 Kb

引言

本文介绍如何利用 ASP.NET Repeater 控件的优势，同时能够在 Visual Studio 的 WYSIWYG 编辑器中设计项目模板；而不是手动编写 HTML。

背景

与许多其他 ASP.NET 开发人员一样，我发现了 Repeater 控件的优点，现在它是我最喜欢的控件之一。我唯一不喜欢它的是，您必须手动编辑 HTML 才能定义 Repeater 中每个项目的外观。我希望能够以图形方式在 Visual Studio 的 WebForm 设计器中设计项目的布局。我还希望能够为控件中的每个项目执行其他服务器端逻辑，以执行其他数据库查找等操作。

工作原理

诀窍是创建一个 Web 用户控件，并在绑定每个项目时绑定来自 Repeater 的数据源的数据。Visual Studio 允许您在其 WYSIWYG 编辑器中直观地设计您的 Web 用户控件。我不会在这里详细介绍构建 Web 用户控件的细节，但它们非常简单。

在此示例中，数据源是一个短的 CD 列表；每个 CD 都有标题、艺术家和国家/地区（以及其他内容）。我通过读取本地 XML 文件来生成此数据源（我不会在本文中详细介绍此过程，因为它非常简单）。我希望每个 CD 的信息都以单条记录的垂直格式显示，如下所示：

为了增加效果，我想利用 Repeater 的 AlternatingItem 功能，并以黄色背景显示每隔一个 CD，如上所示。（丑陋，是的，但这只是一个例子！）

我做的第一件事是使用 Visual Studio 的编辑器创建一个名为 CDInfoControl 的 Web 用户控件。在此控件中，我为每个属性创建表格布局、标签和文本字段：标题、艺术家、国家/地区等。请参阅示例项目以了解详细信息，但生成的 HTML 如下所示：

<%@ Control Language="vb" AutoEventWireup="false" 
             Codebehind="CDInfoControl.ascx.vb" 
             Inherits="WebApplication4.CDInfoControl" %>

   <asp:Panel id="pnlMain" runat="server">
      <TABLE id="Table5" 
        style="FONT-SIZE: x-small; FONT-FAMILY: Tahoma" borderColor="#000000"
        cellSpacing="0" cellPadding="1" border="1">
         <TR>
            <TD bgColor="lightblue"><STRONG>
              <FONT style="BACKGROUND-COLOR: lightblue">Title:</FONT></STRONG>
            </TD>
            <TD><asp:Label id="lblTitle" runat="server"></asp:Label></TD>
         </TR>
         <TR>
            <TD bgColor="lightblue"><STRONG>
              <FONT style="BACKGROUND-COLOR: lightblue">Artist:</FONT></STRONG><
            /TD>
            <TD><asp:Label id="lblArtist" 
              runat="server"></asp:Label></TD>
         </TR>
         <TR>
            <TD bgColor="#add8e6"><STRONG>Country:</STRONG>
            </TD>
            <TD><asp:Label id="lblCountry" runat="server"></asp:Label></TD>
         </TR>
         <TR>
            <TD bgColor="#add8e6">
              <STRONG>Currency:</STRONG></TD>
            <TD><asp:Label id="lblCurrency" 
              runat="server"></asp:Label></TD>
         </TR>
    </TABLE>
  </asp:Panel>

设计视图如下所示：

接下来，我编辑主页的 HTML，以在 Repeater 中包含我的用户控件。这是我唯一需要手动编辑 Repeater 的 HTML 的时候。结果如下所示：

<asp:repeater id="Repeater1" runat="server">
   <HeaderTemplate>
      <table width="100%" style="font: 8pt verdana" ID="Table5">
   </HeaderTemplate>
   <ItemTemplate>
      <tr>
         <td>
            <uc1:CDInfoControl id="CDInfo" runat="server"></uc1:CDInfoControl>
         </td>
      </tr>
   </ItemTemplate>                
   <FooterTemplate>
      </table>
   </FooterTemplate>
</asp:repeater>

请注意，我创建了一个名为 CDInfo 的 CDInfoControl 实例，并将其放置在 Repeater 中。我还必须进行 .NET 连接才能定义控件，如您在示例应用程序中所见。我作弊了一下，将控件拖到我的表单上，然后编辑 HTML 源代码以将控件移动到我的 Repeater 中。这样，Visual Studio 就可以为我处理连接！

下一步是处理 Repeater 的 ItemDataBound 事件以将数据发送到我的控件。ASP.NET 为数据源中的每个记录创建一个新的控件实例，因此我只需将参数强制转换为 DataRowView 并调用我的控件的 Public Sub (接下来会解释)。

Private Sub Repeater1_ItemDataBound(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) _
   Handles Repeater1.ItemDataBound
        If (e.Item.ItemType = ListItemType.Item) Then
            CType(e.Item.FindControl("CDInfo"), _
               CDInfoControl).SetData(CType(e.Item.DataItem, _
               DataRowView), False)
        End If

        If (e.Item.ItemType = ListItemType.AlternatingItem) Then
            CType(e.Item.FindControl("CDInfo"), _
               CDInfoControl).SetData(CType(e.Item.DataItem, _
               DataRowView), True)
        End If
End Sub

最后，我需要在我的控件中处理此数据绑定，因此我创建一个名为 SetData 的 Public Sub，它接受 DataRowView 和一个标志，指示这是否是 AlternatingItem。我在此 Sub 中所做的只是填充我的控件的标签和字段。

Public Sub SetData(ByVal dr As DataRowView, _
               ByVal IsAlternating As Boolean)
        Me.lblTitle.Text = dr("title")
        Me.lblArtist.Text = dr("artist")
        Me.lblCountry.Text = dr("country")
        Me.lblCurrency.Text = GetCurrency(dr("country"))

        If IsAlternating Then
            pnlMain.BackColor = Color.LightGoldenrodYellow
        End If
End Sub

请注意，我不必仅依赖于 Repeater 中的数据。在此示例中，我从控件中的私有函数获取货币。这可能会触发数据库查找、其他逻辑等。这确实使 Repeater 控件非常强大。

关注点

我没有详细介绍示例的每个细节，但是很容易理解。我想表达的重点是结合使用 Web 用户控件和 Repeater 以获得最大收益。