Question

我需要在页面中显示产品详细信息。

我的aspx如下所示......

<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
<div class="product-item">
    <div class="image">
        <img runat="server" id="img" alt="" src="" />
    </div>
    <div class="body">
        <div class="label-discount clear"></div>
        <div class="title">
            <a runat="server" id="name" href="single-product.html"></a>
        </div>
    </div>
    <div class="prices">
        <div class="price-prev"></div>
        <div runat="server" id="price" class="price-current pull-right"></div>
    </div>
    <div class="hover-area">
        <div class="add-cart-button">
            <a href="single-product.html" class="le-button">Enquiry</a>
        </div>

    </div>
</div>

我的代码隐藏就像下面......

dbConnection cn = new dbConnection();
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        getLoopData();
    }
}

public void getLoopData()
{
    cn.con.Open();
    cn.cmd.Connection = cn.con;
    cn.cmd.CommandText = "select * FROM products";
    MySqlDataReader reader = cn.cmd.ExecuteReader();

    while (reader.Read())
    {
        //int id = reader.GetInt32(0);
        name.InnerText = reader["InventionName"].ToString();
        price.InnerText = reader["Price"].ToString();
        img.Src = reader["Picture"].ToString();

    }
    reader.Close();
    cn.con.Close();
}

但它只显示最后的产品细节。

我应该如何为每个产品重复div以及如何在页面中显示每个产品？

Answer 1

您可以使用Asp Repeater执行此操作。请查看此链接：http://www.w3schools.com/aspnet/aspnet_repeater.asp

Answer 2

您需要数据网格控件，转发器或类似功能才能显示表格数据。现在，每个属性只有一个控件来显示所有记录，这就是最后一个获胜的原因。

Answer 3

您的观点/页面可能是这样的：

<asp:Repeater ID="ProductRepeater" runat="server" EnableViewState="False">
  <ItemTemplate>
     <div class="product-item">
        <div class="image">
    <img id="img" alt="" src='<%# Eval("Picture") %>' />
               ///...
  </ItemTemplate>
 </asp:Repeater>

在您的代码中，您可以执行此操作：

cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "SELECT InventionName, Price, Picture FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();
ProductRepeater.DataSource = reader;
ProductRepeater.DataBind();

Answer 4

您正在迭代列表，并将数据分配给name，price和img.Src，但是您在每次迭代时都会覆盖这些值，因此您只拥有最后一个元素的值

您应该将数据源（reader）绑定到<asp:Repeater>的{{1}}媒体资源。在标记中，您指定标题（DataSource），页脚（HeaderTemplate）和内容（FooterTemplate）。如果您不需要，可以省略页眉和页脚模板。如果您需要对奇数/偶数行执行不同的操作（例如，在表格中交替使用行颜色），也可以使用ItemTemplate。

您可以使用AlternatingItemTemplate

<%# Eval("SomeProperty") %>来访问数据绑定数据类型的属性

HTML标记将是这样的：

    <asp:Repeater id="Products" runat="server">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div class="col-xs-12 col-sm-4 no-margin product-item-holder hover"> <!-- this div will be repeated for each product -->
            <div class="product-item">
                <div class="image">
                    <img class="img" alt="" src="<%# Eval("Picture") %>" />
                </div>
                <div class="body">
                    <div class="label-discount clear"></div>
                    <div class="title">
                        <a class="name" href="single-product.html"><%# Eval("InventionName") %></a>
                    </div>
                </div>
                <div class="prices">
                    <div class="price-prev"></div>
                    <div class="price" class="price-current pull-right"><%# Eval("Price") %></div>
                </div>
                <div class="hover-area">
                    <div class="add-cart-button">
                        <a href="single-product.html" class="le-button">Enquiry</a>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

并在代码隐藏中连接数据源，如下所示：

cn.con.Open();
cn.cmd.Connection = cn.con;
cn.cmd.CommandText = "select * FROM products";
MySqlDataReader reader = cn.cmd.ExecuteReader();

Products.DataSource = reader; // rather than iterating manually, you assign the datasource to the repeater. 
Products.DataBind();

reader.Close();
cn.con.Close();

旁注：我在名称，价格和img元素上将属性从id更改为class。因为当这个标记被渲染时，它将具有多个具有相同id的元素，它不应该因为id根据规范应该是唯一的。

在页面中显示产品详细信息

4 个答案: