Step 1: Setup regular old paging
I won't go in to detail on how to do this as there are plenty of examples, but all I will recommend is to encapsulate your paged content within an Umbraco Macro as we are going to reuse it again in a moment.
Step 2: Wrap your paged content area
You should now have a main template looking something along these lines:
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> <html> <head>...</head> <body> ... <div id="page-content"> <umbraco:Macro Alias="PagedContent" runat="server"> </div> ... </body> </html> </asp:Content>
Step 3: Create an altTemplate
Next up, we are going to make an altTemplate. This template needs to be really clean and should simply contain your paged content macro. THAT'S IT.
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> <umbraco:Macro Alias="PagedContent" runat="server"> </asp:Content>
Step 4: Wire it all together
The next and final step is to wire it all together. What we are going to do then is use a little bit of jQuery to tell all the pager links (I've assumed you've wrapped these in a div with the class of ".pager") within the paged content to, instead of reloading the whole page, just reload the paged content code block via ajax using the altTemplate (remember, this just contains the html for paged content block, nothing else).
And we are done. When you now click on the pager links, a request will be made via ajax to get the contents of the altTemplate, which, when it returns, will replace the previous paged content block with the html in the response.
You could of course fancy it up and show a nice progress loader while it's loading, but I'll leave that to you to figure out :)
So there we have it, super simple, reusable, unobtrusive ajax paging using altTemplates.
Merry Christmas everyone.
Matt is on Twitter as @mattbrailsford