Bind Data to Repeater using Ajax

Question

Hi,

I want to Bind data to a Repeater on click of a particular Button.

I can do an ajax request via jQuery and call the method to bind the data, but on the page nothing is displayed.

This is the method I use to bind the data to the Repeater:

public void BindJobs()
{
    if (RptClientDetails.Items.Count != 0) return;
    RptClientDetails.DataSource = new JobBusiness().GetJobInfoClient(ClientId);
    RptClientDetails.DataBind();
    Response.Write("myresponse");
    Response.End();
}

The above method is successfully called and the data retrieved by GetJobInfoClient. This is my ajax call:

function BindJobs() {
    $.ajax({
        type: "POST",
        url: "Client/Default.aspx?action=bindJobs",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Do something interesting here.
        }
    });
}

Answer 1

You do realize that RptClientDetails is a server side control? When you are binding to it in your call to BindJobs it is binding but you are not returning the generated HTML.

You need to return the Repeater's HTML after it has been bound in your AJAX. Then in your success handler, inject the HTML into the place where you want the Repeater to be displayed.

I would recommend checking out Rick Strahl's post regarding how to do this:

jQuery and ASP.NET Article Part 2

The easiest way would be to drop the AJAX all together and use an UpdatePanel. Just wrap your Repeater and your Button with an UpdatePanel and the call will be handled by the framework and the new HTML will be injected for you. It's a little heavier than doing it the jQuery/AJAX method but it takes almost 0 code.

EG:

<!-- Your other controls -->
<asp:UpdatePanel ID="yourPanel" runat="server">
    <ContentTemplate>
        <!-- Your Repeater HERE -->
        <!-- Your Button HERE and server side make it call your bind -->
    </ContentTemplate>
</asp:UpdatePanel>
<!-- rest of your controls -->

EDIT:

If you want to render the control so that you can send it back in your response you can do:

// This will get your Repeaters rendered HTML
StringBuilder sb = new StringBuilder();
StringWriter tw = new StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(tw);
RptClientDetails.RenderControl(hw);
string yourReatersRenderedHtml = sb.ToString();

You could then return this string in the AJAX call and then use the success method to inject it into a div or some other place holder. Honestly, the UpdatePanel is far easier and I would recommend it if your looking for the easiest way to do this and are not really worried about the performance impact of using an UpdatePanel.

Answer 2

You should use an UpdatePanel instead of jQuery ajax.

Answer 3

You might want to give jqGrid a try, if your repeater is currently creating a list/table of data. It is very easy to set up, and plays nicely with ajax calls which return JSON (and probably other formats as well, like XML). In my experience, it results in better-performing and more maintainable code overall.