Is it possible to get the HTML out of a DataList\Repeater using Ajax(Jquery)?

Question

Hi, I have a asp.net page with a repeater\datalist control on it. I bind this grid during page load and show the first 20 thumbnails of a photo album.

There can be multiple pages for which I have a pager 1 2 3. When user clicks the second page(2), I go and get the second set of album thumbnails and show.

Currently this is a postback and when I show 2nd page whole page gets refreshed.

Now is it even possible to use Ajax\jquery to get the second page of htmls with all thumbnails on it and render? This way the page never has a post back and I can avoid page refresh?

Answer 1

You have several options:

• asp:UpdatePanel for your repeater

Pros: Easy to do, just wrap your repeater with a asp:UpdatePanel control.

Cons: You will be sending a post back to the server with all the viewstate, the server runs the full page life-cycle and just retuns part of the page. Other cons here

• jQuery.load to insert just part of a page

Pros: Also very easy to implement, you would need to manage loading the correct page in you aspx page for a GET request (ie. adding ?page=2 to the query string and process that on the server side). After that you wrap the repeater in a div that you can identify on the client side and do a jQuery.load() (check the docs for it here)

Cons: you will still be sending a full page back to the client. Also if you rely on the viewstate for postbacks inside your DataList, this could screw it up.

• Pure Ajax call to get the data and render it back on the client

Pros: Optimum in terms of what gets sent back to the server and from the server to the client.

Cons: You would be replacing the DataList/Repeater with your own rendering/templating engine in the client side to make this work.

Answer 2

HTML 5 has the concept of inline image data without the href required to pull the bits with a separate request. Until v5 is here consider using jquery to GET your list of thumbnail urls given a page # as input. With very little jquery you can repaint what you're rendering with your repeater now with the lightest possible server roundtrips.

Another optimization to implement if you're concerned about multiple image GETs is to reference your image path using a subdomain (images.yoursite.com) to get the browser to pull your images in parallel with your primary page data. There's some odd rule that browsers use about using up to 2 concurrent threads for pulling page data but only if the sources are not located at the same root URL.