【说明】：本文阐述jqGrid在ASP.NET MVC 3中的实现。
使用的开发工具如下：VS2010、Oracle11g。
【本文的源代码见附件！！】
言归正传，开始讲如何实现Demo。
第一步：右击“VS2010”,以“管理员身份运行”。如图1所示：
图1
【说明】：因为我的程序会部署在IIS上，所以需要以管理员身份运行程序。
若不知IIS为何物，请百度orGoogle
若不知如何开启/使用IIS，请参考：如何开启/使用IIS
第二步：建立ASP.NET MVC 3的应用程序，solution的我们称之为：LearnjqGrid。如图2所示：
图2
第三步：建立“Common”、“Domain”两个文件夹。其中，Common用于封装连接数据库的类，Domain用于存放对Model的操作方法。目录结构如图3所示：
图 3
第四步：创建Model、连接数据库、相应操作方法。
【说明】：本人使用的是Oracle 自带的scott用户的表。如何开启/使用scott用户，请参考：scott用户解锁
（1） 在Common文件之下创建数据库连接类--OracleManager.cs
代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Oracle.DataAccess.Client; //不要忘记此引用
namespace LearnjqGrid.Common
{
public static class OracleManager
{
//scott用户的默认密码为：tiger
private static readonly string connectionStr = @"User Id=scott; Password=tiger; Data Source=(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = localhost)(PORT = 1521))(CONNECT_DATA =(SERVER = DEDICATED)(SERVICE_NAME = ORCL)))";
public static OracleConnection GetOracleConnection()
{
OracleConnection conn = new OracleConnection();
conn.ConnectionString = connectionStr;
conn.Open();
return conn;
}
}
}
【说明】：在引用“Oracle.DataAccess.Client”之前，需要在程序中添加Oracle.DataAccess.dll。
（2）scott用户下有一个DEPT表（即，部门表），我们就使用该表。在Models的AccountModels.cs中添加DEPT的模型，代码如下：
/**
* 部门表的Model
* **/
public class DepementModel
{
public int DEPTNO { get; set; } // NUMBER(2) not null,
public string DNAME { get; set; } // VARCHAR2(14),
public string LOC { get; set; } //VARCHAR2(13)
}
（3）在Domain文件夹下建立：DepartmentDomain.cs。具体实现代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using LearnjqGrid.Models; //不要忘记引入
using LearnjqGrid.Common; //不要忘记
using Oracle.DataAccess.Client; //不要忘记
namespace LearnjqGrid.Domain
{
public class DepartMentDomain
{
/**
* 获取所有数据
*
* */
public List<object> GetAllDeptmentInfo()
{
List<object> returnList = new List<object>();
int itemNo = 1;
string sqlString = " select t.* from dept t ";
OracleConnection connection = OracleManager.GetOracleConnection();
try
{
OracleCommand command = new OracleCommand();
command.CommandText = sqlString;
command.Connection = connection;
OracleDataReader reader = command.ExecuteReader();
while (reader.Read())
{
DepementModel deptmentModel = new DepementModel();
if (!Convert.IsDBNull(reader["DEPTNO"]))
{
deptmentModel.DEPTNO = reader.GetInt32(reader.GetOrdinal("DEPTNO"));
}
if (!Convert.IsDBNull(reader["DNAME"]))
{
deptmentModel.DNAME = reader.GetString(reader.GetOrdinal("DNAME"));
}
if (!Convert.IsDBNull(reader["LOC"]))
{
deptmentModel.LOC = reader.GetString(reader.GetOrdinal("LOC"));
}
var row = new { id = itemNo, cell = new string[] { deptmentModel.DEPTNO.ToString(), deptmentModel.DNAME, deptmentModel.LOC } };
returnList.Add(row);
itemNo++;
}
return returnList;
}
catch (Exception e)
{
throw new Exception("Error take place at :domain.BasicDict.GetAllDrugMedicalInfo,Error Message:" + e.Message);
}
finally
{
if (connection != null)
{
connection.Close();
}
}
}
}
}
第五步：创建Controller。
（1） 在Controller文件下建立：DepartmentController.cs，并在在文件中加入以下GetAllDepartmentInfo()方法。
DepartmentController.cs代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization; //不要忘记引用
using LearnjqGrid.Domain; //不要忘记引用
using LearnjqGrid.Models; //不要忘记引用
namespace LearnjqGrid.Controllers
{
public class DepartmentController : Controller
{
//
// GET: /Department/
public ActionResult Index()
{
return View();
}//The end of method
/**
* 获得所有部门信息
* */
public string GetAllDepartmentInfo()
{
List<object> list = new List<object>();
DepartMentDomain departmentDomain = new DepartMentDomain();
var returnstr = new { success = "false", message = "", data = list };
try
{
list = departmentDomain.GetAllDeptmentInfo();
returnstr = new { success = "true", message = "", data = list };
return new JavaScriptSerializer().Serialize(returnstr);
}
catch (Exception e)
{
returnstr = new { success = "false", message = "方法发生了异常，异常内容:" + Environment.NewLine + e.Message, data = list };
return new JavaScriptSerializer().Serialize(returnstr);
}
}
}//Tne end of class
}// The end of namaspace
（2）将光标放在Index()方法内，点击右键，选择“Add View”，如图4所示：
图 4
View按默认名称即可。如图5所示
图 5
创建完成之后，在View文件夹之下，会出现相应的View，如图6所示
图 6
第六步：编写View代码。
（1）引入gqGrid的js文件。根据自己的需求，引入相应的js文件。我的引用如图7所示。其中这些文件我已经添加到附件中，大家可以下载。
图 7
（2）在Views/Shared/Site.Master（母版）中添加引用。母版的代码如下：
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/layout-default-latest.css" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.ui.datepicker-zh-CN.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.cookie.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.hotkeys.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jstree.js") %>" type="text/javascript"></script>
<link href="../../Content/themes/base/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery.layout.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.layout-latest.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/grid.locale-cn.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="<%: Url.Content("~/Scripts/ui.multiselect.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.tablednd.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.contextmenu.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/grid.custom.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/grid.common.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/Common/RuntimeUtility.js") %>" type="text/javascript"></script>
</head>
<body>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
（3）编写View实现代码
Index.aspx的代码如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
部门信息
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="<%: Url.Content("~/Scripts/DepartMent/department.js") %>"
type="text/javascript"></script>
<div id="header_div">
<h1>部门信息查询</h1>
</div>
<div id="main_div">
</div>
<div id="table_div">
<table id="DepetmentTable" />
<div id="DepetmentTable_pager" />
</div>
</asp:Content>
在Index.aspx中引用了一js文件，
<script src="<%: Url.Content("~/Scripts/DepartMent/department.js") %>"
type="text/javascript"></script>
此文件是在Scripts文件夹下建立的一个js文件。如图8所示：
图 8
该js（department.js）文件的代码：
$(function () {
$("#DepetmentTable").jqGrid({
url: '/LearnjqGrid/Department/GetAllDepartmentInfo',
// postData: {
// DictType: function () { return $("#DictType").val(); },
// DictCode: function () { return $("#DictCode").val(); }
// },
//datatype: "json", 为了使进入界面时不显示数据，注释
datatype: "json",
loadonce: true, //用于实现分页功能
colNames: ['部门编号', '部门名称', 'LOC'],
colModel: [
{ name: 'DEPTNO', index: 'DEPTNO', sortable: false, align: 'left', width: 100, editable: true, edittype: 'text' },
{ name: 'DNAME', index: 'DNAME', sortable: false, width: 110, editable: true, edittype: 'text' },
{ name: 'LOC', index: 'LOC', sortable: false, width: 120, editable: true, edittype: 'text'}],
rowNum: 10,
rowList: [10, 20, 25],
pager: jQuery('#DepetmentTable_pager'),
sortname: 'DEPTNO',
viewrecords: true,
rownumbers: true,
sortorder: "asc",
caption: "数据",
width: 'auto',
height: 200,
imgpath: '',
jsonReader: {
root: "data"
}
});
$("#DepetmentTable").jqGrid('navGrid', '#DepetmentTable_pager', { edit: false, add: false, del: false });
});
第七步：使用IIS“运行”程序。
右击项目，选择属性，如图9所示。
图 9
建立虚拟目录：图10所示
图 10
第八步：运行程序。
（1）在项目中点击右键，选择“重新生成”
（2）在浏览器中输入：http://localhost/LearnjqGrid/Department/Index，便可以访问
第九步：运行结果如图11所示
图 11
额，不没有调试。。。。。
调试之后的界面如图12所示
【备注】欢迎指正和讨论
【结束】
分享到：
相关推荐
jqGrid for ASP.NET MVC 4.0
jqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zip
实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网：http://www.xueit.com/asp.net/show-9768-3.aspx实例讲解在ASP.NET MVC模式通过jQgrid表格操作 文章来自学IT网：...
asp.net MVC5 + Bootstrap 增删改查分页(重点是里面的table及分页用法)。另外说一下项目用到了bootstrap-table,bootstrap-dialog,bootstrap-daterangepicker组件，很不错的几个组件
ASP.NET MVC JQGRID 增删改查 实例
一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码！ 采用主流框架，容易上手，简单易学，学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助解决.NET项目70%的重复工作，让开发更多关注业务...
jqGrid 是一个用来显示网格数据的jQuery插件，本示例演示C#下使用jqGrid+MySQL和jqGrid+MSSQL显示datatable，以及在ASP.NET MVC下使用jqGrid的源码范例。
jQuery ASP.Net MVC ...一个ASP.Net MVC兼容包基础上完成控制jQuery和jqGrid框架。 * Ajax的分页，编辑，分格，批量更新 * 标准widgets，如DatePicker * 还有更多- 所有.NET Fluent-like配置和intellisense支持。
主要为大家详细介绍了ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项，感兴趣的小伙伴们可以参考一下
jqgrid-sample ASP.NET MVC 中的 JQuery Grid 示例项目
附件都是代码生成器的模板文件 代码生成器请下载“动软代码生成器” ，模板文件解压后放在template 下 模板基于MVC3，iBATIS jqgrid 架构
•核心框架：ASP.NET MVC5、WEB API •持久层框架：EntityFramework 6.0 •定时计划任务：Quartz.Net组件 •安全支持：过滤器、Sql注入、请求伪造 •服务端验证：实体模型验证、自己封装Validator •缓存...
支持ASP.NET Core中的jqGrid使用 入门 Lib.Web.Mvc在上可用。 PM> Install-Package Lib.Web.Mvc Alpha软件包可在上。 文献资料 库文档可作为发行版（chm文件）的一部分获得。 还有一系列描述该库主要功能的博客...
Lib.AspNetCore.Mvc.JqGrid 一组库，它们支持和ASP.NET Core中的使用。 这是从jqGrid的相关功能ASP.NET核心演进 。 Lib.AspNetCore.Mvc.JqGrid.Infrastructure-表示jqGrid选项的类，枚举和常量。 由所有库共享。 Lib...
JQuery UI Widgets是本人非常喜欢的一套前端JS组件，日常开发中基于原有的jquery ui widget js代码进行开发,需要写非常多的重复代码，同时一些现有组件无法满足需求的情况下，需要对现有组件进行扩展，本文使用一套...
核心框架：ASP.NET MVC5、WEB API 持久层框架：EntityFramework 6.0 定时计划任务：Quartz.Net组件 安全支持：过滤器、Sql注入、请求伪造 服务端验证：实体模型验证、自己封装Validator 缓存框架：微软自带...
JQsuit包含了JQgrid JQchart等控件内容，是非常不错的表格和图表控件。 详情可参考：http://www.trirand.net/demo/aspnet/webforms/jqgrid/ 包括了4.5 和4.5.2的破解版。...ASP.NET MVC 的请绕道先。