by Matt Brailsford, posted on Dec 6, 2012

Heads Up!

This article is several years old now, and much has happened since then, so please keep that in mind while reading it.

I'm sure we all know the joys of paging content, usually entailing reloading the page and passing a "page" querystring parameter through to say which page of content to load next. It works, but it's just not as sexy as an ajax one, but then you are talking about a whole heap load more work. Well, not with Umbraco and the use of altTemplates.

Step 1: Setup regular old paging

So to start with, just create the normal querystring based paged content. This will be our fallback, so if people don't have javascript enabled, our paged content will still work. Did I mention it was unobtrusive? no? oh, well, it is :)

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

As we are going to want to get a handle on the paged content block via javascript, wrap your paged content Macro with a html element and set its ID to something memorable.

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>

MainTemplate.master

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>

AjaxTemplate.master

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).

<script type="text/javascript">
    
	$(function(){

		$("#page-content").on("click", ".pager a", function(e){
			e.preventDefault();
			var ajaxUrl = $(this).attr("href") + "&altTemplate=ajaxTemplate";
			$("#page-content").load(ajaxUrl);
		});

	});

</script>

script.js

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 Brailsford

Matt is on Twitter as @mattbrailsford