jQuery Grid With ASP.Net MVC

Introduction

This article shows how to easily implement paging, sorting, filtering and CRUD operations with the jQuery Grid Plugin in ASP.NET MVC with bootstrap.

Background

 

In the sample project that you can download from this article I'm using jQuery Grid 0.4.3 by gijgo.com, jQuery 2.1.3, Bootstrap 3.3.4 and AspNet.Mvc 5.2.3. A few words about jQuery Grid by gijgo.com. Since the other libraries, that are in use are pretty popular compared to the grid plugin, I'm going to provide you some info about this plugin.

• Stylish and Featured Tabular data presentation control.
• JavaScript control for representing and manipulating tabular data on the web.
• Ajax Enabled.
• Can be integrated with any of the server-side technologies like ASP, JavaServelets, JSP, PHP and so on.
• Very simple to integrate with ASP.NET.
• Supports pagination, JavaScript and server-side data sources.
• Supports jQuery UI and Bootstrap.
• Free open-source tool distributed under the MIT License.

You can find the documentation about the version of the plugin that is in use in this article at http://gijgo.com/version_0_4/Documentation. Integrating jQuery Grid with ASP.NET MVC step-by-step.

• Create a new ASP.NET MVC project in Visual Studio.
• I assume that jQuery and bootstrap has been added to your ASP.NET MVC project by default. If they are not added you can find and add them to your project via Nuget.
• Add the jQuery Grid by gijgo.com via Nuget. You can find more info at https://www.nuget.org/packages/jQuery.Grid/
• Ensure that you have a reference to the jquery.js, bootstrap.css, grid.css and grid.js files in the pages where you are planning to use the jQuery grid.

In order to use the grid plugin you will need a HTML table tag for a base element of the grid. I recommend to use the "data-source" attribute of the table as identification for the location of source URL on the server side.

<table id="grid" data-source="@Url.Action("GetPlayers")"></table>

Then, we need to initialize the table as a jQuery grid with the fields that we are planning to display in the Grid.

grid = $("#grid").grid({
   dataKey: "ID",
   uiLibrary: "bootstrap",
   columns: [
   { field: "ID", width: 50, sortable: true },
   { field: "Name", sortable: true },
   { field: "PlaceOfBirth", title: "Place Of Birth", sortable: true },
   { field: "DateOfBirth", title: "Date Of Birth", sortable: true },
   { field: "Edit", title: "", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } },
   { field: "Delete", title: "", width: 34, type: "icon", icon: "glyphicon-              remove", tooltip: "Delete", events: { "click": Remove } }
   ],
   pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
});

If you want to be able to sort by a specific column you need to set the sortable option of the colum to true. When you do that, the grid plugin will send information to the server about the field name that needs to be sorted. In order to configure paging you need to use the pager option from where you can control the paging.

In the sample project I use the following code to implement simple CRUD operations over the data inside the grid.

function Add() {
    $("#playerId").val("");
    $("#name").val("");
    $("#placeOfBirth").val("");
    $("#dateOfBirth").val("");
    $("#playerModal").modal("show");
  }
  function Edit(e) {
    $("#playerId").val(e.data.id);
    $("#name").val(e.data.record.Name);
    $("#placeOfBirth").val(e.data.record.PlaceOfBirth);
    $("#dateOfBirth").val(e.data.record.DateOfBirth);
    $("#playerModal").modal("show");
  }
  function Save() {
    var player = {
      ID: $("#playerId").val(),
      Name: $("#name").val(),
      PlaceOfBirth: $("#placeOfBirth").val(),
      DateOfBirth: $("#dateOfBirth").val()
    };
    $.ajax({ url: "Home/Save", type: "POST", data: { player: player } })
      .done(function () {
        grid.reload();
        $("#playerModal").modal("hide");
      })
      .fail(function () {
        alert("Unable to save.");
        $("#playerModal").modal("hide");
      });
  }
  function Remove(e) {
    $.ajax({ url: "Home/Remove", type: "POST", data: { id: e.data.id } })
      .done(function () {
        grid.reload();
      })
      .fail(function () {
        alert("Unable to remove.");
      });
  }
  function Search() {
    grid.reload({ searchString: $("#search").val() });
  }

Server Side

In the Controller we need only the 4 methods Index, GetPlayers, Save and Remove.

[NoCache]
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    [HttpGet]
    public JsonResult GetPlayers(int? page, int? limit, string sortBy, string direction, string searchString = null)
    {
      int total;
      var records = new GridModel().GetPlayers(page, limit, sortBy, direction, searchString, out total);
      return Json(new { records, total }, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public JsonResult Save(Player player)
    {
      new GridModel().Save(player);
      return Json(true);
    }

    [HttpPost]
    public JsonResult Remove(int id)
    {
      new GridModel().Remove(id);
      return Json(true);
    }
  }

Please note that I'm using the custom "[NoCache]" attribute for the controller that will resolve some issues with the caching. I recommend the usage of that attribute or a similar mechanism for the prevention of bugs related to caching.

[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
  public sealed class NoCacheAttribute : ActionFilterAttribute
  {
    public override void OnResultExecuting(ResultExecutingContext filterContext)
    {
      filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
      filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false);
      filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
      filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
      filterContext.HttpContext.Response.Cache.SetNoStore();
      base.OnResultExecuting(filterContext);
    }
  }

In the data model of this example I use XML as a data store to simplify the logic in the model. You can customize the date model as you want and replace my implementation with code using relational databases like Microsoft SQL Server, My SQL or other services that are specific for your project.

I hope that this article will be useful for your project. Happy codding!