Web Tutorials

HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
.NET Tutorial
PHP Tutorial

Interview Q & A

ASP.NET Q & A
WEB API Q & A
WCF Q & A
JQuery Q & A
MVC Q & A
Bootstrap Q & A
LINQ Q & A
AJAX Q & A
SQL Server Q & A
C# Q & A
OOPS Q & A

Code Examples

AngularJS
Google MAP API V3
ASP.NET

Utility Tools

Html Encode
Html Decode
URL Decode
URL Encode
Base64 Encode
Base64 Decode
JSON Beautifier

JQGrid Server-Side processing using HttpHandler in ASP.NET

Posted By: Ajay Saptaputre, 21 Oct,2015  |  Total View : 4965

In my previous article I discussed about JQGrid in ASP.NET MVC 5 With Razor View And Entity Framework 6 and JQuery DataTable Bind JSON Using ASP.NET MVC 5 and Entity Framework 6 and Scheduled Tasks In ASP.NET With Quartz.Net

In my previous articles, I have been using Entity Framework and entities. Where entities are mapped to the database tables and ORM tools like Entity Framework and NHibernet are used to automatically generate data access model class to retrieve and save the data into the database.

In this article I will discuss how to create dynamic JSON data from generic HttpHandler and bind server side data to the JQGrid.

What is Generic HttpHandler?

An ASP.NET HTTP handler is the process that runs in response to a request that is made to an ASP.NET Web application. When users request an .aspx file, the request is processed by the page handler.

In this article I am going to discuss how to implement server-side data processing for JQuery Grid using generic HttpHandler. In this article I will discuss how to use generic HttpHandler (.ashx) to implement server-side data processing. Basically generic HttpHandler do not require web form and it can return an image, XML, JSON etc data formats. Science generic handler can return JSON and XML format also, we can easily use to bind JQGrid control with JSON or XML data.

In this article I am going to discuss step by step how to implement generic HttpHandler as data provider, by creating sample ASP.NET example.

So let's open Visual Studio and start creating new empty ASP.NET web application give proper name, "JQGridBindDataWIthHttpHandler" in our sample code. In this article I am using Visual Studio Express 2013 for Web but you can use Visual Studio 2013 as well.

Now start creating ASP.NET Web project in Visual Studio 2013.

Add Custom Data Access Class Library Project

In order to start our sample application we will need database table, stored procedures, entity and custom data access object to fetch the data from database. In this article I am not covering steps those are already covered in my previous article. In order to make data access library available to web project, build the library in "Release" mode and add reference to web project. If you did not read my previous article, please refer How to create custom data access object in ASP.NET MVC 5 application and follow Step 1 to Step 6 it will help you to understand this article.

Install Jquery.JqGrid

Before going to start, we will need to add "Jquery.JqGrid" packages that will help us to display data in Grid format. All right, right click on project or go to "Tool" menu and select "Library Package Manager" and then select "Manage NuGet Package for Solution..." option. Now, search for "Jquery.JqGrid" and select "Jquery.JqGrid" from list and clicks on "Install" button. See below screen shot:


Add HTML File

Now, right click on web project and add new HTML file, "JQueryDemoWithHttpHandler.html" in our sample application.


Add Script References to HTML file

Now we need to include ui.jqgrid.css, grid.locale-en.js and jquery.jqGrid.min.js files do not forget to add JQuery reference in your project. All right, now include all files references in "JQueryDemoWithHttpHandler.html" file under head section. As below code snippet:

<link href="Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

Add JQGrid Code in HTML File

To bind data to JQGrid is quite simple. You need to make Ajax call to your generic handler "JSONDataProvider.ashx" file, which will return JSON data and bind JQGrid control, see below code snippet. For more about other JQGrid properties please refer JQuery DataTable Bind JSON Using ASP.NET MVC 5 and Entity Framework 6 . Add below code snippet under head section.

<script language="javascript">
        $(document).ready(function () {
            $("#list2").jqGrid({
                url: 'http://localhost:50297/JSONDataProvider.ashx',
                datatype: "json",
                contentType: "application/json; charset-utf-8",
                mtype: 'GET',
                colNames: ['ID', 'Employee Name', 'Designation', 
				'Gender', 'Salary', 'City', 'State', 'Zip'],
                colModel: [
                    { name: 'id', index: 'id', width: 55, sorttype: "int" },
                    { name: 'Name', index: 'Name', width: 90 },
                    { name: 'Designation', index: 'Designation', width: 100 },
                    { name: 'Gender', index: 'Gender', width: 80 },
                    { name: 'Salary', index: 'Salary', width: 80, 
						align: "right", sorttype: "float" },
                    { name: 'City', index: 'City', width: 80 },
                    { name: 'State', index: 'State', width: 150 },
                    { name: 'Zip', index: 'Zip', width: 150 }
                ],
                rowNum: 5,
                rowList: [5, 10, 15],
                pager: '#pager2',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                caption: "Binding JQGrid with HttpHandler in ASP.NET"
            });
            jQuery("#list2").jqGrid('navGrid', '#pager2', 
			{ edit: false, add: false, del: false });
        });
    </script>

Add Table and Div to HTML File

In order to display data in tabular format JQGrid uses HTML table. The table must decorate with "id" attribute, because "id" will be used by JQuery code to bind the data into the table. Similarly, JQuery also require div element with "id" to display paging for grid. See below code snippet:

<table id="list2"></table>
    <div id="pager2"></div>
    <div>www.techstrikers.com</div>

Add Generic Handler File to Web Project

Now, right click on web project and add new Generic Handler (.ashx) file, "JSONDataProvider.ashx" in our sample application.


Add Code to Generic Handler File

Now add below code to the newly added Generic Handler file, "JSONDataProvider.ashx" in our sample. The below code will return JSON array of "Employee" object. In below code snippet, you can see the "ProcessRequest" method which is further calling "GetEmployees" method from custom data access library. The "GetEmployees" method is using to get list of "Employee" and creating new dynamic JSON formatted object. Next, I am using "JavaScriptSerializer" object to serialize the "jsonData" object.

using DataAccessLayer;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace JQGridBindDataWIthHttpHandler
{
    public class JSONDataProvider : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            DataAccessLib db = new DataAccessLib();
            List employee = db.GetEmployees;

            var jsonData = new
            {
                total = 1,
                page = 1,
                records = employee.Count,
                rows = (
                  from emp in employee
                  select new
                  {
                      id = emp.Id,
                      cell = new string[] { 
                          emp.Name.ToString(), 
                          emp.Designation.ToString(), 
                          emp.Gender.ToString(), 
                          emp.Salary.ToString(), 
                          emp.City, emp.State, 
                          emp.Zip.ToString()
                      }
                  }).ToArray()
            };

            JavaScriptSerializer js = new JavaScriptSerializer();
            context.Response.Write(js.Serialize(jsonData));
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Solution Explorer

After add all the required files the solution explorer will look like below screen shot:


Run ASP.NET Web Application

Now our sample ASP.NET web application is ready to run. Press Ctrl + F5 and run the application, you can see below output in browser.


Appreciate your valuable feedback:

I hope this article is useful for you. I look forward for your comments and feedback. So please provide your valuable feedback so that I can make this blog better. You can also share this article by hitting below button.
Happy learning...

Download Code ⇩