众果搜的博客

脚踏大地,仰望星空,致力于在线网络工具的开发与普及,以及其他思考

Search(博客搜索)

热文排行

最近发表

最新评论及回复

« 处女率受所学科目的影响很大嚼口香糖可以提高孩子的数学成绩 »

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: <%@ 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 &copy; 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

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80722 Code detection by Codefense

Copyright www.zhongguosou.com. Some Rights Reserved.