Bind SharePoint Library Images Into Repeater Control Using ASP.NET

Vinodh Narayanan
9y
15.1k
0
2

Article

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.

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.

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();
}
}
}
}
}
}
}