Paginate data in view without repeating sql queries using ASP.NET mvc - ajax

Question

I have a large dataset from a stored procedure that I want to display in pages on an ASP.NET webpage. I can't make demands of the DBAs, so asking them to support pagination on their end isn't possible. The data is currently being displayed in a widget that's being populate by an ajax call to an action in my controller. I want the user to be able to change the page and page size without the stored procedure firing again, but I don't know how to pass the data/model from the getData call to the paginateData call.
Ajax:
require(["jquery", "ajax"], function ($, ajax) {
getData: function () {
ajax.html({
url: Router.action("Widgets", "GetData"),
interval: 3000,
maxAttempts: 20,
cache: false,
success: function (response) {
$('#view-dataList', $context).replaceWith(response);
}
});
}
paginateData: function () {
ajax.html({
url: Router.action("Widgets", "PaginateData", {pageNumber: pageNumber, pageSize: pageSize, data: ??????}),
interval: 3000,
maxAttempts: 20,
cache: false,
success: function (response) {
$('#view-dataList', $context).replaceWith(response);
}
});
}
}
Widgets Controller:
[Route("GetData")]
public ActionResult GetData()
{
var model = new DataModel();
var service = new SqlService();
var customerID = Identity.Current.OptaviaID.ToString();
model.RecentActivities = service.LoadData();
return PartialView(model);
}
[Route("PaginateData")]
public ActionResult PaginateData(int pageNumber, int pageSize, IList<Data> data)
{
var model = new DataModel();
var page = model.page.Skip((pageNumber - 1) * pageSize).Take(pageSize);
model.Data = page;
return PartialView(model);
}
What is a good way to design this?

Answer 1

I ended up changing the return values of GetData and PaginateData in the controller to return the model in json to be stored in the javascript withing the ajax success function and added a new method DisplayData to return the unserialized PartialView. I changed PaginateData and DisplayData to HttpPost calls accepting the model that we stored in javascript.
Javascript (notice that getdata, paginate, and display are tethered together via success):
require(["jquery", "ajax"], function ($, ajax) {
var currentData = null;
var currentPage = null;
var actions = {
getData: function () {
ajax.html({
url: Router.action("Widgets", "GetData"),
interval: 3000,
maxAttempts: 20,
cache: false,
success: function (response) {
currentData = response;
actions.paginateData();
}
});
},
paginateData: function () {
ajax.html({
url: Router.action("Widgets", "DisplayData"),
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
interval: 3000,
maxAttempts: 20,
cache: false,
data: JSON.stringify({ data: currentData, startIndex: 0, pageSize: 10 }),
success: function (response) {
currentPage = response,
actions.displayData();
}
});
},
displayData: function () {
ajax.html({
url: Router.action("Widgets", "PaginateData"),
type: 'POST',
contentType: 'application/json; charset=utf-8',
interval: 3000,
maxAttempts: 20,
cache: false,
data: JSON.stringify(currentPage),
success: function (response) {
$('#view-dataList', $context).replaceWith(response);
}
});
}
}
}
Controller:
[Route("GetData")]
public ActionResult GetData()
{
var model = new DataModel();
var service = new SqlService();
var customerID = Identity.Current.OptaviaID.ToString();
model.Data = service.LoadData();
Content(JsonConvert.SerializeObject(model), "application/json");
}
[HttpPost]
[Route("PaginateData")]
public ActionResult PaginateData(DataModel data, int pageNumber, int pageSize)
{
data.Data = data.Data.Skip((pageNumber - 1) * pageSize).Take(pageSize);
Content(JsonConvert.SerializeObject(data), "application/json");
}
[HttpPost]
[Route("DisplayData")]
public ActionResult DisplayData(DataModel data)
{
return PartialView(data);
}
Now in my javascript I can call getData on page load to get the data, get the default page and count, and display it, but I can also call paginateData when the user changes the page or changes the page size to get the new page and display it without querying the database again which answers this question.