C# 在第页中显示产品详细信息

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

我的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以及如何在页面中显示每个产品？？？

您需要datagrid控件、中继器或类似工具来显示表格数据。

---

现在，每个属性只有一个控件来显示所有记录，这就是为什么最后一个控件获胜。

您可以使用Asp Repeater来实现这一点。

---

查看此链接：

您的视图/页面可能如下所示：

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

    <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();

---

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

您应该将数据源读取器绑定到

HTML标记类似于以下内容：

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

    <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();

---

旁注：我将name、price和img元素的属性从id改为class。因为当这个标记被渲染时，它将具有多个元素，这些元素具有相同的ID，这是不应该的，因为根据规范，ID应该是唯一的。

您应该考虑使用ASP:Realth.yEa，因为您没有在数组或列表中使用它。您可能需要动态地创建结构并将其附加到div中。因为您将其作为id获取，所以只有最后一个产品被分配