Implemet Paging on MVC3 with razor

I want to implement the Paging and Sorting functionality on MVC3 With Razor.

开发者_高级运维Is there any In build function for that? Or need to implement manually .

Anybody have any articles regarding this?

This is one of those answers that I hate, but your question leaves me to it

Did you ever Google It?

in my first attempt:

Efficient Paging with WebGrid Web Helper

public ActionResult Index(long parentObjectId, int parentObjectTypeId, int page = 0)
{
    var varialbe= someRepository.GetAll(parentObjectId, parentObjectTypeId);
    var paginated = new PaginatedSubList<someModel>(varialbe, page, ConfigRepository.PageSize, parentObjectId, parentObjectTypeId);

    if (Request.IsAjaxRequest())
    {
        return PartialView(paginated );
    }

    return View(paginated);
}

and then

   @Ajax.ActionLink("Next >>", "Index",
                 new { page = Model.PageIndex + 1, parentObjectId = Model.ParentObjectId, parentObjectTypeId = Model.ParentObjectTypeId },
                 new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "someList", LoadingElementId = "loading-div" })

    @Ajax.ActionLink("<< Previous", "Index",
             new { page = Model.PageIndex - 1, parentObjectId = Model.ParentObjectId, parentObjectTypeId = Model.ParentObjectTypeId },
             new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "someList", LoadingElementId = "loading-div" })

and PaginatedSubList

public class PaginatedSubList<T> : PaginatedList<T>
        {
            #region Custom Properties

            public long ParentObjectId { get; set; }
            public int ParentObjectTypeId { get; set; }

            #endregion

            public PaginatedSubList(IQueryable<T> source, int pageIndex, int pageSize, long parentObjectId, int parentObjectTypeId)
                : base(source, pageIndex, pageSize)
            {
                ParentObjectId = parentObjectId;
                ParentObjectTypeId = parentObjectTypeId;
            }
        }

public ActionResult Index()
 {
  try
   {

      ViewBag.SiteMaster = objReportManager.GetSites();
      ViewBag.Status = objReportManager.GetTransactionStatus();
      logger.Info("ReconController : Index method end and return view");
      return View();
   }
      catch (Exception ex)
        {
            logger.Error(" ReportsController : Index method  error", ex);
            throw;
        }
    }

    public ActionResult GetReconReport(string StartDate, string EndDate, string TransactionStatus, string SiteStatus, string SiteOrderID, string TransactionId, string SiteCode, string page, string rows, string sord, string sidx)
    {
        try
        {
            logger.Info(" ReconController : GetReconReport method started ");
            int totalCount = 0;

            List<ReconReportTransactionInfo> dataList = objReconReportMgr.ReadReconReport(StartDate, EndDate, TransactionStatus, SiteStatus, SiteOrderID, TransactionId, SiteCode,
                  sidx, sord, Convert.ToInt32(page ?? "1") - 1, Convert.ToInt32(rows ?? "1"), WebSession.UserID, ref totalCount);

   logger.DebugFormat("[" + dataList.Count + "] ReconController : GetReconReport method and Total {0} records found for ReconReport.");
   var data = new
      {
        total = (totalCount + Convert.ToInt32(rows) - 1) / Convert.ToInt32(rows),
        page = page.ConvertTo<int>(1),
        records = totalCount,
        rows = (from recon in dataList
            select new
              {
              id = recon.TransactionID,
              cell = new string[] {
              recon.TransactionStatus,
              recon.SiteStatus,
              Convert.ToString(recon.TransactionID),
              recon.ReferenceNo,
              recon.SiteOrderID,
              recon.SiteCode,
              recon.TransactionStatusImage,
              recon.SiteStatusImage,
              Convert.ToString(recon.DateCreated)
          }
          }
         ).ToArray()

        };
       logger.Info(" ReconController : GetReconReport method end and return json ");
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            logger.Error(" ReconController : GetReconReport method  error", ex);
            throw;
        }
    }

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

    //REPORTS GRID
    $(document).ready(function () {
       $.jgrid.formatter.integer = { thousandsSeparator: "" };
       $("#btnFilter").button();
       $("#dataList").jqGrid
        ({

         this is url to set controller/action
         **// url: "/Recon/GetReconReport",**
         datatype: "json",
         colNames: ['Transaction Status', 'Site Status', 'Transaction ID', 'Reference No', 'Site Order ID', 'Site Code', 'TransactionStatusImage', 'SiteStatusImage', 'Transaction Date', 'Actions'],
         colModel: [{ name: 'TransactionStatus', index: 'TransactionStatus', width: 30, search: false, align: 'center' },
                    { name: 'SiteStatus', index: 'SiteStatus', width: 30, search: false, align: 'center' },
                    { name: 'TransactionID', index: 'TransactionID', width: 35, align: 'center' },
                    { name: 'ReferenceNo', index: 'ReferenceNo', width: 50, hidden: false, search: false },
                    { name: 'SiteOrderID', index: 'SiteOrderID', width: 50, hidden: false, search: false },
                    { name: 'SiteCode', index: 'SiteCode', width: 20, search: false },
                    { name: 'TransactionStatusImage', index: 'TransactionStatusImage', width: 35, search: false, hidden: true },
                    { name: 'SiteStatusImage', index: 'SiteStatusImage', width: 35, search: false, align: 'center', hidden: true },
                    { name: 'DateCreated', index: 'DateCreated', width: 40, search: false, sortable: true, formatter: "datetime", formatoptions: { srcformat: "d/m/Y H:i A", newformat: "ShortDate"} },
                    { name: 'Actions', index: 'Actions', width: 20, align: 'center', hidden: true, search: false, sortable: false}],
         rowNum: 20,
         rowList: [10, 20, 50],
         width: 1000,
         rownumbers: true,
         rownumWidth: 30,
         multiselect: false,
         viewrecords: true,
         height: 400,
         scrolling: true,
         shrinktofit: true,
         sortname: 'DateCreated',
         sortorder: "desc",
         pager: '#pager',
         subGrid: true,
         caption: "Reconciliation Report",
         subGridRowExpanded: function (subgrid_id, row_id) {

             var subgrid_table_id;
             subgrid_table_id = subgrid_id + "_t";
             $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");

             jQuery("#" + subgrid_table_id).jqGrid({
                 url: "Recon/GetTransactioPayment?TransactionID=" + row_id,
                 datatype: "json",
                 colNames: ['Payment Status', 'Processor Status', 'Transaction ID', 'Payment ID', 'Payment Mode', 'Processor', 'PaymentStatusImage', 'ProcessorStatusImage', 'Payment Date'],
                 colModel: [{ name: "PaymentStatus", index: "PaymentStatus", width: 120, align: 'center', sortable: false },
                            { name: "ProcessorStatus", index: "ProcessorStatus", width: 120, align: 'center', sortable: false },
                            { name: "TransactionID", index: "TransactionID", width: 60, hidden: true },
                            { name: "PaymentID", index: "PaymentID", width: 100, key: true },
                            { name: "PaymentMode", index: "PaymentMode", width: 100 },
                            { name: "Processor", index: "Processor", width: 200 },
                            { name: "PaymentStatusImage", index: "PaymentStatusImage", hidden: true },
                            { name: "ProcessorStatusImage", index: "ProcessorStatusImage", hidden: true },
                            { name: "DateCreated", index: "DateCreated", width: 140 }
                      ],
                 sortname: 'DateCreated',
                 sortorder: "desc",
                 height: '100%',
                 width: 1100,![enter image description here][1]
                 gridComplete: function () {

                     var gridObj = jQuery("#" + subgrid_table_id);
                     var ids = gridObj.jqGrid('getDataIDs');

                     for (var i = 0; i < ids.length; i++) {
                         var cl = ids[i];
                         var ret = gridObj.jqGrid('getRowData', cl);

                         var subGridPaymentStatus;
                         var subGridProcessorStatus;

                         var subGridPaymentStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.PaymentStatusImage + "  alt='S' title='" + ret.PaymentStatus + "'>";

                         if (ret.ProcessorStatus == '-N/A-') {
                             subGridProcessorStatus = "<img src=../../Content/images/NoStatus.png  alt='S' title='-N/A-' />";
                         }
                         else {
                             subGridProcessorStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.ProcessorStatusImage + "  alt='S' title='" + ret.ProcessorStatus + "'>";
                         }

                         gridObj.jqGrid('setRowData', cl, { PaymentStatus: subGridPaymentStatus, ProcessorStatus: subGridProcessorStatus });
                     }
                 }
             });
         },
         gridComplete: function () {
             var ids = jQuery("#dataList").jqGrid('getDataIDs');
             for (var i = 0; i < ids.length; i++) {
                 var cl = ids[i];
                 var ret = jQuery("#dataList").jqGrid('getRowData', cl);

                 var siteStatus;
                 var trsStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.TransactionStatusImage + "  alt='S' title='" + ret.TransactionStatus + "'>"

                 if (ret.SiteStatus == '-N/A-') {
                     siteStatus = "<img src=../../Content/images/NoStatus.png  alt='S' title='-N/A-' />";
                 }
                 else {
                     siteStatus = "<img src=" + "@ViewBag.ImagePath" + "/" + ret.SiteStatusImage + "  alt='S' title='" + ret.SiteStatus + "'>"
                 }

                 jQuery("#dataList").jqGrid('setRowData', cl, { TransactionStatus: trsStatus, SiteStatus: siteStatus });
             }
         }

     }).navGrid("#pager",
                        { edit: false, add: false, del: false, search: false },
                        {}, {}, {},
                         {
                             caption: "Search...",
                             Find: "Filter",
                             Reset: "Reset",
                             sopt: ['eq']
                         })
                         .navButtonAdd('#pager', {
                             caption: "Export to Excel&nbsp;&nbsp;&nbsp;",
                             buttonicon: "ui-icon-add",
                             onClickButton: function () {
                                 ExportToExcel();
                             },
                             position: "last"
                         });