Post
Ask Question

Iteration Of Repeater Using JavaScript

Introduction

 
JavaScript function and Repeater are at the heart of our article. I have used these in web applications for cart calculation.
  1. Total Amount of Cart Item
  2. Less (-) Discount
  3. Add (+) Shipping Charges
  4. Amount To Pay

What is a Repeater?

 
The repeater is a very lightweight server-side control. It can be used easily and helps to manipulate things. All the new users mostly directly go to use GRIDVIEW control but I will suggest the use of a repeater. 
 

Repeater has the following templates

  1. Item Template- It renders your render data from the DataSource.
  2. Alternating Item Template- It allows you to change render behavior for altering the item template from the DataSource.
  3. Header Template- For setting your header.
  4. Footer Template- For setting your footer.
  5. Separator Template- It allows you to design separation between the two items. Here, you can use  <HR> or anything else which is good for your page.
To know more about Repeater, the links given below are the Microsoft MSDN links for more details and examples.
 
https://msdn.microsoft.com/en-us/library/x8f2zez5(v=vs.85).aspx
https://msdn.microsoft.com/en-us/library/x8f2zez5(v=vs.140).aspx 
 
 
The naming convention of Repeater is rpt.
 
Example
  1. <asp:Repeater ID="rptCartItem" runat="server">    
  2.     <HeaderTemplate>    
  3.     
  4.     </HeaderTemplate>    
  5.     <ItemTemplate>    
  6.     
  7.     </ItemTemplate>    
  8.     <AlternatingItemTemplate>    
  9.     
  10.     </AlternatingItemTemplate>    
  11.     <SeparatorTemplate>    
  12.     
  13.     </SeparatorTemplate>    
  14.     <FooterTemplate>    
  15.     
  16.     </FooterTemplate>    
  17. </asp:Repeater>   
Implementation of iteration of Repeater, using JavaScript, is given below.  
 

Step by Step

 
Step 1
 
Create a new ASP.NET web-based project named RepeaterIterationForCart.
 
 
Step 2
 
To add a new web form, right-click on the Solution Explorer or project, and click Add ---> Add new item option.
 
 
New Web Form is named as Default.aspx.
 
Step 3
 
We will fetch the data from the database with the help of DBML (LINQ TO SQL).
 
 
LINQ to SQL Classes (DBML) are named CartDataClasses.dbml 
 
As you click the Add button, one dialog box will appear, which asks to add the DBML file into the App_Code folder. Press Yes.
 
Note

If in your solution App_Code, the folder is not created, then by pressing YES, this will create App_Code as well as add DBML file inside the same folder. 
 
 
After the step given above, your Solution Explorer should be displayed. 
 
Step 4
 
Create a table called tblCarts. The table structure of our carts is given below.
  1. USE [MBKTest]    
  2. GO    
  3. SET ANSI_NULLS ON    
  4. GO    
  5. SET QUOTED_IDENTIFIER ON    
  6. GO    
  7. CREATE TABLE [dbo].[tblCarts](    
  8. [ProductID] [int] IDENTITY(1,1) NOT NULL,    
  9. [ProductName] [nvarchar](50) NOT NULL,    
  10. [ProductImage] [nvarchar] (1000) NOT NULL,    
  11. [ProductRate] [int] NULL    
  12. ) ON [PRIMARY]    
  13.     
  14. GO   
Sample Data
 
 
Step 5
 
Drag and drop the table from the Server Explorer.
 
 
Step 6
 
Drag and drop the Repeater Control from the Toolbox, and configure.
 
 
Inside Repeater, write the code given below.
  1. <asp:Repeater ID="rptCartItem" runat="server">    
  2.     <HeaderTemplate>    
  3.     </HeaderTemplate>    
  4.     
  5.     
  6.     <ItemTemplate>    
  7.         <div>    
  8.             <asp:Image ID="imgProduct" runat="server" ImageUrl='<%# Eval("ProductImage") %>' Width="5%" Height="7%" />    
  9.             <br />    
  10.             <b><asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label> </b>    
  11.             <p style="margin-left:500px"><b><u>Price: <asp:Label ID="lblProductRate" Class="pricecss" runat="server" Text='<%# Eval("ProductRate") %>'></asp:Label></b></u>    
  12.             </p>    
  13.         </div>    
  14.     </ItemTemplate>    
  15.     
  16.     <SeparatorTemplate>    
  17.         <hr/>    
  18.     </SeparatorTemplate>    
  19.     
  20.     <FooterTemplate>    
  21.     </FooterTemplate>    
  22. </asp:Repeater>   
Now, add the code given below in the back-end file.
  1. //initialize data class     
  2. var db = new CartDataClassesDataContext();    
  3.     
  4. //Setting data from database    
  5. rptCartItem.DataSource = db.tblCarts.ToList();    
  6. rptCartItem.DataBind();    
  7.     
  8. //To call javascript function from code behind    
  9. Page.ClientScript.RegisterStartupScript(this.GetType(),"RecalculateRepeater","RecalculateRepeater()",true);  
Step 7
 
Add the label for Total Price, Discount Amount, and Shipping, Amount To Pay.
  1. <span style = "padding-left:300px" > Your Cart Total Value: < /span>    
  2. <asp: Label ID = "lblTotalPrice"  
  3. style = "padding-left:45px"  
  4. runat = "server"  
  5. ClientIDMode = "Static" > < /asp:Label>     
  6. <br / >  
  7.  <span style = "padding-left:370px" > (-) Discount: < /span>    
  8.  <asp: Label ID = "lblDiscountAmount"  
  9. style = "padding-left:52px"  
  10. runat = "server"  
  11. ClientIDMode = "Static"  
  12. Text = "1000" > < /asp:Label>     
  13. <br / >  
  14.  <span style = "padding-left:368px" > (+) Shipping: < /span>     
  15.  <asp: Label ID = "lblShipping"  
  16. style = "padding-left:55px"  
  17. runat = "server"  
  18. ClientIDMode = "Static"  
  19. Text = "500" > < /asp:Label>     
  20. <br / >  
  21.  <br / >  
  22.  <hr / >  
  23.  <span style = "padding-left:345px" > Amount To Pay: < /span>     
  24.  <asp: Label ID = "lblAmounttoPay"  
  25. style = "padding-left:40px"  
  26. runat = "server"  
  27. ClientIDMode = "Static" > < /asp:Label>   
Step 8
 
The javaScript function is at the heart of this article. Let's understand the commands given below. 
  1. <script>    
  2.     function RecalculateRepeater()    
  3.     {    
  4.         //Total SPAN in DOM    
  5.         var spans = document.getElementsByTagName('span');    
  6.         var l = spans.length;    
  7.         var sum = 0;    
  8.         //Iteration of SPAN in DOM    
  9.         for (var i = 0; i < l; i++) {    
  10.             var spanClass = spans[i].getAttribute("class");    
  11.     
  12.             //Total value of SPAN which CLASS = pricecss     
  13.             if (spanClass === "pricecss") {    
  14.                 /*do stuff to current spans[i] here*/    
  15.                 sum += Number(spans[i].innerText);    
  16.             }    
  17.         }    
  18.     
  19.         //This very straight forward code after getting SUM value.    
  20.         //TotPrice + Shipping - Discount    
  21.     
  22.         var TotPrice = document.getElementById("lblTotalPrice");    
  23.         TotPrice.innerText = Number(sum);    
  24.         var Discount = Number(document.getElementById("lblDiscountAmount").innerText);    
  25.         var Shipping = Number(document.getElementById("lblShipping").innerText);    
  26.         var AmtPay = document.getElementById("lblAmounttoPay");    
  27.         AmtPay.innerText = (Number(TotPrice.innerText) + Shipping) - Discount;    
  28.     }    
  29. </script>   
Full Page Code of Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
  2.     
  3.     <!DOCTYPE html>    
  4.     
  5.     <html xmlns="http://www.w3.org/1999/xhtml">    
  6.     
  7.     <head runat="server">    
  8.         <title></title>    
  9.     
  10.         <script>    
  11.             function RecalculateRepeater() {    
  12.                 var spans = document.getElementsByTagName('span');    
  13.                 var l = spans.length;    
  14.                 var sum = 0;    
  15.                 for (var i = 0; i < l; i++) {    
  16.                     var spanClass = spans[i].getAttribute("class");    
  17.                     if (spanClass === "pricecss") {    
  18.                         /*do stuff to current spans[i] here*/    
  19.                         sum += Number(spans[i].innerText);    
  20.                     }    
  21.                 }    
  22.     
  23.                 var TotPrice = document.getElementById("lblTotalPrice");    
  24.                 TotPrice.innerText = Number(sum);    
  25.                 var Discount = Number(document.getElementById("lblDiscountAmount").innerText);    
  26.                 var Shipping = Number(document.getElementById("lblShipping").innerText);    
  27.                 var AmtPay = document.getElementById("lblAmounttoPay");    
  28.                 AmtPay.innerText = (Number(TotPrice.innerText) + Shipping) - Discount;    
  29.             }    
  30.         </script>    
  31.     
  32.     </head>    
  33.     
  34.     <body>    
  35.         <form id="form1" runat="server">    
  36.             <div>    
  37.     
  38.                 <h2 style="padding-left:180px">Your C-Sharpcorner Cart Detail </h2>    
  39.     
  40.                 <asp:Repeater ID="rptCartItem" runat="server">    
  41.                     <HeaderTemplate>    
  42.                     </HeaderTemplate>    
  43.     
  44.     
  45.                     <ItemTemplate>    
  46.                         <div>    
  47.                             <asp:Image ID="imgProduct" runat="server" ImageUrl='<%# Eval("ProductImage") %>' Width="5%" Height="7%" />    
  48.                             <br />    
  49.                             <b><asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label> </b>    
  50.                             <p style="margin-left:500px"><b><u>Price: <asp:Label ID="lblProductRate" Class="pricecss" runat="server" Text='<%# Eval("ProductRate") %>'></asp:Label></b></u>    
  51.                             </p>    
  52.                         </div>    
  53.                     </ItemTemplate>    
  54.     
  55.                     <SeparatorTemplate>    
  56.                         <hr/>    
  57.                     </SeparatorTemplate>    
  58.     
  59.                     <FooterTemplate>    
  60.                     </FooterTemplate>    
  61.                 </asp:Repeater>    
  62.                 <hr />    
  63.                 <b>    
  64. <span style="padding-left:300px">Your Cart Total Value :</span>    
  65. <asp:Label ID="lblTotalPrice" style="padding-left:45px" runat="server" ClientIDMode="Static" ></asp:Label>    
  66. <br />    
  67. <span style="padding-left:370px">(-) Discount :</span>    
  68. <asp:Label ID="lblDiscountAmount" style="padding-left:52px" runat="server" ClientIDMode="Static" Text="1000" ></asp:Label>    
  69. <br />    
  70. <span style="padding-left:368px">(+) Shipping :</span>    
  71. <asp:Label ID="lblShipping" style="padding-left:55px" runat="server" ClientIDMode="Static" Text="500" ></asp:Label>    
  72. <br />    
  73. <br />    
  74. <hr />    
  75. <span style="padding-left:345px">Amount To Pay :</span>    
  76. <asp:Label ID="lblAmounttoPay" style="padding-left:40px" runat="server" ClientIDMode="Static"></asp:Label>    
  77. <hr />    
  78. <hr />    
  79. </b>    
  80.             </div>    
  81.         </form>    
  82.     </body>    
  83.     
  84.     </html>   
Full Page code of Default.aspx.cs
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.Web.UI;    
  6. using System.Web.UI.WebControls;    
  7.     
  8. public partial class _Default: System.Web.UI.Page    
  9. {    
  10.     protected void Page_Load(object sender, EventArgs e)     
  11.     {    
  12.     
  13.         //initialize data class     
  14.         var db = new CartDataClassesDataContext();    
  15.     
  16.         //Setting data from database    
  17.         rptCartItem.DataSource = db.tblCarts.ToList();    
  18.         rptCartItem.DataBind();    
  19.     
  20.         //To call javascript function from code behind    
  21.         Page.ClientScript.RegisterStartupScript(this.GetType(), "RecalculateRepeater", "RecalculateRepeater()", true);    
  22.     }    
  23. }   
Full Page code of Web.Config
  1. <?xml version="1.0"?>    
  2. <!--    
  3. For more information on how to configure your ASP.NET application, please visit    
  4. http://go.microsoft.com/fwlink/?LinkId=169433    
  5. -->    
  6. <configuration>    
  7.     <connectionStrings>    
  8.         <add name="MBKTestConnectionString" connectionString="Data Source=192.168.1.50\sa;Initial Catalog=MBKTest;Persist Security Info=True;User ID=sa;Password=abc" providerName="System.Data.SqlClient" />    
  9.     </connectionStrings>    
  10.     <system.web>    
  11.         <compilation debug="true" targetFramework="4.0">    
  12.             <assemblies>    
  13.                 <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />    
  14.             </assemblies>    
  15.         </compilation>    
  16.     </system.web>    
  17. </configuration>    
Output
 


Similar Articles