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

Question

我希望能夠使用ASP.Net Repeater控件創建一個包含三列和多行necc的HTML表。

例如，如果數據看起來像這樣

「休斯」

「安迪嬌小」

「CC薩巴西亞」

「AJ伯內特」

「哈維爾·巴斯克斯」

我想得到的結果表要像

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

我該怎麼做？

Answer 1

最好使用DataList控件，因爲它具有有趣的屬性RepeatColumns和RepeatDirection。

Answer 2

我假設你有5行數據中的所有這些名稱，並且你希望將它分佈在中繼器中的3列中，而不是具有3行的數據的2行，這將是直截了當的。根據我假設你的數據是這樣的：

DataTable（或任何你的源）：

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

您可以用做一個Repeater，並在OnDataBinding事件的一個小邏輯LiteralLiteral。

首先定義你的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> 

接下來，你需要你想要的總列和兩個全局變量恆定的跟蹤綁定操作。定義他們像這樣：

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

然後，你將需要實現OnDataBinding做所有的定製工作：當你綁定你Repeater要保存的總數

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>"; 
    } 
} 

然後確保：

_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需要執行大量字符串concat操作，則可能應該切換到使用StringBuilder，然後在最後一個操作中只分配Literal。

Answer 3

中繼器不是完成該操作的理想控件。如果您使用.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> 

Answer 4

或者只是在轉發器中使用div，然後用CSS解決hight/width問題。

Answer 5

比這裏列出的所有例子簡單得多;您不需要使用列表視圖或在後面的代碼中執行任何操作。

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

Answer 6

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