如何在ASP.Net Repeater中创建三列表

时间:2010-08-09 18:17:56

标签: asp.net html-table repeater

我希望能够使用ASP.Net Repeater控件创建一个HTML表,该表包含三列和与necc一样多的行。

例如,如果数据看起来像这样

“菲尔休斯”

“Andy Petite”

“CC Sabathia”

“AJ Burnett”

“Javier Vazquez”

我希望结果表格像

<table>
 <tr>
  <td>Phil Hughes</td>
  <td>Andy Petite</td>
  <td>CC Sabathia</td>
 </tr>
 <tr>
  <td>AJ Burnett</td>
  <td>Javier Vazquez</td>
  <td></td>
 </tr>
</table>

我该怎么做?

6 个答案:

答案 0 :(得分:20)

中继器不是理想的控制器。如果您使用的是.NET 3.5,则应使用ListView代替。这是一个可以满足你要求的例子。

<asp:ListView ID="myListView" runat="server" 
   DataSourceID="YOURDATASOURCE" GroupItemCount="3">

   <LayoutTemplate>
      <table>
         <tr>
            <td>
               <table border="0" cellpadding="5">
                  <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
               </table>
            </td>
         </tr>
      </table>
   </LayoutTemplate>

   <GroupTemplate>
      <tr>
         <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
      </tr>
   </GroupTemplate>

   <ItemTemplate>
      <td>
         <%# Eval("FullName") %>
      </td>
   </ItemTemplate>
</asp:ListView>

答案 1 :(得分:15)

最好使用DataList控件,因为它具有有趣的属性RepeatColumnsRepeatDirection

答案 2 :(得分:10)

比这里列出的所有例子都简单得多;您不需要使用列表视图或在后面的代码中执行任何操作。

  <asp:Repeater ID="ExampleRepeater" runat="server" >
    <HeaderTemplate>
        <table>
            <tr>
                <th>   Column 1
                </th>
                <th>   Column 2
                </th>
                <th>   Column 3
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:LinkButton ID="RemoveButton" runat="server" Text='Remove' CommandName="Remove"
                    CommandArgument='<%# Eval("ID") %>' CausesValidation="false"></asp:LinkButton>
            </td>
            <td>

                <asp:LinkButton ID="EditLink" runat="server" Text='<%# Eval("Name")  %>'
                    CommandName="Edit" CommandArgument='<%# Eval("ID") %>' CausesValidation="false"></asp:LinkButton>

            </td>
            <td>
                <asp:Label ID="CommentTextBox" runat="server" Text='<%# Eval("Comment")  %>' />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

答案 3 :(得分:7)

<asp:Repeater runat="server" DataSourceID="testds">
   <HeaderTemplate>
       <table class="items">
   </HeaderTemplate>
   <ItemTemplate>
       <%# (Container.ItemIndex + 3) % 3 == 0 ? "<tr>" : string.Empty%>
           <td><img src='/blablabla/<%# Eval("id") %>.jpg' alt="" /></td>
       <%# (Container.ItemIndex + 3) % 3 == 2 ? "</tr>" : string.Empty%>
   </ItemTemplate>
   <FooterTemplate>
       </table>
   </FooterTemplate>
</asp:Repeater>

答案 4 :(得分:0)

我假设您在5行数据中拥有所有这些名称,并且您希望将其分布在转发器中的3列中,而不是2行数据,其中3个字段是直接的。基于我的假设,您的数据类似于:

DataTable(或您的来源):

ID      Name
---------------
1       Bob
2       John
3       Joe
4       Mary
5       Mike

您可以使用RepeaterLiteralOnDataBinding的{​​{1}}事件中使用一点点逻辑来执行此操作。

首先定义您的Literal

Repeater

接下来,您需要一个常量来表示所需的总列数和两个全局变量来跟踪绑定操作。像这样定义它们:

<asp:Repeater ID="repeater" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Literal ID="litItem" runat="server" OnDataBinding="litItem_DataBinding" />
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

然后,您需要实现OnDataBinding来完成所有自定义工作:

public partial class _YourPage : System.Web.UI.Page
{
    private const int _repeaterTotalColumns = 3;
    private int _repeaterCount = 0;
    private int _repeaterTotalBoundItems = 0;

然后确保绑定protected void litItem_DataBinding(object sender, System.EventArgs e) { Literal lt = (Literal)(sender); _repeaterCount++; if (_repeaterCount % _repeaterTotalColumns == 1) { lt.Text = "<tr>"; } lt.Text += string.Format("<td>{0}</td>", Eval("Name").ToString()); if (_repeaterCount == _repeaterTotalBoundItems) { // Last item so put in the extra <td> if required for (int i = 0; i < (_repeaterTotalColumns - (_repeaterCount % _repeaterTotalColumns)); i++) { lt.Text += "<td></td>"; } lt.Text += "</tr>"; } if (_repeaterCount % _repeaterTotalColumns == 0) { lt.Text += "</tr>"; } } 时保存总计数:

Repeater

产生的输出将是:

 _repeaterTotalBoundItems = yourDataTable.Rows.Count;
 repeater.DataSource = yourDataTable;
 repeater.DataBind();

你可能会改进<table> <tr><td>Bob</td> <td>John</td> <td>Joe</td></tr> <tr><td>Mary</td> <td>Mike</td><td></td></tr> </table> 代码,但我只是喋喋不休地给出了如何实现目标的基本前提。如果DataBinding需要执行大量的字符串连接操作,您可能应该切换到使用DataBinding,然后在上一次操作中分配StringBuilder

答案 5 :(得分:0)

或者只是在转发器中使用div,然后用CSS解决高度/宽度问题。