ASP.net MVC和jqGrid

过去的两周我正试着让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:

   2:  

   3:

   4:

   5:

   6:    

   7:    

   8:        

   9:     <!-- In head section we should include the style. sheet for the grid --&gt

  10:    

  11:     

  12:     ">

  13:     ">

  14:     

  15:  

  16:

  17:

  18:    

  19:        

  20:            

  21:                 My Sample MVC Application

  22:            

  23:            

  24:                

  25:                    

  26:                

  27:                

  28:                    

  29:                

  30:            

  31:        

  32:        

  33:            

  34:                

  35:            

  36:            

  37:                

  38:                     My Sample MVC Application © Copyright 2008

  39:                

  40:            

  41:        

  42:    

  43:

  44:

 

我的Content Page看起来如下： 

 

 1:

   2:     CodeBehind="Index.aspx.cs" Inherits="JqGridTest.Views.Home.Index" %>

   3:  

   4:

   5:  

   6:

   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:

  30:  

  31:     <!-- the grid definition in html is a table tag with class 'scroll' --&gt

  32:    

  33:    

  34:     <!-- pager definition. class scroll tels that we want to use the same theme as grid --&gt

  35:    

  36:    

  37:

 

我的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: }

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/7383074/viewspace-584591/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/7383074/viewspace-584591/