theKindOfMe

January 12, 2009

Ajax Enabling MVCContrib Grid’s Pagination with jQuery

Filed under: Uncategorized — Tags: , , , , — yasi8h @ 8:16 am

The MVCContrib project(at http://www.codeplex.com/MVCContrib ) provides a nice Grid ‘control'(and a lot more of course…) for use with MVC framework. Currently it does not support some what magical generation of javascript. so that you can have a ajaxified grid control. but with jQuery its pretty easy to ajaxify it. Today i finished ajaxifiying the paging of the grid, with a little bit of jQuery. So this is how i did it. i am sure that there must be betters ways of doing it. but this is what i came up with :P

Structure

First of all for this to work you will need some ‘structure’ in your app. let’s take a little example. if you want to display a list of People in your application using a grid. you will have a controller for people: PeopleController. this would have a two actions. one would be List. while the other one would be ListForGrid. List action would be a plain action that will just return a normal view: List.aspx. while ListForGrid would return a asp ‘control’ or a partial view: ListForGrid.ascx. ListForGrid.ascx would know how to render a grid. it will use the normal Grid helpers to render a grid that displays people. List.aspx will contain an empty div:grid_holder and some java script that would add the Ajax goodness.

How it works

when a user asks for the People/List. the List.aspx would be rendered. and upon the document.ready() it would call ListForGrid action via ajax and load the resulting html in to the page. ListForGrid uses the ListForGrid.ascx to render the grid. ListForGrid action will also accept the necessary parameters to support Grid’s pagination(ListForGrid(int? page)).

this is all good. but still we have not archived our main goal. the rendered grid will have pagination links that would take us back to theListForGrid action directly. so if we click on them we would go to that resulting view with out any ajax ‘magic’. to get the grid to render them with ajax we are going to have to use jQuery to ‘hook’ in to the click event’s of the pagination related links( first | prev | next | last) that are in the rendered grid. and we will ‘intercept’ any events(clicks) and load the grid through ajax as necessary. so if you click on the next link in the grid we will stop the page from going to the relevant page, we will ‘read’ what ‘location’ that he is trying to take us to and we will load that through ajax.

now if you don’t understand what i am trying to tell you, please take a look at the source code bellow. i am sure you will understand that :)

relavant JS/jQuery source code
$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";

//load the grid when the document loads. this code will run only once
$(document).ready(function() {
    $($gridHolder).load($ListForGridURL, null, function() {
        //now the grid is loaded call ajazPaging,
        //this will hook on to the click events
        ajaxPaging();
    });
});

//hook on to the click events(in a recursive way) of all pagination
//related links, and when clicked load the updated grid through AJAX
function ajaxPaging() {
    //this will zero in on the needed <a> elements in the Grid
    $(".paginationRight > a")
        .click(function(event) {
            //stop the browser from going to the relevant URL
            event.preventDefault();
            //this.href will give us the href value of the current
            //element, which have the URL from which we should update our grid
            $($gridHolder).load(this.href, null, function() {
                //call the function recursively so that the same code would
                //run when the user click on the pagination links after the loading happens
                ajaxPaging();
            });
        });
}

Update: with the release of jQuery 1.3 you can write this in a more simpler way using the live(). more info

Live Events

jQuery now supports “live events” – events that can be bound to all current – and future – elements. Using event delegation, and a seamless jQuery-style API, the result is both easy to use and very fast.

$gridHolder = "#grid_holder";
$ListForGridURL = "/People/ListForGrid";

//load the grid when the document loads. this code will run only once
$(document).ready(function() {
    $($gridHolder).load($ListForGridURL, null, function() {
        //now the grid is loaded call ajazPaging,
        //this will hook on to the click events

    //hook on to the click events of all pagination
    //related links, and when clicked load the updated grid through AJAX
    //this will zero in on the needed <a> elements in the Grid
    $(".paginationRight > a")
        .live("click", function(event) {
            //stop the browser from going to the relevant URL
            event.preventDefault();
            //this.href will give us the href value of the current
            //element, which have the URL from which we should update our grid
            $($gridHolder).load(this.href);
        });
    });
});
rest of the sample source code(controller, actions and views…)
<em>PeopleController </em>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

using MvcContrib.Pagination;
using MvcContrib;

namespace MvcLocalization.Controllers
{
    public class PeopleController : Controller
    {
        public ActionResult List()
        {
            return View();
        }

        public ActionResult ListForGrid(int? page)
        {
            ViewData["people"] = GetListOfPeopel().AsPagination(page ?? 1, 1);
            return View("UserListGrid");
        }
    }
}

<em>
List.aspx</em>


<h2>People</h2>
<div id="grid_holder"></div>

        $gridHolder = "#grid_holder";
        $ListForGridURL = "/People/ListForGrid";

        //load the grid when the document loads. this code will run only once
        $(document).ready(function() {
            $($gridHolder).load($ListForGridURL, null, function() {
                //now the grid is loaded call ajazPaging, this will hook on to the click events
                ajaxPaging();
            });
        });

//hook on to the click events(in a recursive way) of all pagination
related links, and when clicked load the updated grid through AJAX
        function ajaxPaging() {
            //this will zero in on the needed <a> elements in the Grid
            $(".paginationRight > a")
                 .click(function(event) {
                       //stop the browser from going to the relevant URL
                     event.preventDefault();
                    //this.href will give us the href value of the current <a> element, which have the URL from which we should update our grid
                     $($gridHolder).load(this.href, null, function() {
                          //call the function recursively so that the same code would run when the user click on the pagination links after the loading happens
                         ajaxPaging();
                     });
                 });
        }

    


<em>ListForGrid.ascx</em>


<%
    Html.Grid(
        "people",
            column =>
            {
                column.For(p => p.Name);
                column.For(p => p.Age);
                column.For(p => p.Address);
            }
            );
%>

Aha! that’s it. jQuery rocks eh!
hope this will be useful to someone/myself.

Note 1: if you are completely new to MVCContrib Grid, you might want to read this
Note 2: a article on “Using MVCContrib Grid in a Web 2.0 World with jquery and AJAX” (btw this article does not cover implementing paging through ajax…)

About these ads

14 Comments »

  1. […] with all the functionality it offered with very simple and neat syntax! a while ago i did a post on “Ajax Enabling MVCContrib Grid’s Pagination with jQuery”. In which i added AJAX/pagination support to MVCContrib’s Grid. but with time i needed more […]

    Pingback by A Grid with Ajax/Pagination/Sorting/Filtering on ASP.net MVC with ExtJS and Enitiy Framework « theKindOfMe — February 5, 2009 @ 9:19 am

  2. Track back from http://webdevvote.com

    Comment by webdevvote — February 23, 2009 @ 2:31 pm

  3. you forgot to add pagination links in your example?

    Comment by anonymous — March 10, 2009 @ 11:59 pm

  4. @anonymous the pagination links are ‘generated automatically’ by the MVCContrib Grid.Helper.

    Comment by yasi8h — March 11, 2009 @ 4:51 am

  5. Thanks. This really helped me. Works with the new UI.Pager as well.

    Comment by rock ge — July 8, 2009 @ 8:16 am

  6. i am not able to track whats “paginationRight” ??

    cuase the Jqueary function is not working from this elemenet

    Comment by Shyam Miyatra — August 27, 2009 @ 11:38 am

    • I am not sure i understand you completely. “paginationRight” seems to be a class that i have applied to a link. basically if you have a grid and for the pagination if you have two links, where link 1 is “prev” and link 2 is “next”. the second link, will have a class attribute that is set to “paginationRight”

      now with the above given jquery code. clicking on the link 2 should invoke pagination and basically load the next page.
      please let me know if this doesn’t answer you question.
      cheers!

      Comment by yasi8h — August 27, 2009 @ 4:31 pm

  7. Controller :

    public ActionResult SummaryClient(int? page)
    {
    ClientService clientSvc = new ClientService(new ModelStateWrapper(this.ModelState));
    List clients = clientSvc.GetAllClients().AsPagination(page ?? 1,10).ToList();
    ViewData[“ClientList”] = clients;
    return View();
    }
    View:

    <% Html.Grid((List)ViewData[“ClientList”])
    .Columns(column =>
    {
    column.For(c => c.ClientName );
    column.For(c => c.DisplayName);
    column.For(c => c.Country.CountryName);
    column.For(c => c.State.State);
    column.For(c => c.City); }).Attributes(id => “example”).Render();
    %>

    Same as above , but Paginationright is not invoked ….

    so please let m know where i have to change the code ??

    Comment by Shyam Miyatra — August 27, 2009 @ 12:03 pm

  8. i don’t like the use of javascript to much. thats why i downloaded the source of mvccontrib and ajusted it with actionlink code and made changes so that a querystring in the pager also displays well if parameters are passed with a Ajax.BeginForm() statement and now it is ajaxified without the use of any javascript :-)

    Comment by Herman van der Blom — May 12, 2010 @ 6:13 pm

    • Can you share the source code? Or can you host it on codeplex? I would love to see how you’ve done that

      Comment by Pear — November 18, 2011 @ 6:36 pm

  9. Thank you! works wonderfully!

    Comment by Menita — March 25, 2011 @ 6:49 pm

  10. would you please share sample code with me for this….

    Comment by jay — September 24, 2011 @ 9:17 pm

  11. This worked like a charm for me. Thank you so much for sharing this

    Comment by Pear — November 18, 2011 @ 6:37 pm

  12. Perfect solution!

    Comment by Derrick — September 7, 2012 @ 6:08 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Silver is the New Black Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: