前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_demo35/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid_demo35/themes/ui.jqgrid.css" />
<script src="jqgrid_demo35/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jqgrid_demo35/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="jqgrid_demo35/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
jQuery("#list2").jqGrid({
url: 'http://localhost:49348/Handler1.ashx',
data: {},
datatype: 'json',
mtype: 'POST',
loadonce: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames: ['ID', 'UserName'],
colModel: [
{ name: 'ID', index: 'ID', width: 55 },
{ name: 'UserName', index: 'Names', width: 90 }
],
rowNum: 10,
width: 600,
rowList: [10, 20, 30],
pager: '#pager2',
sortname: 'name',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="重新加载" id="btnQuery" />
<div>
<table id="list2" style="width: 600px;"></table>
<div id="pager2"></div>
</div>
</form>
</body>
</html>
Handler1.ashx文件代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace WebApplication2
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<ChinaUser> list = new List<ChinaUser>(){new ChinaUser() { ID=1,UserName="Wujy"},
new ChinaUser() { ID=2,UserName="踏浪帅"}
};
GridData model = new GridData();
model.page = "1";
model.records = "10";
model.total = "10";
model.rows = list;
JavaScriptSerializer serializer = new JavaScriptSerializer();
string Resul = serializer.Serialize(model);
context.Response.Write(Resul);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class ChinaUser
{
public int ID { set; get; }
public string UserName { get; set; }
}
public class GridData
{
public string page { set; get; }
public string total { get; set; }
public string records { get; set; }
public List<ChinaUser> rows { get; set; }
}
}