Bind SharePoint Library Images Into Repeater Control Using ASP.NET

Open a SharePoint team site.



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



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



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



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

Provide the product image URL from Products images library.



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.



Code

ASPX Code

<div style="height:300px; width:400px">
    <table style="width:100%">
        <tr>
            <td style="width:10%"></td>
            <td style="width:80%">
                <div class="rptprods" style="padding-right: 20px; height:150px; width:200px;">

                    <asp:Repeater ID="rptprod" runat="server">
                        <ItemTemplate>
                            <img src="<%#DataBinder.Eval(Container.DataItem," Image ") %>" width="200" height="200" />
                            <br />
                            <h2 style="padding-top: 5px; font-weight: bold; font-size: 10px;"><%#DataBinder.Eval(Container.DataItem,"Title") %></h2>
                            <br />
                            <b> Availablity:</b>
                            <p style="color:green;">
                                <%#DataBinder.Eval(Container.DataItem,"Available") %>
                            </p>
                            <br />
                            <b> Price:</b>
                            <p style="color:green;">
                                <%#DataBinder.Eval(Container.DataItem,"Price") %>
                            </p>

                            <hr />
                        </ItemTemplate>
                    </asp:Repeater>

                </div>

            </td>
            <td style="width:10%"></td>

        </tr>
    </table>
</div>

CS Code

using Microsoft.SharePoint;
using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;

namespace Rollup_announcement.annao2
{
    [ToolboxItemAttribute(false)]
    public partial class annao2 : WebPart
    {
        public annao2()
        {
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            InitializeControl();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
          if (!Page.IsPostBack)
            {

                Bindspeaker();
            }


        }


        private void Bindspeaker()
        {
            using (SPSite site = new SPSite(SPContext.Current.Site.Url))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPList list = web.Lists["Our Products"];
                    if (list != null)
                    {
                        SPQuery query = new SPQuery();
                        query.Query = "<Where><Eq><FieldRef Name='Active' /><Value Type='Boolean'>1</Value></Eq></Where>";
                        SPListItemCollection collitem = list.GetItems(query);
                        if (collitem != null)
                        {
                            rptprod.DataSource = collitem.GetDataTable();
                            rptprod.DataBind();
                        }
                    }
                }
            }
        }
    }


}

Final Result



Happy SharePoint!