Bind (Populate) Repeater without Table structure using jQuery AJAX in ASP.Net

Hi anura02,

Refer below sample code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "CS.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 xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var customers = xml.find("Table");
        var table = $("#divCustomers").eq(0).clone(true);
        $("#divCustomers").eq(0).remove();
        $(customers).each(function () {
            var customer = $(this);
            $(".id", table).html(customer.find("CustomerId").text());
            $(".name", table).html(customer.find("Name").text());
            $(".country", table).html(customer.find("Country").text());
            $("#divRepeater").append(table);
            table = $("#divCustomers").eq(0).clone(true);
        });
    }
</script>
<div id="divRepeater">
    <asp:Repeater ID="rptCustomers" runat="server">
        <ItemTemplate>
            <div id="divCustomers">
                <b>Id: </b><span class="id">
                    <%# Eval("CustomerId")%></span><br />
                <b>Name: </b><span class="name">
                    <%# Eval("Name")%></span><br />
                <b>Country: </b><span class="country">
                    <%# Eval("Country")%></span><br />
                <hr />
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Namespaces

C#

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

VB.Net

Imports System.Web.Services
Imports System.Data.SqlClient
Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable customers = new DataTable();
        customers.Columns.AddRange(new DataColumn[] {
        new DataColumn("CustomerId"), new DataColumn("Name"),new DataColumn("Country") });
        customers.Rows.Add();
        rptCustomers.DataSource = customers;
        rptCustomers.DataBind();
    }
}

private static DataSet GetData(SqlCommand cmd)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;
            }
        }
    }
}

[WebMethod]
public static string GetCustomers()
{
    string query = "SELECT * FROM Customers";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim customers As DataTable = New DataTable()
        customers.Columns.AddRange(New DataColumn() {New DataColumn("CustomerId"), New DataColumn("Name"), New DataColumn("Country")})
        customers.Rows.Add()
        rptCustomers.DataSource = customers
        rptCustomers.DataBind()
    End If
End Sub

Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As DataSet = New DataSet()
                sda.Fill(ds)
                Return ds
            End Using
        End Using
    End Using
End Function

<WebMethod()>
Public Shared Function GetCustomers() As String
    Dim query As String = "SELECT * FROM Customers"
    Dim cmd As SqlCommand = New SqlCommand(query)
    Return GetData(cmd).GetXml()
End Function

Screenshot