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