CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcasp.net-mvc-4
m.t.bennett
m.t.bennett

Reputation: 1320

MVC4 WebGrid and Ajax Pagination

I have a simple question (may not be a simple answer!) with the WebGrid in MVC4.

I have a functional Grid like so

<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 fine - but it's going to the original action on the controller, which should be a full page.

How does it filter out everything other than the grid itself? with some clever C# code or jQuery?

EDIT: To clarify, I'm not asking how to do the paging better, or myself, as far as I'm concerned the default paging with the webgrid is working perfectly as it should - I'm asking how the WebGrid does it's ajax paging when posting back to an action which is returning a FULL page.

Upvotes: 3

Views: 9170

Answers (2)

dansan
dansan

Reputation: 465

It does this using jquery load() and functionality that allows it to select just the relevant incoming nodes. This is taken from http://msdn.microsoft.com/en-us/magazine/hh288075.aspx

To allow the script to be applied just to a WebGrid, it uses jQuery selectors to identify elements with the ajaxGrid class set. The script establishes click handlers for the sorting and paging links (identified via the table header or footer inside the grid container) using the jQuery live method (api.jquery.com/live). This sets up the event handler for existing and future elements that match the selector, which is handy given the script will be replacing the content.

Upvotes: 2

Bahman
Bahman

Reputation: 1064

You should put your grid in a partialview and update it by Ajax. In controller you should find the request's type. If it is a ajax request(by Request.IsAjaxRequest() ) you must return the partialview, otherwise you must return the original view.

If you are using ajax.beginform you must 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 controller:

  public ActionResult Index(int? page)
    {
      ...
      if (Request.IsAjaxRequest())
        {
          return PartialView("_partialviewname", db.model)  
         }
      return View(db.model)

    }

Upvotes: 0

Related Questions