ASP.Net: How to add rows to a repeater using DOM/Javascript?

Question

Hi Guys,

I know that the asp.net repeater doesnt have a Client side object model, and we are stuck with improving the performance of many pages which have repeater/gridview with the functionality of adding rows to them by server-side code.

We have used updatepanels to ajaxify the functionality adding the rows to the repeater/gridview, but the time it takes for the server trip and rendering back on the browser is not acceptable.

Is there some way in which this can be done on the clientside to improve the performance of adding rows to the repeater/gridview. We are using Asp.net 2.0

Answer 1

UpdatePanels still execute a full page postback, then simply update whatever content is inside the panel. That's where your slowdown is coming from.

As for using AJAX to speed things up, you'll want to use direct AJAX calls to request only the data that you need. You can do this with ASP.NET AJAX.

In the page_load event handler, register your AJAX. (VB.NET)

Ajax.Utility.RegisterTypeForAJAX(GetType(ThisPageClass))

Then, create a function that will be accessible by AJAX, like so:

<Ajax.AjaxMethod()> _
Public Function GetNewRows() As String
    ''//do stuff
    Return jsonObj
End Function

Then, on the client side, you can call it like so:

ThisPageClass.GetNewRows(someCallbackFunction);

function someCallbackFunction(result) {
    var json = ParseJSON(result.value);
    for(var i=0; i<json.length; i++) {
        // do whatever
    }
}

You just have to plug in the holes!

Answer 2

I have found out that the Repeater control doesn't have a DOM which can be used to do client side operations like adding of rows and stuff, the only easy way out(due to some constraints) i had was to use the GridView control instead and then use its DOM and that's what i finally did.