Bind SharePoint Library Images Into Repeater Control Using ASP.NET

Open a SharePoint team site.

SharePoint team site

Create a Custom list for binding a data into repeater control.

Custom list

So now the list has been created successfully. Create some custom columns into the list.

Create some custom columns into the list

Create a document library for storing ‘Product’ Images and insert some images into the library.

Create a document library

Now open our product list and insert some products into it.

Provide the product image URL from Products images library.

product

Open Visual studio, create a new SharePoint 2013 empty project and Add a visual webpart into it.

Use CAML Query to retrieve the server code.

CAML Query

Code

ASPX Code

  1. <div style="height:300px; width:400px">  
  2.     <table style="width:100%">  
  3.         <tr>  
  4.             <td style="width:10%"></td>  
  5.             <td style="width:80%">  
  6.                 <div class="rptprods" style="padding-right: 20px; height:150px; width:200px;">  
  7.   
  8.                     <asp:Repeater ID="rptprod" runat="server">  
  9.                         <ItemTemplate>  
  10.                             <img src="<%#DataBinder.Eval(Container.DataItem," Image ") %>" width="200" height="200" />  
  11.                             <br />  
  12.                             <h2 style="padding-top: 5px; font-weight: bold; font-size: 10px;"><%#DataBinder.Eval(Container.DataItem,"Title") %></h2>  
  13.                             <br />  
  14.                             <b> Availablity:</b>  
  15.                             <p style="color:green;">  
  16.                                 <%#DataBinder.Eval(Container.DataItem,"Available") %>  
  17.                             </p>  
  18.                             <br />  
  19.                             <b> Price:</b>  
  20.                             <p style="color:green;">  
  21.                                 <%#DataBinder.Eval(Container.DataItem,"Price") %>  
  22.                             </p>  
  23.   
  24.                             <hr />  
  25.                         </ItemTemplate>  
  26.                     </asp:Repeater>  
  27.   
  28.                 </div>  
  29.   
  30.             </td>  
  31.             <td style="width:10%"></td>  
  32.   
  33.         </tr>  
  34.     </table>  
  35. </div>  
CS Code
  1. using Microsoft.SharePoint;  
  2. using System;  
  3. using System.ComponentModel;  
  4. using System.Web.UI;  
  5. using System.Web.UI.WebControls.WebParts;  
  6.   
  7. namespace Rollup_announcement.annao2  
  8. {  
  9.     [ToolboxItemAttribute(false)]  
  10.     public partial class annao2 : WebPart  
  11.     {  
  12.         public annao2()  
  13.         {  
  14.         }  
  15.   
  16.         protected override void OnInit(EventArgs e)  
  17.         {  
  18.             base.OnInit(e);  
  19.             InitializeControl();  
  20.         }  
  21.   
  22.         protected void Page_Load(object sender, EventArgs e)  
  23.         {  
  24.           if (!Page.IsPostBack)  
  25.             {  
  26.   
  27.                 Bindspeaker();  
  28.             }  
  29.   
  30.   
  31.         }  
  32.   
  33.   
  34.         private void Bindspeaker()  
  35.         {  
  36.             using (SPSite site = new SPSite(SPContext.Current.Site.Url))  
  37.             {  
  38.                 using (SPWeb web = site.OpenWeb())  
  39.                 {  
  40.                     SPList list = web.Lists["Our Products"];  
  41.                     if (list != null)  
  42.                     {  
  43.                         SPQuery query = new SPQuery();  
  44.                         query.Query = "<Where><Eq><FieldRef Name='Active' /><Value Type='Boolean'>1</Value></Eq></Where>";  
  45.                         SPListItemCollection collitem = list.GetItems(query);  
  46.                         if (collitem != null)  
  47.                         {  
  48.                             rptprod.DataSource = collitem.GetDataTable();  
  49.                             rptprod.DataBind();  
  50.                         }  
  51.                     }  
  52.                 }  
  53.             }  
  54.         }  
  55.     }  
  56.   
  57.   
  58. }  
Final Result

Final Result

Happy SharePoint!

Up Next
    Ebook Download
    View all
    Learn
    View all