web-dev-qa-db-ja.com

ASP.Netリピーターで3列のテーブルを作成する方法

ASP.Net Repeaterコントロールを使用して、3つの列と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>

これどうやってするの？

asp.nethtml-tablerepeater
16
etoisarobot

興味深いプロパティ RepeatColumns および RepeatDirection があるため、DataListコントロールを使用する方が適切です。

15
Kris van der Mast

リピーターはそれを行うための理想的なコントロールではありません。 .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>
20
Merrimack

ここにリストされているすべての例よりもはるかに単純です。リストビューを使用したり、コードビハインドで何かをしたりする必要はありません。

  <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>
11
Alex Z
<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>
7
Alexandr

5行のデータにこれらすべての名前があり、それをリピーターの3列に分散させ、単純な3フィールドの2行のデータを持たせないことを想定しています。私の仮定に基づいて、あなたのデータは次のようなものです：

DataTable（またはソースが何であれ）：

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

RepeaterのLiteralイベントの小さなロジックでOnDataBindingと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>

次に、必要な合計列の定数と、バインディング操作を追跡する2つのグローバル変数が必要です。次のように定義します。

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

次に、すべてのカスタム作業を行うためにOnDataBindingを実装する必要があります。

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の使用に切り替え、最後の操作でLiteralを割り当てるだけです。

0
Kelsey

または、リピーターでdivを使用して、CSSで高さ/幅の問題を解決します。

0
MrTombola