本示例显示了如何动态生成前端jqGrid代码,一般情况仅一行代码:

<%=Html.jqGrid<TestModel>(@"#jqT", "Test", "/Home/GridData/")%>

效果如下:

还不仅仅如此,利用MetaData,将自动对不同实体对象进行捆绑,自动生成Grid。

如果你想知道如何在asp.net MVC中使用jqGrid,请参考

http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx

看代码

1、 扩展HtmlHelper来输出一段Javascript到客户端。

代码

public static class jqGridExtensions
    {
        public static string jqGrid<T>(this HtmlHelper helper, string gridID, string caption, string url)
        {
            if (gridID.Substring(0, 1) != "#")
                gridID = "#" + gridID;
            string pagerID = string.Format("{0}_pager", gridID);
            StringBuilder sb = new StringBuilder();

sb.AppendLine(" <script type=\"text/javascript\">$(function(){");//jQuery(document).ready(function() {
            sb.AppendLine("$('%%GRIDID%%').jqGrid({".Replace("%%GRIDID%%", gridID));       //jQuery("#list").jqGrid({
            sb.AppendFormat("url:'{0}',", url);                            //        url: '/Home/GridData/',
            sb.Append("datatype: 'json',mtype: 'GET',");                 //        datatype: 'json',mtype: 'GET',
            sb.AppendFormat("colNames:[{0}],", GetColNames<T>());

sb.AppendFormat("colModel:[{0}],", GetColModel<T>());
            sb.Append("pager: '%%GRIDPAGERID%%',rowNum: 20,rowList: [10, 20, 50,100],".Replace("%%GRIDPAGERID%%", pagerID));
            sb.AppendFormat("sortname:'{0}',sortorder: 'desc',", GetSortField<T>());
            sb.Append("viewrecords: true,imgpath: '/themes/redmond/images',");
            sb.AppendFormat("caption: '{0}'", caption);
            sb.Append("});\n$('%%GRIDID%%').jqGrid('navGrid','%%GRIDPAGERID%%',{ edit: false, add: false, del: false });".Replace("%%GRIDID%%", gridID).Replace("%%GRIDPAGERID%%", pagerID));
            sb.Append("});</script>\n");
            sb.AppendFormat("<table id=\"{0}\" class=\"scroll\" cellpadding=\"0\" cellspacing=\"0\"></table>", gridID.Substring(1));
            sb.AppendFormat("<div id=\"{0}\" class=\"scroll\" style=\"text-align:center;\"></div>", pagerID.Substring(1));
            sb.AppendLine();
            return sb.ToString();
        }
}

上述代码隐含了3个函数来取得排序字段,Grid的列标题及ColModel。

2、 对Grid的列标题及排序字段,ColModel进行定制。以GetColModel为例:

代码

 private static string GetColModel<T>()
        {
            ModelMetadata metadata = ModelMetadataProviders.Current.GetMetadataForType(null, typeof(T));

StringBuilder sb = new StringBuilder();
            int width=100;
            foreach (ModelMetadata proMeta in metadata.Properties)
            {
                ColWidthAttribute colWidthAttr = GetCustomAttribute<ColWidthAttribute>(proMeta) as ColWidthAttribute;
                if (colWidthAttr != null)
                    width = colWidthAttr.Width;
                sb.Append("{");
                sb.AppendFormat("name:'{0}',index:'{0}',width:{1},align:'left'", proMeta.PropertyName, width);
                sb.Append("},");
            }
            sb.Remove(sb.Length - 1, 1);
            return sb.ToString();
            //return "{ name: 'Id', index: 'Id', width: 140, align: 'left' }, { name: 'Votes', index: 'Votes', width: 180, align: 'left' },{ name: 'Title', index: 'Title', width: 400, align: 'left',editable:true}";
        }

private static object GetCustomAttribute<T>(ModelMetadata proMeta) 
        {
            PropertyInfo property = proMeta.ContainerType.GetProperty(proMeta.PropertyName);
            object[] propertyAttributes = property.GetCustomAttributes(typeof(T), true);
            if (propertyAttributes.Length > 0)
            {
                return (propertyAttributes[0]);

}
            
            return null;
        }

3、 扩展一个列宽(Column Width)属性。

 public class ColWidthAttribute: Attribute
    {
        public ColWidthAttribute()
        {

}

public int Width { get; set; }
    }

4、 如何定制实体对象。

代码

    [DisplayName("ID")]//暂时用这个来表示排序字段
    public class TestModel
    {
        [DisplayName("编号")]
        [ColWidth(Width=100)]
        public int ID{get;set;}

[DisplayName("支持率")]
        [ColWidth(Width = 120)]
        public int Votes { get; set; }

[DisplayName("议题")]
        [ColWidth(Width = 300)]
        public string Title { get; set; }

}

5、 Controller中的代码。

代码

 public ActionResult GridData(string sidx, string sord, int page, int rows)
        {
            var jsonData = new
            {
                total = 1, // we'll implement later 
                page = page,
                records = 3, // implement later 
                rows = new[]{
                      new {id = 1, cell = new[] {"1", "-7", "Is this a good question?"}},
                      new {id = 2, cell = new[] {"2", "15", "Is this a blatant ripoff?"}},
                      new {id = 3, cell = new[] {"3", "23", "Why is the sky blue?"}}
                }
            };
            return Json(jsonData,JsonRequestBehavior.AllowGet);
        }

千万要记得JSon中设置JsonRequestBehavior.AllowGet,否则jqGrid中将只有表头没有数据。

6、 前端代码。

代码

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server">
    About Us
</asp:Content>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>About</h2>
    <p>
        Put content here.
    </p>
    <div>
    
    <%=Html.jqGrid<TestModel>(@"#jqT", "Test", "/Home/GridData/")%>
    </div>
</asp:Content>

看完,也许你会说这还叫代码少一点,我只是觉得这篇文章可能浪费你的时间。

看完,也许你觉得这个例子威力太小,还想要能够自动支持在jqGrid上是否能够编辑,以及子表支持,等等~~~,我就觉得很欣慰了。

转载于:https://www.cnblogs.com/PM_2004/archive/2010/02/25/1673722.html

在Asp.net MVC使用jqGrid--代码少点再少点相关推荐

  1. asp.net mvc 压缩html代码,浅谈ASP.NET中MVC 4 的JS/CSS打包压缩功能

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...

  2. asp.net mvc 微信支付代码分析(根据沐雪微信平台3.1商城业务来分析)

    开发微信应用,微信支付是永远要面对的.现在的微信支付相对以往已经很稳定,很少出现诡异情况.再加上无数人开发的经验分享,现在开发微信支付已经没什么难度了. 我这次主要是想基于沐雪微信平台的微商城业务来分 ...

  3. ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据

    上回说到jqgrid的基本配置,同时演示了显示数据的一种方法--datatype: "local".这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. ...

  4. 史上最全的ASP.NET MVC路由配置,以后RouteConfig再弄不懂神仙都难救你啦~

    https://www.cnblogs.com/zeusro/p/RouteConfig.html 转载于:https://www.cnblogs.com/zquan/p/9768212.html

  5. 《从零开始学习ASP.NET MVC 1.0》-开天辟地入门篇

    <从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...

  6. 从零开始学习ASP.NET MVC 入门

    <从零开始学习ASP.NET MVC 1.0> 文章导航 (一) 开天辟地入门篇 (二) 识别URL的Routing组件 (三) Controller/Action 深入解析与应用实例 ( ...

  7. asp.net mvc 点滴 一 asp.net mvc vs asp.net web forms

    MVC模式是一个大家很熟悉的设计模式,微软的asp.net mvc framework是给asp.net web forms提供了一个可替换的asp.net方案. Models:Model对象是程序的 ...

  8. Response.End()在Webform和ASP.NET MVC下的表现差异

    前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...

  9. asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页...

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

最新文章

  1. 双目立体视觉 I:标定和校正
  2. jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
  3. 7-20(排序) 奥运排行榜(25 分)
  4. GDCM:gdcm::StreamImageWriter的测试程序
  5. 哪里的mysql性能监控_mysql性能监控工具Innotop简介及配置
  6. 一次惊险的javascript经历,汗,现在想想都后怕
  7. 57 SD配置-科目分配-定义客户账户分配组
  8. 实时控制软件设计第二周作业-停车场门禁控制系统状态机设计
  9. 年底购物狂欢,移动支付安全不容忽视
  10. 读取内存数据,大航海家3的编辑器的一点思路
  11. 连连看.NET v1.2版下载
  12. 2021年老杨通信工程师中级互联网技术视频讲解
  13. 推动数据开放共享,释放数字经济创新活力
  14. 数据库身份证号用什么类型_《PHP和MySQL Web 开发》第8章 设计Web数据库
  15. 两种异步时钟同步化区别分析
  16. 记录自己关于Linux的学习和RHCSA、RHCE认证相关
  17. C#学习之Spilt用法
  18. R 语言的表格合并(实际运用)
  19. 毕业答辩PPT模板(10套免费+精选)
  20. MYSQL数据库导出和备份----mysqldump

热门文章

  1. (组合数求模=乘法逆元+快速幂) Problem Makes Problem
  2. server sql 水平分表_springboot集成Shardingsphere进行分库分表
  3. cp命令显示进度条_干货|| Linux常用命令大全
  4. nfc sim android8,Android NFC相关资料之MifareClassic卡(读写)
  5. sql server 2008表中计算机,电脑删除SQLsever2008表格数据出现“不能删除”怎么办
  6. 大学计算机一级b笔记,全国计算机等级一级B Excel考试整理笔记
  7. html支持的脚本语言,能不能让日志内容在支持html语言的同时支持一下脚本语言,拜托!拜托!...
  8. Java访问控制修饰符详解
  9. 【OpenCV 例程200篇】96. 谐波平均滤波器
  10. Mac下配置sublime实现LaTeX