Post
Ask Question

Use Of Repeater In ASP To Create UI For Online Shopping Cart

Step 1

Create a table for storing your Image (Product) information, such as ProductID, Name ,Price, Quantity etc., which you want to show as product details on the homepage of a shopping cart.
 
Step 2

Create a web form for your web application.

Import Bootstrap line or manage NuGet packages to install bootstrap in your web form (right-click on web application --> Manage NuGet Packages-->install bootstrap).
 
LINQ

Step 3

Add repeater in your form,
  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <link href="Content/bootstrap.css" rel="stylesheet" />  
  6.     <title></title>  
  7.     <style>  
  8.         well{  
  9.             margin-top:20px;  
  10.             padding:2px,2px,2px,2px;  
  11.         }  
  12.     </style>  
  13. </head>  
  14. <body>  
  15.     <form id="form1" runat="server">  
  16.     <div class="container" style="margin-top:10px">  
  17.         <div class="row">  
  18.     <asp:Repeater ID="RepeatImages" runat="server">  
  19.            
  20.         <ItemTemplate>  
  21.             <div class="col-md-3">  
  22.                <div class="well" style="height:350px; width:350px;">  
  23.             <asp:Image ID="Image" runat="server" CssClass="align" style="height:200px; width:100%" ImageUrl='<%# DataBinder.Eval(Container,"DataItem.Image") %>' />  
  24.                <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container,"DataItem.ImageID") %>'></asp:Label><br />      
  25.                     </div>  
  26.              </div>  
  27.         </ItemTemplate>  
  28.                      
  29.     </asp:Repeater>  
  30.     </div>  
  31.         </div>  
  32.     </form>  
  33. </body>  
  34. </html>  
Step 4

Now, add model to access database (right click on web application --> add new item-->ADO.NET entity data model (model.edmx)).
 
LINQ 
 
Add model1.edmx

LINQ 
 
Create new connection Add database (Entity).

LINQ 
 
Choose table

LINQ 

By finishing this you will get access to your database.
 
Step 5

Fetch the data from table to send it to repeater, 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8. using upload_image.model;  
  9.   
  10. namespace upload_image  
  11. {  
  12.     public partial class repeater : System.Web.UI.Page  
  13.     {  
  14.         userEntities db = new userEntities();  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.             var data = (from a in db.ImageUploads select a).ToList();  
  18.              
  19.             RepeatImages.DataSource = data;  
  20.             RepeatImages.DataBind();  
  21.   
  22.         }  
  23.     }  
  24. }  

I am using LINQ for fetching data.

var data = (from a in db.ImageUploads select a).ToList();

Now, you will get UI as follows,

LINQ
You can design more using external CSS as well.

Thank you.
Next Recommended Reading Creating Custom Password Validation Rules In ASP.NET MVC, Using ASP.NET Identity