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;">
  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>
  24. <hr />
  25. </ItemTemplate>
  26. </asp:Repeater>
  28. </div>
  30. </td>
  31. <td style="width:10%"></td>
  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;
  7. namespace Rollup_announcement.annao2
  8. {
  9. [ToolboxItemAttribute(false)]
  10. public partial class annao2 : WebPart
  11. {
  12. public annao2()
  13. {
  14. }
  16. protected override void OnInit(EventArgs e)
  17. {
  18. base.OnInit(e);
  19. InitializeControl();
  20. }
  22. protected void Page_Load(object sender, EventArgs e)
  23. {
  24. if (!Page.IsPostBack)
  25. {
  27. Bindspeaker();
  28. }
  31. }
  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. }
  58. }
Final Result

Final Result

Happy SharePoint!