Post
Ask Question

Installing MVCGrid In ASP.NET MVC

Now, we will discuss many Grids which are used by many developers across the globe. In this tutorial, I am going to introduce MVC Grid, which is created to help ASP.NET MVC developers and the companies, because it comes with an open source license( not like Kendogrid, as a licensed one). Implementation of this MVCGrid is very easy.

MVC GRID

It is a grid for ASP.NET MVC and Bootstrap with AJAX paging and sorting. It also has a filtering support, export to CSV back button support and graceful degradation.You can add it to your project very easily and get it running with minimal effort, but it also has the extensibility to customize, when required.

To learn more about MVCGRID.NET, visit the official site mvcgrid.net. For support on this product, refer to this link.

Note: There are other open source grid plugins, I explained here, which are Jquery Grid, Angular Grid (for angular applications, Jquery Data Tables and Web Grid helper for ASP.NET MVC Applications).

Prerequisites for MVC GRID

  1. ASP.NET MVC 3 or higher versions.
  2. Jquery plugin.
  3. Twitter Bootstrap framework.
    Note: You can use either Twitter Bootstrap or Your own styles for the grid.

Features of MVC GRID

  • Uses your existing model objects for the data.
  • Server-side sorting and paging, using AJAX.
  • Updates the query string to support maintaining grid state, when navigating back.
  • It gracefully degrades on the older Browsers (Ex: IE8).
  • Built-in exporting to CSV.
  • Filtering and column visibility support with the minimal client-side code.
Basic MVC GRID looks like:

Basic MVC GRID

Installing MVC GRID in ASP.NET MVC application

We can install MVC Grid in ASP.NET MVC Web Application in two ways.

Using Nuget Package

  1. Install, using NuGet Package Manager Console --> Go To Menu --> Tools --> Nuget package manager --> Package Manager Console
  2. Paste the command, given below. Click enter.
    PM> Install-Package MVCGrid.Net 

################################ or ###################################
  1. Go to Solution Explorer --> Right click on the project name --> Manage NuGet Packages -->search for "mvcgrid".

    mvcgrid

  2. Install MVCGrid.NET..
  3. Add JavaScript reference to your _Layout page after jQuery is referenced
    1. <!-- add this after jquery reference -->  
    2. <script src="~/MVCGridHandler.axd/script.js"></script>  
  4. Add your grid definitions to the RegisterGrids method in MVCGridConfig file under the App_Start folder.
  5. Use the grids in your view by adding the using @using MVCGrid.Web and then HTML helper @Html.MVCGrid("YourGridName")

Note

If you follow the two steps, given above, there is no need to configure anything for MVCGrid in Web Application. Here, I am also sharing Manual installation (Developers prefer this because the code used should not create problems for the previous project code).

Manual Installation

  1. In the manual installation process, add MVCGrid.dll.
  2. Create a file called MVCGridConfig.cs under the App_Start folder.
  3. Replace the code with the code, given below:
    1. using MVCGrid.Web;  
    2. public class MVCGridConfig   
    3. {  
    4.     public static void RegisterGrids()   
    5.   {  
    6.         //All grid definitions are goes here.  
    7.         // add your Grid definitions here  
    8.         //using the MVCGridDefinitionTable.Add method  
    9.     }  
    10. }  
  4. Add the line, given below, to Global.ASAX in the Application_Start() method:

    MVCGridConfig.RegisterGrids();

  5. Add the following to your web.config file.
    1. <system.webServer>  
    2.     <handlers>  
    3.         <add name="MVCGridHandler" verb="*" path="MVCGridHandler.axd" type="MVCGrid.Web.MVCGridHandler, MVCGrid" /> </handlers>  
    4. </system.webServer>  
  6. Add JavaScript reference to your _Layout page after jquery plugin is referenced.
    1. <!-- add this after jquery reference -->  
    2. <script src="~/MVCGridHandler.axd/script.js"></script>  
  7. Finally, use the grids in your view by adding the using @using MVCGrid.Web and HTML helper.

    @Html.MVCGrid("YourGridName")

Conclusion

I hope this tutorial is understandable for every reader. In the next post, I will explain about Implementation of MVCGrid in ASP.NET MVC Application.

See this article in my blog, Getting started with MVCGrid.


Similar Articles