How to setup Grid.Mvc to work with AJAX in your ASP.NET MVC project

Hello!

I recently had to use the free ASP.NET MVC extension Grid.MVC in a project at work. By default it doesn’t support AJAX. That is kind of restrictive if you don’t want your webpage refreshed each time you select a new page. In this guide I will show how to install and properly configure your Grid.MVC to work with AJAX. If you have previous experience setting up similar extensions, you can directly take a look at the demo HERE.

  1. Installation
    The simplest way to get the required files is by using the NuGet package manager. You are going to need three packages: Grid.Mvc (provides the core functionality), Grid.Mvc.Redux (fixes bugs) and Grid.Mvc.Ajax (builds on the core and allows the grid to work with AJAX calls). Simply look for Grid.Mvc.Ajax and install it. It will automatically install the previous two.Notice that after the installation is complete some files would’ve been added to your project. You can find them in the following folders: Content, Scripts and Views/Shared. I suggest you move the files in the first two folders to their own separate directories. Then include the scripts and styles you’re going to use in your BundleConfig.cs (you’re not required to but it certainly makes things more convenient).Because of dependencies Grid.MVC must be loaded after jQuery so make sure you render its script bundle bellow jQuery. Styles are usually loaded in the head element of your html so it’s safe to place them there.
  2. Configuration
    For convenience I’ve written a helper that handles most of the Grid.Mvc work on the server. We’re going to use it bellow.Now, to get it all going, we need:
    a) a partial view where the grid is configured;
    b) an action that returns the partial view with the grid;
    c) an action that is called by the grid for paging, sorting or filtering purposes;
    d) to „ajaxify“ the grid on the client.
    First we’re going to set up items b) and c).

    A) The Controller

    The first method we’re going to write is the one that returns the partial view (a). You can find it in the HomeController.cs inside the provided demo under the name GetGrid(). We’ll be calling it from another view so better apply a [ChildActionOnly] attribute to it. In the method’s body we need to get the data as IOrderedQueryable<YourModel>. Pass the data to the GetAjaxGrid() method of your GridMvcHelper. The resulting object of type AjaxGrid<YourModel> is the object you need to pass to the partial view where your grid is configured.

    The second method we need is the universal action your client will call on Paging/Sorting/Filtering. In the demo you can find it again in the HomeController.cs under the name GridPager(). Here we’re using the GetAjaxGrid() method again but this time with a second parameter – page. This time we will pass the result to the GetGridJasonData() method of the gridMvcHelper. The resulting json is then sent back to the client to update the view.

    B) The grid view

    Here you will configure the grid itself. In the demo you can find the corresponding file in ~/Views/Home/_FootballersGrid.cshtml. Notice the usings for GridMvc.Html and GridMvc.Sorting. The views’ model is an AjaxGrid<YourModel> – the same type we passed to the view in both actions, remember? You can find more about how to configure the grid in the Grid.Mvc documentation. It’s important to give your grid a name.

    C) The client

    In the view where your grid will be displayed (in the demo: ~/Views/Home/Index.cshtml) you need to do three things: call the action a) (look above), render the Grid.Mvc scripts (look in the BundlesConfig.cs to see which files must be included) and „ajaxify“ the grid. Now take a look at ~/Scripts/Application/home.js. The ‘pageGrids’ variable is initialized by the GridMvc plugin. To ensure it’s properly populated, we’re calling $(‘.grid-mvc’).gridmvc();  Then, after accessing the grid by the name we’ve given it in B), we will ajaxify it with an object that contains getData and getPagedData properties, each pointing to the url of the action c).

  3. Conclusion

    This is all you have to do to get the great GridMvc plugin to work with Ajax. Have fun!

  4. Resources

    The demo repository

Advertisements