URL of Page 2 in Asp.net MVC WebGrid

Question

I am working with Asp.Net MVC WebGrid. My grid is appearing through a ajax call of a Partial View. Therefore Pagination is not working. Whenever i click the second page , whole page refreshes and the url become

    http://localhost:2429/mvc/SSP/Home/SearchQuery?page=2

obviously which is not found (404). I think Webgrid Pagination not work fine with partial View. Therefore i decided to make a jquery ajax call on each page link.And for that i need a url which can extract the data of Second page from Webgrid.

So, Is there any way to find the url of second page of webgrid so that i can extract the data from webgrid and display on Second Page.

Answer 1

I think you need this,

For pagination you can use MVC4.Paging.

@Html.Raw(Ajax.Pager(
       new Options
       {
           PageSize = Model.PageSize,
           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 = "grid-list",
           OnBegin = "beginPaging",
           OnSuccess = "successPaging",
           OnFailure = "failurePaging"
       }, new { controller = "Home", action = "Index", employee_name = ViewData["employee_name"] }))

ref : http://mvcpaging.apphb.com/

I have implemented it & it works!!!

Paging without postback is mentioned in example.

After installing nuGet package,

While passing your model back to View or PartialView you need to convert it using ToPagedList

myModel = myModel.ToPagedList(currentPageIndex,rowSize);

above code will do magic for you!

But is you want to change your URL after AJAX call then you need to put some more extra efforts.

ref : How to change URL after an ajax request?

Answer 2

You have to design your grid with Ajax based paging as well. Right now you're rendering anchor tags for your paging which will cause full page loads.

There are grid controls that support this out of the box. One good example is the Telerik Kendo grid

Answer 3

This article may help you

http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

It's not as simple as just passing a page number to the grid, you need to store the PageSize and PageNumber as part of your model. Then you call the Bind method from the view.

Personally in the past I have created my own paging helpers, so within the controller you pass in (PageSize, TotalCount, CurrentPage) and from this you bring back a subset of your data. This also prevents the controller from bringing back all of your data first then paging it which isn't very efficient for large sets of data.

EDIT

Another article I have found which explains (part two) of what I mean by above.

http://www.dotnetcurry.com/ShowArticle.aspx?ID=615

Answer 4

There is no automatic paging of data when you use the MVC WebGrid. The paging that you see in the webgrid is used for custom paging meaning you have to handle it yourself. All the webgrid does is sends a page number to the actionresult as a parameter, and you use that page number to grab and return the set of data related to that page number (ie list.skip(pagesize * pagenumber).take(pagesize)). Hope this helps.

Answer 5

If you look at how the webgrid is being generated, you will noticed that grid.GetHtml returns an IHtmlString .

You can actually convert it to a string and replace what ever you want to replace. In your case, you want to replace the paging url.

var html = grid.GetHtml(...).ToHtmlString().Replace("home/index?page", "home/MyPartialGrid?page");

You can then create a new instance of MvcHtmlString to generate the grid.

var htmlString = new MvcHtmlString(html);

<div id="myPartialGrid">
    @htmlString
</div>