ASP.NET: Bind Repeater using JQuery?

Question

I have a Repeater control that I bind server-side. It repeats a series of divs, and does so with no problem. I have some buttons that I use to sort the repeater (newest, highest ranked, random) and this works the way it should.

I would like to improve my user experience by making the buttons sort the divs using ajax/jquery somehow so that there is no page postback and the user does not lose his/her spot on the page.

Is there a way to use jquery to access server-side code like this, or use ajax to re-bind a server-side control?

Thanks... if I need to list more details, please let me know!

EDIT I'm aware of UpdatePanels, but I would prefer not to use them if I don't have to.

Answer 1

Using an updatePanel or a jquery Ajax postback are the same thing essentially. Both will ask your code to fetch the new query, then make your control render itself, and then feed the HTML back to the client as a partial page render, and then insert the content in place of the old content in the same DOM location.

It is considerably harder to make JQuery and ASP.NET talk to each other this way due to the nature of web controls and their lifecycle that determines when they render. An updatePanel knows how to call all this, maintain proper viewstate and return the result to the correct location.

In this case, don't make things any harder on yourself, use the updatePanel unless you have some very specific reason not to.

EDIT: If you're having JQuery issues with update panels it is probably due to the fact that new DOM nodes being created. JQuery has the live event to handle this. It will notice when new DOM elements are created and match them against your selector even after the document ready.

Answer 2

It's relatively easy.

1. Move your repeater to a separate custom control, let's say MyControl. Now repeater in your page becomes uc1:MyControl.

2. Wrap MyControl into a div:

   <div id="mydiv">
     <uc1:MyControl ID="MyControl1" runat="server" />
   </div>
   

3. Create a new page, pgMyControl.aspx, that contains MyControl only.

4. On your main page, add jQuery handlers to your sort links. Use load method to dynamically replace div contents:

   $('#link_sort_random').click(function()
   {
     $("#mydiv").load("pgMyControl.aspx&sort=random");
   }
   

5. Use QueryStringParameter in datasource inside MyControl to change order. Or use Request.QueryString in code-behind file.

Answer 3

Have you considered moving the Repeater's functionality to the client-side?

Doing it that way, functionality like paging and sorting is not very difficult to add. In fact, you can lean on the framework pretty heavily by using ADO.NET data services as the service layer.

Answer 4

Maybe it's an OT, but you can consider to change the way you bind even the client and the server control, using XSLT transformation instead od the classics server controls. You can find an example here (sorry, it's in italian...).