This article shows you how to bind data in Repeater controls without using any database in ASP.NET. Also, we will learn here how to bind controls with data without using a database. Additionally, how to handle repeater common events will be discussed. For this I have shownthe clicked-on image and changed image on click.

Initial Chamber

Step 1: Open Visual Studio and create an empty website, then provide a suitable name such as RepeaterChangeImage.

Step 2: In Solution Explorer you will get your empty website, then add some web forms.

RepeaterChangeImage (your empty website). Right-click and select Add New Item Web Form. Name it RepeaterChangeImage.aspx.

Design Chamber

Step 3:

Open the RepeaterChangeImage.aspx file and write some code for the design of the application. Choose control from toolbox and put on your design page as in the following code snippet:

  1. <div>
  2. <asp:RepeaterID="Repeater1"runat="server">
  3. <ItemTemplate>
  4. <asp:LabelID="Label1"runat="server"><%#Eval("Product_Name")%></asp:Label>
  5. <asp:LabelID="Label2"runat="server"><%#Eval("Quantity")%></asp:Label>
  6. <asp:LabelID="Label3"runat="server"><%#Eval("Price")%></asp:Label>
  7. <asp:ImageButtonID="ImageButton1"runat="server"Height="50px"Width="100px"ImageUrl='<%#Eval("path") %>'
  8. CommandArgument='<%#Eval("path")%>'OnClick="ImageButton1_Click"/><br/>
  9. </ItemTemplate>
  10. </asp:Repeater>
  11. </div>
Design of page looks like the following:

page

Here, I've designed the GridView Control and uploader used some property as in the following code snippet:
  1. <%@PageLanguage="C#"AutoEventWireup="true"EnableEventValidation="true"CodeFile="ChangeImageRepeater.aspx.cs"Inherits="ChangeImageRepeater"%>
  3. <!DOCTYPEhtml>
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">
  6. <headrunat="server">
  7. <title></title>
  8. </head>
  9. <body>
  10. <formid="form1"runat="server">
  11. <div>
  12. <asp:RepeaterID="Repeater1"runat="server">
  13. <ItemTemplate>
  14. <asp:LabelID="Label1"runat="server"><%#Eval("Product_Name")%></asp:Label>
  15. <asp:LabelID="Label2"runat="server"><%#Eval("Quantity")%></asp:Label>
  16. <asp:LabelID="Label3"runat="server"><%#Eval("Price")%></asp:Label>
  17. <asp:ImageButtonID="ImageButton1"runat="server"Height="50px"Width="100px"ImageUrl='<%#Eval("path") %>'
  18. CommandArgument='<%#Eval("path")%>'OnClick="ImageButton1_Click"/><br/>
  19. </ItemTemplate>
  20. </asp:Repeater>
  21. </div>
  22. </form>
  23. </body>
  24. </html>
CODE CHAMBER

Step 4:

In the code chamber we will write some code so that our application works. Adding the following namespaces under namespace section of your code behind page.
  1. using System;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  7. usingSystem.Data;
  8. usingSystem.Data.SqlClient;
  9. usingSystem.Configuration;
Code behind Page
  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. using System.Data;
  8. using System.Data.SqlClient;
  9. using System.Configuration;
  11. public partial classChangeImageRepeater: System.Web.UI.Page
  12. {
  13. protected void Page_Load(object sender, EventArgs e)
  14. {
  15. if (!IsPostBack)
  16. {
  18. BindRepeater();
  19. }
  20. }
  22. protected void BindRepeater()
  23. {
  24. DataSet ds = newDataSet();
  25. DataTabledt;
  26. DataRowdr;
  27. DataColumnpName;
  28. DataColumnpQty;
  29. DataColumnpPrice;
  30. DataColumnpPath;
  31. //int i = 0;
  32. dt = newDataTable();
  33. pName = newDataColumn("Product_Name", Type.GetType("System.String"));
  34. pQty = newDataColumn("Quantity", Type.GetType("System.Int32"));
  35. pPrice = newDataColumn("Price", Type.GetType("System.Int32"));
  36. pPath = newDataColumn("path", Type.GetType("System.String"));
  37. dt.Columns.Add(pName);
  38. dt.Columns.Add(pQty);
  39. dt.Columns.Add(pPrice);
  40. dt.Columns.Add(pPath);
  41. dr = dt.NewRow();
  43. dr["Product_Name"] = "Product 1";
  44. dr["Quantity"] = 2;
  45. dr["Price"] = 200;
  46. dr["path"] = "image/Produc1.jpeg";
  47. dt.Rows.Add(dr);
  49. dr = dt.NewRow();
  50. dr["Product_Name"] = "Product 2";
  51. dr["Quantity"] = 5;
  52. dr["Price"] = 480;
  53. dr["path"] = "image/Produc2.jpeg";
  55. dt.Rows.Add(dr);
  56. dr = dt.NewRow();
  57. dr["Product_Name"] = "Product 3";
  58. dr["Quantity"] = 8;
  59. dr["Price"] = 100;
  60. dr["path"] = "image/Produc3.jpeg";
  61. dt.Rows.Add(dr);
  63. dr = dt.NewRow();
  64. dr["Product_Name"] = "Product 4";
  65. dr["Quantity"] = 2;
  66. dr["Price"] = 500;
  67. dr["path"] = "image/Produc4.jpeg";
  68. dt.Rows.Add(dr);
  70. ds.Tables.Add(dt);
  71. Repeater1.DataSource = ds.Tables[0];
  72. Repeater1.DataBind();
  73. }
  74. protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
  75. {
  76. ImageButtonImgBtn = (ImageButton) sender;
  77. string path = ((ImageButton) sender).CommandArgument;
  78. if (ImgBtn.ImageUrl == path)
  79. {
  80. ImgBtn.ImageUrl = "image/Penguins.jpg";
  81. ImgBtn.BackColor = System.Drawing.Color.Aqua;
  82. } else
  83. {
  84. ImgBtn.ImageUrl = path;
  85. ImgBtn.BackColor = System.Drawing.Color.Red;
  86. }
  87. }
  88. }
Output

First Loading:

first

After click on Image:

output
Here you can see how the last image changed on being clicked. I hope you liked this. Have a good day. Thank you for reading.
Read more articles on ASP.NET: