Trying to get the MvcPaging working in Ajax mode, but it's not cooperating! It works, but does a full GET instead of an Ajax call. When I step into the controller code Request.IsAjaxRequest() is false, indicating it's not working correctly. Below is my razor view and the controller code:
@using MvcPaging
@model IPagedList<PracWare.Net.patientnote>
@Scripts.Render("~/bundles/jquery")
<link href="~/Content/paging.css" rel="stylesheet" />
<link href="~/Content/Bootstrap2.3.1.css" rel="stylesheet" />
<div id="notes-list">
<table width="98%">
<tr><th>Date</th><th>Notes</th></tr>
@foreach (var note in Model)
{
<tr><td>@note.dateTime</td><td>@note.notes</td></tr>
}
</table>
<div id="paging-control">
@Html.Raw(Ajax.Pager(
new Options
{
PageSize = 5,
TotalItemCount = Model.TotalItemCount,
CurrentPage = Model.PageNumber,
ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous", Page = "P" },
ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
TooltipTitles = new TooltipTitles() { Next = "Next page", Previous = "Previous page", Page = "Go to page {0}.", First = "Go To First Page", Last = "Go To Last Page" },
Size = Size.normal,
Alignment = Alignment.centered,
IsShowControls = true,
IsShowFirstLast = true,
},
new AjaxOptions
{
UpdateTargetId = "notes-list",
OnBegin = "beginPaging",
OnSuccess = "successPaging",
OnFailure = "failurePaging"
}, new { controller = "Patient", action = "JqAjaxOrders"}))
</div>
</div>
And the controller code:
public ActionResult JqAjaxOrders(int? page)
{
var db = new PracwareEntities();
var orders = db.patientnotes.OrderBy(o=>o.dateTime).ToPagedList(page ?? 1, 5);
if (Request.IsAjaxRequest())
return PartialView("JqAjaxOrders", orders);
return View(orders);
}
I took this code straight from the MvcPagingDemo solution, which does do the Ajax call correctly. What might I have missed?
I'm sure MvcPaging is great, but I spent 2 hours bashing my head against the screen and couldn't get it to work, so I wrote my own implementation... which took less than 2 hours!
Controller code:
[Authorize]
public ActionResult ListNotes(int patientId, int? page = 1)
{
const int pageSize = 5;
var db = new PracwareEntities();
var totalNotes = db.patientnotes.Count(n => n.patientDbId == patientId);
var notes = db.patientnotes.OrderBy(o => o.dateTime).Skip((int)((page - 1) * pageSize)).Take(pageSize).Where(n => n.patientDbId == patientId).ToList();
ViewBag.PageCount = GetPageCount(totalNotes, pageSize);
ViewBag.CurrentPage = page;
ViewBag.patientId = patientId;
if (Request.IsAjaxRequest())
return PartialView("ListNotes", notes);
return View(notes);
}
private static int GetPageCount(int notesCount, int pageSize)
{
var x = (double) notesCount/pageSize;
if (x - (int) x > 0)
return (notesCount/pageSize) + 1;
return (notesCount/pageSize);
}
Razor view:
@if (ViewBag.PageCount > 1)
{
<div id="paging-control" class="pagination ">
<ul>
<li class="first">
@Html.ActionLink("First", "ListNotes", "Patient",
new {ViewBag.patientId, Page = "1" }, new {@Class="update-notes-list "} )
</li>
@for (var i = 1; i <= ViewBag.PageCount; i++)
{
<li @if (ViewBag.CurrentPage == i) {
<text> class="active"</text>
} >
@Html.ActionLink(i.ToString(), "ListNotes", "Patient",
new {ViewBag.patientId, Page = i.ToString() }, new {@Class="update-notes-list"})
</li>
}
<li class="last">
@Html.ActionLink("Last", "ListNotes", "Patient",
new { ViewBag.patientId, Page = ViewBag.PageCount }, new {@Class="update-notes-list "} )
</li>
</ul>
</div>
}
Not elegant, but when deadlines are approaching, a working solution is better than no solution!