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.
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.
<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>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'https://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>
<table id="list2"></table>
<div id="pager2"></div>
<div>www.techstrikers.com</div>
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;
}
}
}
}
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...