WingtipToys - responsiveness for ProductsList.aspx page RSS

• • Reply
  123456prog

  None

  0 Points

  2 Posts

  WingtipToys - responsiveness for ProductsList.aspx page

  Aug 25, 2016 08:40 PM|123456prog|LINK

  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

• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: WingtipToys - responsiveness for ProductsList.aspx page

  Aug 26, 2016 12:13 PM|Cathy Zou|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  123456prog

  None

  0 Points

  2 Posts

  Re: WingtipToys - responsiveness for ProductsList.aspx page

  Sep 09, 2016 10:20 AM|123456prog|LINK

  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