0

asp.net の ListView コントロールのレイアウトとバインディングについて助けが必要です。関連情報とともに、ページごとに 6 つの画像のみを表示する必要があるカタログ ページがあります。

問題はこれです。レイアウトをどうしようか迷っています。

この設計がすべて HTML テーブルで行われた場合、ここで見られるように、私が達成したいことを達成するのはかなり簡単だったでしょう。

Twitter ブートストラップを使用していますが、デザインは表にありません。以下は、私が望む外観を生成する私のコードです。

<div class="categories row-fluid">
    <div class="span4">
        <div class="category1">
            <img id="myImageHolder" runat="server" class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour:</li>
                <li>Price:</li>
            </ul>
        </div>
    </div>

    <div class="span4">
        <div class="category1">
            <img class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour: </li>
                <li>Price:</li>
            </ul>
        </div>
    </div>
    <div class="span4">
        <div class="category1">
            <img class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour: </li>
                <li>Price:</li>
            </ul>
        </div>
    </div>
</div>
<div class="categories row-fluid">
    <div class="span4">
        <div class="category1">
            <img class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour: </li>
                <li>Price:</li>
            </ul>
        </div>
    </div>
    <div class="span4">
        <div class="category1">
            <img class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour: </li>
                <li>Price:</li>
            </ul>
        </div>
    </div>
    <div class="span4">
        <div class="category1">
            <img class="image1" alt="" src="../img/metal_candle.png" />
        </div>
        <div class="details">
            <div class="button">
                <button class="square" type="button">Add to Cart</button>
            </div>
            <ul>
                <li>Description:</li>
                <li>Colour: </li>
                <li>Price:</li>
            </ul>
        </div>
    </div>
</div>

Listview をレイアウト テンプレート、アイテム テンプレート、およびグループ テンプレートと一緒に使用して、上記の外観を作成しながら、ページングとデータ バインディングを許可するにはどうすればよいですか?

どんな助けやアイデアも大歓迎です。

4

1 に答える 1

0

これを達成する方法を見つけました。

<asp:ListView ID="category1" runat="server">
            <LayoutTemplate>
                <div class="categories row">
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                </div>
            </LayoutTemplate>

            <ItemTemplate>
                <div class="span4">
                    <div class="category1">
                        <img class="image1" alt="No Image" src="CatalogueImages/<%# Eval("ImageName") %>" />
                    </div>
                    <div class="details">
                        <div class="button">
                            <button class="square" type="button">Add to Cart</button>
                        </div>
                        <ul>
                            <li><%# Eval("ImageDescription") %></li>
                            <li>Colour: <%# Eval("Color") %></li>
                            <li>Price: <%# Eval("Price") %></li>
                        </ul>
                    </div>
                </div>
            </ItemTemplate>
            <EmptyDataTemplate>
                <div>
                    Sorry, no products available
                </div>
            </EmptyDataTemplate>
        </asp:ListView>
<div class="DataPager">
            <asp:DataPager ID="pager" PageSize="6" PagedControlID="category1" runat="server">
                <Fields>
                    <asp:NumericPagerField />
                </Fields>
            </asp:DataPager>
        </div>
于 2013-07-24T11:30:48.257 に答える