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

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

您需要一个datagrid控件，中继器或类似的来显示表格数据。 现在你只有一个控件每个属性来显示所有记录，这就是为什么最后一个胜利。

Answer 2

你可以使用Asp Repeater来做到这一点。 检查此链接了：http://www.w3schools.com/aspnet/aspnet_repeater.asp

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>的DataSource属性。在您的标记中，您指定标题（HeaderTemplate），页脚（FooterTemplate）和内容（ItemTemplate）。如果你不需要它们，你可以省略页眉和页脚模板。如果您需要用奇数/偶数行执行不同的操作（例如，在表中交替排列行），也可以使用AlternatingItemTemplate。

您可以使用<%# Eval("SomeProperty") %>这是一个databinding expression.

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

附注：我改变了属性从id到class上的名称，价格和img元素。因为当这个标记被渲染时，它会与多个具有相同ID的元素一起使用，因为id根据规范应该是唯一的。