ITPub博客

首页 > Linux操作系统 > Linux操作系统 > ASP.net MVC和jqGrid

ASP.net MVC和jqGrid

原创 Linux操作系统 作者:elanglee 时间:2009-04-03 17:17:44 0 删除 编辑
过去的两周我正试着让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:
   4:
   5:
   6:    
   7:     </DIV> <DIV>   8:         <%= Html.Encode(ViewData["Title"]) %>
   9:     <!-- In head section we should include the style. sheet for the grid -->
  10:    
  11:     
  12:     ">
  13:     ">
  14:     
  15:  
  16:
  17:
  18:    
  19:        
  20:            
  21:                 My Sample MVC Application
  22:            

  23:            
  24:                
  •   25:                     <%= Html.ActionLink("Home", "Index", "Home")%>
      26:                
      27:                
  •   28:                     <%= Html.ActionLink("About Us", "About", "Home")%>
      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: <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"

       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' -->
      32:    
      33:    
      34:     <!-- pager definition. class scroll tels that we want to use the same theme as grid -->
      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/,如需转载,请注明出处,否则将追究法律责任。

    上一篇: 好用的 Json.NET 2.0
    下一篇: .net下使用jqgrid
    请登录后发表评论 登录
    全部评论

    注册时间:2008-10-10

    • 博文量
      49
    • 访问量
      140524