locked
WingtipToys - responsiveness for ProductsList.aspx page RRS feed

  • Question

  • User-1896458658 posted

    I'am learning from these example : Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013 - Wingtip Toys (C#) (By Erik Reitan).

    On page 68 e-book says: 2. Select Cars from the product category navigation menu. The ProductList.aspx page is displayed showing only products included in the “Cars” category.

    <%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true"           
    		CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">     
    	<section>         
    		<div>             
    			<hgroup>                 
    				<h2><%: Page.Title %></h2>             
    			</hgroup>  
    			
                <asp:ListView ID="productList" runat="server"                  
    			DataKeyNames="ProductID" GroupItemCount="4"                 
    			ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">                 
    			<EmptyDataTemplate>                     
    				<table >
    					<tr>                             
    						<td>No data was returned.</td>
    					</tr>                     
    				</table>              
    			</EmptyDataTemplate>                 
    			<EmptyItemTemplate>                     
    				<td/>                 
    			</EmptyItemTemplate>                 
    			<GroupTemplate>                     
    				<tr id="itemPlaceholderContainer" runat="server">                         
    					<td id="itemPlaceholder" runat="server"></td>                     
    				</tr>                 
    			</GroupTemplate>                 
    			<ItemTemplate>                     
    				<td runat="server">
    					<table>      
    						<tr>     
    							<td>                                     
    								<a
    href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> 
    									<img
    src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"                                         	
    								width="100" height="75" style="border: 
    solid" /></a>
                                    			</td>
    										</tr>
    									<tr>				
    											<td>                    
    												<a 
    href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">                                         
    										<span>                           
    											<%#:Item.ProductName%>
    										</span>                  
    									</a>                                     
    									<br />                                     
    									<span>                                         
    										<b>Price: </b><%#:String.Format("{0:c}", 
    Item.UnitPrice)%>                                     
    									</span>                                     
    									<br />                                 
    								</td>                             
    							</tr>                             
    							<tr>                                 
    								<td>&nbsp;</td>                             
    							</tr>                         
    						</table>                         
    						</p>                     
    					</td>                 
    				</ItemTemplate>                 
    				<LayoutTemplate>                     
    					<table style="width:100%;">                         
    						<tbody>                             
    							<tr>                                 
    								<td>                                     
    									<table id="groupPlaceholderContainer" 
    runat="server" style="width:100%">                                         
    										<tr id="groupPlaceholder"></tr>
    									</table>                             
    								</td>                             
    							</tr>                             
    							<tr>                                 
    								<td></td>                             
    							</tr>                             
    							<tr></tr>                         
    						</tbody>                     
    					</table>                 
    				</LayoutTemplate>             
    			</asp:ListView>         
    		</div>     
    	</section> 
    </asp:Content>

    I would like responsiveness for ProductsList.aspx page, I would like get that products  in one/two row
    when browser is resized for small devices (col-sm-12/col-sm-6), and four products for medium devices (col-md-3).

    I tried something like these but that's not good because GroupItemCount="4".

    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
          <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" alt="">
          <div class="caption">
            <p><%#:Item.ProductName%></p>        
          </div>
        </div>
      </div>
    </div>

    tnx

    Thursday, August 25, 2016 8:40 PM

All replies

  • User-707554951 posted

    Hi 123456prog,

    From you description, you refereed the following link to display your ProductList.

    http://www.asp.net/web-forms/overview/getting-started/getting-started-with-aspnet-45-web-forms/introduction-and-overview

    now, you want to get that products are in one/two row when when browser is resized. In the article above, I supposed you also used Bootstrap to create your web framing. As far as I know, Bootstrap grid system has four classes for we option. for you question, I suggest you could use F12 developer tools and use select element to see that which class apply to you ProductList. Then you could rewrite your code according to result.

    Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.

    Best regards
    Cathy

    Friday, August 26, 2016 12:13 PM
  • User-1896458658 posted

    Hi Cathy Zou,

    first, thanks for your time.

    yes, that's correct link. I tried to use F12 developer tools before i post question. My code is good (maybe isn't correct, but it's work :), but how to change these code?

    <asp:ListView ID="productList" runat="server"                  
    			DataKeyNames="ProductID" GroupItemCount="4"                 
    			ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">                 
    			<EmptyDataTemplate>
    ...

    GroupItemCount="4". I have 4 picture in one row for xs and for lg because of that. (I would like to have 1 picture in 1 row for xs and 4 picures in 1 row for lg)
     

    Best regards

    123456prog

    Friday, September 9, 2016 10:20 AM