locked
Bind Reapeter Using Ajax json RRS feed

  • Question

  • Hi

    i have made web method using application page on SharePoint 2013 its returning list<class object> .

    Just let me know ,how can i bind this object to repeater control using Jason Ajax .

    Thanks

    Friday, December 8, 2017 7:40 AM

Answers

  • Hi,

    We can use front-end code like jQuery to achieve it.

    Here is a demo for your reference.

    The following class is created to hold the data.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace SharePointFarmSolutionDev
    {
        public class Customer
        {
            public string CustomerId { get; set; }
            public string ContactName { get; set; }
            public string City { get; set; }
            public string Country { get; set; }
            public string PostalCode { get; set; }
            public string Phone { get; set; }
            public string Fax { get; set; }
        }
    }
    

    Full code of my aspx.cs file.

    using System;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using System.Web.Services;
    using System.Collections.Generic;
    
    namespace SharePointFarmSolutionDev.Layouts.SharePointFarmSolutionDev
    {
        public partial class MyApplicationPage2 : LayoutsPageBase
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<Customer> customers = new List<Customer>();
                customers.Add(new Customer());
                rptCustomers.DataSource = customers;
                rptCustomers.DataBind();
            }
    
            [WebMethod]
            public static List<Customer> GetCustomers()
            {
                
                List<Customer> customers = new List<Customer>();
    
                Customer customer01 = new Customer();
                customer01.CustomerId = "1";
                customer01.ContactName = "Mike";
                customer01.City = "New York";
                customer01.Country = "USA";
                customer01.PostalCode = "IS-7";
                customer01.Phone = "911";
                customer01.Fax = "911911";
    
                Customer customer02 = new Customer();
                customer02.CustomerId = "2";
                customer02.ContactName = "Divid";
                customer02.City = "Tokyo";
                customer02.Country = "Japan";
                customer02.PostalCode = "FV215B(183)";
                customer02.Phone = "110";
                customer02.Fax = "110110";
    
                customers.Add(customer01);
                customers.Add(customer02);
                return customers;               
                
            }        
        }
    }
    

    Full code of my aspx file.

    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyApplicationPage2.aspx.cs" Inherits="SharePointFarmSolutionDev.Layouts.SharePointFarmSolutionDev.MyApplicationPage2" DynamicMasterPageFile="~masterurl/default.master" %>
    
    <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    
    </asp:Content>
    
    <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "MyApplicationPage2.aspx/GetCustomers",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
                var table = $("#dvCustomers table").eq(0).clone(true);
                var customers = response.d;
                $("#dvCustomers table").eq(0).remove();
                $(customers).each(function () {
                    $(".name", table).html(this.ContactName);
                    $(".city", table).html(this.City);
                    $(".postal", table).html(this.PostalCode);
                    $(".country", table).html(this.Country);
                    $(".phone", table).html(this.Phone);
                    $(".fax", table).html(this.Fax);
                    $("#dvCustomers").append(table).append("<br />");
                    table = $("#dvCustomers table").eq(0).clone(true);
                });
            }
        </script>
    
    
       <div id="dvCustomers">
        <asp:Repeater ID="rptCustomers" runat="server">
            <ItemTemplate>
                    <table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
                    <tr>
                        <td>
                            <b><u><span class="name">
                                <%# Eval("ContactName") %></span></u></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>City: </b><span class="city"><%# Eval("City") %></span><br />
                            <b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
                            <b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
                            <b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
                            <b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:Repeater>
       </div> 
    </asp:Content>
    
    <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    Application Page
    </asp:Content>
    
    <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
    My Application Page
    </asp:Content>
    

    Screenshot of result.

    Best regards,

    Lee Liu


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, December 11, 2017 8:47 AM

All replies

  • Hi,

    We can use front-end code like jQuery to achieve it.

    Here is a demo for your reference.

    The following class is created to hold the data.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace SharePointFarmSolutionDev
    {
        public class Customer
        {
            public string CustomerId { get; set; }
            public string ContactName { get; set; }
            public string City { get; set; }
            public string Country { get; set; }
            public string PostalCode { get; set; }
            public string Phone { get; set; }
            public string Fax { get; set; }
        }
    }
    

    Full code of my aspx.cs file.

    using System;
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using System.Web.Services;
    using System.Collections.Generic;
    
    namespace SharePointFarmSolutionDev.Layouts.SharePointFarmSolutionDev
    {
        public partial class MyApplicationPage2 : LayoutsPageBase
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<Customer> customers = new List<Customer>();
                customers.Add(new Customer());
                rptCustomers.DataSource = customers;
                rptCustomers.DataBind();
            }
    
            [WebMethod]
            public static List<Customer> GetCustomers()
            {
                
                List<Customer> customers = new List<Customer>();
    
                Customer customer01 = new Customer();
                customer01.CustomerId = "1";
                customer01.ContactName = "Mike";
                customer01.City = "New York";
                customer01.Country = "USA";
                customer01.PostalCode = "IS-7";
                customer01.Phone = "911";
                customer01.Fax = "911911";
    
                Customer customer02 = new Customer();
                customer02.CustomerId = "2";
                customer02.ContactName = "Divid";
                customer02.City = "Tokyo";
                customer02.Country = "Japan";
                customer02.PostalCode = "FV215B(183)";
                customer02.Phone = "110";
                customer02.Fax = "110110";
    
                customers.Add(customer01);
                customers.Add(customer02);
                return customers;               
                
            }        
        }
    }
    

    Full code of my aspx file.

    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyApplicationPage2.aspx.cs" Inherits="SharePointFarmSolutionDev.Layouts.SharePointFarmSolutionDev.MyApplicationPage2" DynamicMasterPageFile="~masterurl/default.master" %>
    
    <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    
    </asp:Content>
    
    <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "MyApplicationPage2.aspx/GetCustomers",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
    
            function OnSuccess(response) {
                var table = $("#dvCustomers table").eq(0).clone(true);
                var customers = response.d;
                $("#dvCustomers table").eq(0).remove();
                $(customers).each(function () {
                    $(".name", table).html(this.ContactName);
                    $(".city", table).html(this.City);
                    $(".postal", table).html(this.PostalCode);
                    $(".country", table).html(this.Country);
                    $(".phone", table).html(this.Phone);
                    $(".fax", table).html(this.Fax);
                    $("#dvCustomers").append(table).append("<br />");
                    table = $("#dvCustomers table").eq(0).clone(true);
                });
            }
        </script>
    
    
       <div id="dvCustomers">
        <asp:Repeater ID="rptCustomers" runat="server">
            <ItemTemplate>
                    <table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
                    <tr>
                        <td>
                            <b><u><span class="name">
                                <%# Eval("ContactName") %></span></u></b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>City: </b><span class="city"><%# Eval("City") %></span><br />
                            <b>Postal Code: </b><span class="postal"><%# Eval("PostalCode") %></span><br />
                            <b>Country: </b><span class="country"><%# Eval("Country")%></span><br />
                            <b>Phone: </b><span class="phone"><%# Eval("Phone")%></span><br />
                            <b>Fax: </b><span class="fax"><%# Eval("Fax")%></span><br />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:Repeater>
       </div> 
    </asp:Content>
    
    <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    Application Page
    </asp:Content>
    
    <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
    My Application Page
    </asp:Content>
    

    Screenshot of result.

    Best regards,

    Lee Liu


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, December 11, 2017 8:47 AM
  • Hi,

    I am checking to see how things are going there on this issue.

    Best regards,

    Lee Liu


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, December 19, 2017 9:07 AM