umbraco clientside pagination and ordering - ajax

Question

I am working on an umbraco project, which has been a very steep learning curve, there doesn't seem to be to much good documentation around for v7 and mvc in particular.
I have built out a simple list of items with pagination and ordering using ling with query strings. Not particularly nice. I want to work out a way of making all of this clientside and what the options are and best practices are within umbraco.
Any help gratefully appreciated.
Thanks in advance
Richard

Answer 1

There are many ways to do this, here is a simple one. In summary, I reccomend using a "Surface Controller" called by ajax and then manipulate your DOM accordingly.
Here is a sample Surface Controller (I have a bunch of useless usings there...):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Globalization;
using System.Net;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Configuration;
using System.IO;
using Newtonsoft.Json;
using System.Text;
using Umbraco.Web; // AncestorOrSelf
using Umbraco.Core; // FindIndex
using Umbraco.Core.Models;
namespace MyFunWebsite.SurfaceControllers
{
public class MyFunSCController : Umbraco.Web.Mvc.SurfaceController
{
[System.Web.Mvc.HttpPost]
public ActionResult GetPage() {
// Pick up params
var pageNumber = -1;
if (!int.TryParse(Request.Params["pageNumber"], out pageNumber))
{
pageNumber = -1;
}
var parentNodeId = -1;
if (!int.TryParse(Request.Params["parentNodeId"], out parentNodeId))
{
parentNodeId = -1;
}
if (parentNodeId == -1 || pageNumber == -1)
{
return Content("no - invalid parentNodeId or pageNumber");
}
var itemsPerPage = 10;
var parentNode = Umbraco.TypedContent(parentNodeId);
var nodes = parentNode.Children.Skip(itemsPerPage * pageNumber).Take(itemsPerPage);
ViewBag.specialViewBagInformation = "Fun with Umbraco";
ViewBag.nodes = nodes;
return PartialView("Partials/MyListingOfNodes");
}
}
}
Then that partial view goes like this:
#using Umbraco.Core;
#{
var nodes = (IEnumerable<IPublishedContent>)ViewBag.nodes;
foreach (var node in nodes) {
<div>title: #node.AsDynamic().title</div>
}
}
Now your normal template, the one seem to already have can also call this partial. That template has to display page buttons also based on counts and items per page and stuff. But then basically, when a page button runs, you run some javascript similar to this:
function GetPage(pageNumber, parendNodeId) {
$.ajax({
type: "POST",
url: "/Umbraco/Surface/MyFunSCController/GetPage/",
data: "pageNumber=" + pageNumber + "&parentNodeId=" + parentNodeId,
cache: false,
dataType: "text",
success: function (result) {
$("#myFunTable").html(result);
},
error: function (result) {
// console.log("Ajax error: " + result);
}
});
}
Notice the url for the ajax post "/Umbraco/Surface/", controllers you create that extend "Umbraco.Web.Mvc.SurfaceController" will be accessible there. Very convinient for ajax calls. This javascript will prevent your page from requiring to reload, keeping things clientside but still using the serverside to get the content you want. From here you can add a lot of functionnality and validations.
Here is a page button:
Page 3
Hope this helps you work with Umbraco, I think it's a very powerful product.