Paging with AJAX WCF and LINQ
These days, it seems that every web site needs to have some use of gratuitous AJAX in order to stay on the bleeding edge. Since we didn't have any here yet, I thought I would throw some in for good measure. I liked the lazy loading of records instead of paging found on some sites, including the Google RSS reader and thought I would see what it would take to add something like that here.
If you're not familiar with this paging option, instead of loading a new page of records each time the user gets to the end, they simply add to the end of the list via an AJAX (Asynchronous JavaScript and XML) call to get more records. My implementation is not nearly as fancy, but it gets the job done.
To try out the AJAX implementation we're going to discuss, browse to the AjaxPosts.aspx page. The implementation consists of three parts:
- The web page that hosts the AJAX ScriptManager and provides the foundation of the page itself.
- A JavaScript file which performs the client side paging functionality.
- A WCF service which fetches the data and formats it for the client.
We'll start with the hosting page. The page itself is very simple. We'll make it easy to handle the formatting by continuing to use the same MasterPage that we use elsewhere on this site. That makes the content section rather concise.
The content section includes a ScriptManager which serves to push the AJAX bits down to the client. It also contains knowledge of our service using the asp:ServiceReference tag, and the client side JavaScript using the asp:ScriptReference tag. In addition, we include a blank div element which we will use to insert the content fetched from our service, and a button which is used to initiate requests for more posts from our service.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AjaxPosts.aspx.vb"
Inherits="AjaxPosts" MasterPageFile="~/Blog.master" Title="ThinqLinq" %> <%@ Register
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <asp:Content ID="content" runat="server" ContentPlaceHolderID="ContentPlaceHolder1"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/API/AjaxServices.svc" /> </Services> <Scripts> <asp:ScriptReference Path="~/AjaxServiceClient.js" /> </Scripts> </asp:ScriptManager> <div id="Posts"> </div> <button id="More" onclick="FetchPosts(); return false;">More Posts</button> </asp:Content>
With the plumbing out of the way, we can start to focus on the meat of the AJAX implementation. First off, we need to have a way to access our data. My first inclination was to use ADO.Net Data Services to serve up dynamic data from our LINQ sources. However in this case, I decided that the functionality was quite limited in scope and a dedicated service would be the better option. A dedicated service would also offer some additional level of caching should scalability become an issue on the site. Also, I wasn't sure my JavaScript skills would be quite suited to doing the necessary client side string parsing that would be necessary to build dynamic HTML content from the raw data. Thus in this case I decided to use a more standard WCF service.
Our WCF service takes as parameters the page number that we want to retrieve and the number of records that make up a page. We'll have our JavaScript pass these values. In response, it will send back a string containing the already formatted HTML that we will display. First we need to set up our class and method and decorate them with the necessary WCF attributes. When adding services that you want to AJAX enable, make sure to use the "AJAX Enabled WCF Service" template from the Add New Item dialog box rather than the standard "WCF Service". This will set up the web.config differently to allow the service to expose a way to access a JavaScript client proxy. (Thanks goes to Wally for helping me figure that one out. For our service, we'll put it in the ThinqLinq namespace and call it AjaxServices. It will have one service method (indicated by the OperationContract attribute) called LoadFormattedPosts.
Namespace ThinqLinq
<ServiceContract(Namespace:="ThinqLinq")> _
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> _
Public Class AjaxServices
<OperationContract()> _
Public Function LoadFormattedPosts(ByVal page As Integer, ByVal pagesize As Integer) As String
End Function
End Class
End Namespace
Inside the LoadFormattedPosts we'll get to use our LINQy goodness. In this case, we know that we are going to need our posts with their associated categories and comments. As an optimization, we'll add the appropriate load options to fetch all of those at the same time. We'll also include the appropriate Skip and Take methods to do the paging. Our resulting LINQ to SQL query is fairly standard.
Using dc As New LinqBlogDataContext
Dim LoadOptions As New DataLoadOptions
LoadOptions.LoadWith(Of PostItem)(Function(p) p.Comments)
LoadOptions.LoadWith(Of PostItem)(Function(p) p.CategoryPosts)
LoadOptions.LoadWith(Of CategoryPost)(Function(cp) cp.Category)
dc.LoadOptions = LoadOptions
Dim posts = From p In dc.PostItems _
Order By p.PublicationDate Descending _
Skip pagesize * page _
Take pagesize
Dim response As String = FormatPosts(posts)
Return HttpUtility.HtmlDecode(response)
End Using
This query would be fine if we only wanted to send the raw data back to the AJAX client. However, we'll take an extra step in this implementation and do the formatting in a separate FormatPosts method. We'll actually add a separate method to format the Categories as well.
Private Function FormatPosts(ByVal posts As IEnumerable(Of PostItem)) As String
Dim response = _
From p In posts _
Select val = <div class="post">
<h2>
<a href=<%= "Default/" & p.TitleUrlRewrite %>><%= p.Title %></a>
</h2>
<div class="story"><%= p.Description %></div>
<div class="meta">Posted on <%= p.PublicationDate %> -
<a href=<%= "Default/" & p.TitleUrlRewrite %>>
Comments (<%= p.Comments.Where(Function(c) c.IsApproved).Count() %>)</a>
<br/>
<%= If(p.CategoryPosts.Count > 0, _ "Categories:" & FormatCategories(p), _ "") %>
</div>
</div>.ToString() _
Select val Return "<div class='posts'>" & String.Join("", response.ToArray) & "</div>"
End Function
Private Function FormatCategories(ByVal post As PostItem) As String
If post.CategoryPosts.Count > 0 Then
Dim response = _
From catPost In post.CategoryPosts _
Select val = <span>
<a href=<%= "http://www.ThinqLinq.com/Default.aspx?CategoryId=" & _ catPost.Category.CategoryId %>>
<%= catPost.Category.Description.Trim %></a>
</span>.ToString()
Return String.Join(", ", response.ToArray())
Else
Return ""
End If
End Function
I'm not going to take the time to explain all of the LINQ to XML implementation here. I've discussed LINQ to XML in past posts. I do want to point out here a couple extra steps that need to be taken with this implementation.
First, we need to be careful in cases where we have posts without associated comments or categories. If we don't, we will run into issues with null results and the query will fail. Second, we have to watch how and when we are casting to strings and arrays. The easiest way to make sure that we are casting properly is to make sure you have Option Strict turned On at the file or project level.
Now that we have our service set-up, we can write the client side JavaScript code. Because we're using the AJAX ScriptManager and an AJAX enabled WCF service, we don't have to write any fancy plumbing code to access this service. To test this, we can browse to the service passing a /js or /jsdebug flag as follows: http://ThinqLinq.com/Api/AjaxServices.svc/js. That leaves just the task of writing the client side to access the service and place it in the AjaxServiceClient.js file for the ScriptManager to find.
var svcProxy;
var currentPage;
function pageLoad() {
currentPage = 0;
svcProxy = new ThinqLinq.AjaxServices();
svcProxy.set_defaultSucceededCallback(SucceededCallback);
FetchPosts();
}
function FetchPosts() {
svcProxy.LoadFormattedPosts(currentPage, 5);
}
function SucceededCallback(result) {
var postTag = document.getElementById("Posts");
postTag.innerHTML += result;
currentPage += 1;
}
if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();In this JavaScript, we set up two global variables: currentPage to manage the paging functionality and svcProxy to act as the instance of the proxy that accesses our service. In the pageLoad function, we initialize these values. Once initialized, we then set the asynchronous callback function for when values are retrieved. Finally, we invoke the method to fetch the posts for the first time that the page is loaded.
To fetch the posts, we simply call the LoadFormattedPosts method of our proxy which sends the request to our WCF service. Because this is performed asynchronously, we will just fire the request and let the callback handle the response.
In the SucceededCallback method, we grab the return value from the WCF service in the result parameter. Once we have that, we get a reference to the placeholder "Posts" div in the AjaxPosts.aspx document. To add the new results to the client, we concatenate the current contents with the new result value using +=. Finally, we increment the currentPage number so that the next request will fetch the next page of posts.
That's it. We're done. Jump over to http://ThinqLinq.com/AjaxPosts.aspx to see the result in action. There are a number of things that can be improved on this implementation, but it is a start. One definite drawback on this implementation is that it is not SEO friendly. You can see this by viewing the source to the resulting page. Notice that none of the post contents are included in the source.
I don't claim to be a JavaScript or AJAX expert and I'm sure there are other more elegant solutions. I'd love to learn from your experience, so feel free to post your recommendations and we'll see what we can do to improve this.