过去的两周我正试着让JQGrid与Asp.net MVC一起工作。发现并不是很难。你需要注意的是放入页面的javscript，再不需要进行其他的工作了。
解决的步骤是什么：
- 下载jqGrid javscript文件。
- 建立一个asp.net MVC的应用。
- 在Master页面中包括进JS文件。只需要包括你需要的文件即可。
- 然后添加Grid到Content page中。
- 现在最重要的事情是URL，在Controller中指出动作，动作提供数据给Grid，这个controller返回Jeson格式的数据给Grid。
- 然后我再建立简单的动作，返回jeson格式的数据给Grid。
我的Master页看起来如下：
1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="JqGridTest.Views.Shared.Site" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head runat="server">
6: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
7: <title>
8: <%= Html.Encode(ViewData["Title"]) %></title>
9: <!-- In head section we should include the style sheet for the grid -->
10: <link rel="stylesheet" type="text/css" media="screen" href="~/themes/sand/grid.css" />
11:
12: <script type="text/javascript" src="<%= this.ResolveClientUrl("~/js/jquery-1.2.6.js") %>"></script>
13: <script type="text/javascript" src="<%= this.ResolveClientUrl("~/js/grid.base.js") %>"></script>
14:
15:
16: </head>
17: <body>
18: <div class="page">
19: <div id="header">
20: <p id="logo">
21: <a href="">My Sample MVC Application</a>
22: </p>
23: <ul id="menu">
24: <li>
25: <%= Html.ActionLink("Home", "Index", "Home")%>
26: </li>
27: <li>
28: <%= Html.ActionLink("About Us", "About", "Home")%>
29: </li>
30: </ul>
31: </div>
32: <div id="main">
33: <div id="content">
34: <asp:ContentPlaceHolder ID="MainContent" runat="server" />
35: </div>
36: <div id="footer">
37: <p>
38: My Sample MVC Application © Copyright 2008
39: </p>
40: </div>
41: </div>
42: </div>
43: </body>
44: </html>
我的Content Page看起来如下：
1: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"
2: CodeBehind="Index.aspx.cs" Inherits="JqGridTest.Views.Home.Index" %>
3:
4: <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
5:
6: <script type="text/javascript">
7: $(document).ready(function() {
8: $("#list").jqGrid({
9: url:'../../Home/Example',
10: datatype:'json',
11: myType:'GET',
12: colNames:['Id','Name','Description'],
13: colModel:[
14: {name:'id',index:'id',width:55,resizable:true},
15: {name:'name',index:'name',width:90,resizable:true},
16: {name:'description',index:'description',width:120,resizable:true}],
17: pager:$('#pager'),
18: rowNum:10,
19: rowList:[10,20,30],
20: sortname:'id',
21: sortorder:'desc',
22: viewrecords:true,
23: multiselect: true,
24: multikey: "ctrlKey",
25: imgpath:'../../img/basic/images',
26: caption: 'My first grid'
27: });
28: });
29: </script>
30:
31: <!-- the grid definition in html is a table tag with class 'scroll' -->
32: <table id="list" class="scroll" cellpadding="0" cellspacing="0">
33: </table>
34: <!-- pager definition. class scroll tels that we want to use the same theme as grid -->
35: <div id="pager" class="scroll" style="text-align: center;">
36: </div>
37: </asp:Content>
我的Controller看起来如下：
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6:
7: namespace JqGridTest.Controllers
8: {
9: public class HomeController : Controller
10: {
11: public ActionResult Index()
12: {
13: ViewData["Title"] = "Home Page";
14: ViewData["Message"] = "Welcome to ASP.NET MVC!";
15:
16: return View();
17: }
18:
19: public ActionResult About()
20: {
21: ViewData["Title"] = "About Page";
22:
23: return View();
24: }
25: public ActionResult example()
26: {
27: var page = new { page = 1 };
28:
29: var rows = new object[2];
30: rows[0] = new { id = 222, cell = new[] { "222", "Blue", "This is blue" } };
31: rows[1] = new { id = 2, cell = new[] { "2", "Red", "This is red" } };
32:
33: //var endarray = new[] {page, rows};
34:
35:
36: var result = new JsonResult();
37: result.Data = new { page = 1, records = 2, rows, total = 1 };
38:
39: return result;
40: }
41: }
42: }
Debug，你就可以看到jQGRid了。
原文地址：http://bartreyserhove.blogspot.com/2008/08/aspnet-mvc-and-jqgrid.html
