Populate ASP.Net Repeater by binding DataSet Client Side using jQuery AJAX

HTML Markup

<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>

Namespaces

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Services;

C#

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        this.BindDummyItem();

    }

}

 

private void BindDummyItem()

{

    DataTable dummy = new DataTable();

    dummy.Columns.Add("CustomerID");

    dummy.Columns.Add("ContactName");

    dummy.Columns.Add("Country");

    dummy.Columns.Add("City");

    dummy.Columns.Add("PostalCode");

    dummy.Columns.Add("Phone");

    dummy.Columns.Add("Fax");

    dummy.Rows.Add();

    rptCustomers.DataSource = dummy;

    rptCustomers.DataBind();

}

WebMethod to handle jQuery AJAX calls

[WebMethod]

public static string GetCustomers()

{

    string query = "SELECT TOP 10 * FROM Customers";

    SqlCommand cmd = new SqlCommand(query);

    return GetData(cmd).GetXml();

}

 

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;

            }

        }

    }

}

Client Side functionality

<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: "Default.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 = $("#dvCustomers table").eq(0).clone(true);

        $("#dvCustomers table").eq(0).remove();

        customers.each(function () {

            var customer = $(this);

            $(".name", table).html(customer.find("ContactName").text());

            $(".city", table).html(customer.find("City").text());

            $(".postal", table).html(customer.find("PostalCode").text());

            $(".country", table).html(customer.find("Country").text());

            $(".phone", table).html(customer.find("Phone").text());

            $(".fax", table).html(customer.find("Fax").text());

            $("#dvCustomers").append(table).append("<br />");

            table = $("#dvCustomers table").eq(0).clone(true);

        });

    }

</script>

Screenshot

Source : http://www.aspsnippets.com/