MVC4 WebGrid and Ajax Pagination
I have a simple question (maybe not a simple answer!) With WebGrid in MVC4.
I have a functional grid like this
<div id="Submitted">
@Html.Grid(
Model.Submitted, displayHeader: false, fieldNamePrefix: "Submitted_", ajaxUpdateContainerId: "Submitted",
columns: new WebGridColumn[]{
new WebGridColumn(){ ColumnName = "Date",Header = "Date",Style = "",CanSort = false,Format = x => x.Date.ToString(Globals.Default.DATEFORMAT) },
new WebGridColumn(){ ColumnName = "ID",Header = "Review",Style = "", CanSort = false, Format = x=>@Html.ActionLink("Review","Review","Company",new{ID = x.ID },new{}) }
})
</div>
When reloading the "Submitted" div with Ajax, when the next page button is clicked, it generates the next page in order, but it jumps to the original action on the controller, which should be complete.
How does it filter out everything except the grid itself? with some clever C # or jQuery code?
EDIT: To clarify, I am not asking how to make the paging better, or myself, as far as I know, the default paging with the webgrid works just fine as it should - I am asking how the WebGrid does this ajax paging when posting back to the action which returns the page FULL.
source to share
It does this with jquery load () and functionality that allows it to select only matching incoming nodes. This is taken from http://msdn.microsoft.com/en-us/magazine/hh288075.aspx
To allow the script to only apply to the WebGrid, it uses jQuery selectors to identify elements with the ajaxGrid set of classes. The script sets up click handlers for sorting and paging links (identified through a table header or footer inside a grid container) using the jQuery live method (api.jquery.com/live). This sets up an event handler for existing and future elements that match the selector, which is handy if the script will replace the content.
source to share
You have to put your grid in partial view and update it with Ajax. In the controller, you should find the request type. If it's an ajax request (Request.IsAjaxRequest ()), you must return a partialview, otherwise you must return the original view.
If you are using ajax.beginform you should do something like this:
@using (Ajax.BeginForm("Index", new AjaxOptions { OnFailure = "searchFailed", HttpMethod = "POST", UpdateTargetId = "Submitted" }))
{
...
}
<div id="Submitted">
@Html.Partial("_partialviewname", Model)
</div>
rn and in the controller:
public ActionResult Index(int? page)
{
...
if (Request.IsAjaxRequest())
{
return PartialView("_partialviewname", db.model)
}
return View(db.model)
}
source to share