jqueryajaxpagination

Mvcpaging Ajax mode not working


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?


Solution

  • 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!