Показать подробное описание товара на странице

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>'s DataSource. В вашей разметке вы указываете заголовок (HeaderTemplate), нижний колонтитул (FooterTemplate) и содержание (ItemTemplate). Вы можете опустить шаблон заголовка и нижнего колонтитула, если они вам не нужны. Вы также можете использовать AlternatingItemTemplate, если вам нужно делать разные вещи с нечетными/четными строками (например, чередующийся цвет строки в таблице).

Вы можете получить доступ свойства DataBound типа данных с использованием <%# 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 должен быть уникальным в соответствии со спецификацией.