Kendo UI 是Telerik推出的一套based on jQuery 的 Framework，提供了很多控件(Menu 、Grid 、Combox等...)， 底层以Html5 + jQuery 来打造，并且兼容于各大浏览器，包含IE7、IE8。相关介绍可以参考AJAX式数据清单的新选择-Kendo UI Grid。

以下内容参考台湾的黑老大的文章：在ASP.NET MVC 4中使用Kendo UI Grid

  1. 建立一个ASP.NET MVC 4专案
  • 使用NuGet安装KendoUIWeb及KendoGridBinder

  1. 创建SimMemberInfo Model类，放到Model目录下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.Reflection;

namespace MvcApplication2.Models
{
    public class SimMemberInfo
    {
        public string UserNo; //会员编号
        public string UserName; //会员名称
        public DateTime RegDate; //注册日期
        public int Points; //累积点数

//模拟数据源
        public static List<SimMemberInfo> SimuDataStore = null;

static SimMemberInfo()
        {
            Random rnd = new Random();
            //借用具名颜色名称来产生随机数据
            string[] colorNames = typeof(Color)
                .GetProperties(BindingFlags.Static | BindingFlags.Public)
                .Select(o => o.Name).ToArray();
            SimuDataStore =
                colorNames
                .Select(cn => new SimMemberInfo()
                {
                    UserNo = string.Format("C{0:00000}", rnd.Next(99999)),
                    UserName = cn,
                    RegDate = DateTime.Today.AddDays(-rnd.Next(1000)),
                    Points = rnd.Next(9999)
                }).ToList();
        }
    }

}

  1. 要引用Kendo UI，需要载入必要的JS及CSS，编辑App_Start/BundleConfig.cs，加入以下程序:

bundles.Add(new ScriptBundle("~/bundles/kendoUI").Include("~/Scripts/kendo/2012.1.322/kendo.web.min.js"));
         //经实测，SytleBundle virtualPath参数使用"2012.1.322"会有问题，故向上搬移一层
         //将/Content/kendo/2012.1.322的内容搬至Content/kendo下       
         bundles.Add(new StyleBundle("~/Content/kendo/css").Include("~/Content/kendo/kendo.common.min.css",     
             "~/Content/kendo/kendo.blueopal.min.css"
             ));

由于CSS文件路径会被当成图片文件的基准，原本Kendo UI的.css及图图片被放在~/Content/kendo/2012.1.322/下，理论上StyleBundle应设成"~/Content/kendo/2012.1.322/css”，才能引导浏览器到该目录下取用图文件。不幸地，我发现StyleBundle的virtualPath参数出现2012.1.322时，会导致Styles.Render("~/Content/kendo/2012.1.322/css”)时传回HTTP 404错误~ 为克服问题，我决定将2012.1.322目录的内容向上搬一层，直接放在~/Content/keno目录下，并将virtualPath设成"~/Content/kendo/css"，这样就能避开问题。

在~/Views/Shared/_Layout.cshtml中:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/kendo/css") 
    @Scripts.Render("~/bundles/modernizr")  
</head>
<body>
    @RenderBody()

@Scripts.Render("~/bundles/jquery", "~/bundles/kendoUI")
    @RenderSection("scripts", required: false)
</body>
</html>

  • 在Index.cshtml的代码如下：

@section Scripts
{
    <style>
        body { font-size: 9pt; }
        #dvGrid { width: 500px; }
        span.hi-lite { color: red; }
        #dvGrid th.k-header { text-align: center; }
    </style>
    <script>
        $(function () {
            //建立数据源对象
            var dataSrc = new kendo.data.DataSource({
                transport: {
                    read: {
                        //以下其实就是$.ajax的参数
                        type: "POST",
                        url: "/Home/Grid",
                        dataType: "json",
                        data: {
                            //额外传至后方的参数
                            keywd: function () {
                                return $("#tKeyword").val();
                            }
                        }
                    }
                },
                schema: {
                    //取出数据数组
                    data: function (d) { return d.data; },
                    //取出数据总笔数(计算页数用)
                    total: function (d) { return d.total; }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true
            });
            //JSON日期转换
            var dateRegExp = /^\/Date\((.*?)\)\/$/;
            window.toDate = function (value) {
                var date = dateRegExp.exec(value);
                return new Date(parseInt(date[1]));
            }
            $("#dvGrid").kendoGrid({
                dataSource: dataSrc,
                columns: [
                    { field: "UserNo", title: "会员编号" },
                    { field: "UserName", title: "会员名称",
                        template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #'
                    },
                    { field: "RegDate", title: "加入日期",
                        template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#'
                    },
                    { field: "Points", title: "累积点数" },
                ],
                sortable: true,
                pageable: true,
                dataBound: function () {
                    //AJAX数据Bind完成后触发
                    var kw = $("#tKeyword").val();
                    //若有设关键词，做Highlight处理
                    if (kw.length > 0) {
                        var re = new RegExp(kw, "g");
                        $(".u-name").each(function () {
                            var $td = $(this);
                            $td.html($td.text()
                           .replace(re, "<span class='hi-lite'>$&</span>"));
                        });
                    }
                }
            });
            //按下查询钮
            $("#bQuery").click(function () {
                //要求数据源重新读取(并指定切至第一页)
                dataSrc.read({ page: 1, skip: 0 });
                //Grid重新显示数据
                $("#dvGrid").data("kendoGrid").refresh();
            });
        });
    </script>
}
<div style="padding: 10px;">
    关键词:
    <input id="tKeyword" /><input type="button" value="查询" id="bQuery" />
</div>
<div id="dvGrid">
</div>

  • HomeController.cs的Grid() Action ：

public JsonResult Grid(KendoGridRequest request, string keywd)
      {
          var result = SimMemberInfo.SimuDataStore.Where(o => o.UserName.Contains(keywd));
          return Json(new KendoGrid<SimMemberInfo>(request, result));
      }

只要return Json(new KendoGrid<T>(KendoGridRequest, IEnumerable<T>))，余下的换页、排序，甚至字段过滤功能，就都交给KendoGridBinder全权处理啰!

转载于:https://www.cnblogs.com/shanyou/archive/2012/06/22/2558609.html

在ASP.NET MVC 4中使用Kendo UI Grid相关推荐

  1. 【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样.服务器端和客户端有许多可用的第三方库,这些 ...

  2. 关于ASP.NET MVC P5中CheckBox的HtmlHelper方法的bug。

    在ASP.NET MVC P5中,当你使用这样的方法输出CheckBox:<%=Html.CheckBox("checkTest")%>,在浏览器上除了你期望看到的代码 ...

  3. 在ASP.NET MVC应用中开发插件框架（中英对照）

    [原文] Developing a plugin framework in ASP.NET MVC with medium trust [译文] 在ASP.NET MVC应用中开发一个插件框架 I'v ...

  4. 使用Donut Caching和Donut Hole Caching在ASP.NET MVC应用中缓存页面

    使用Donut Caching和Donut Hole Caching在ASP.NET MVC应用中缓存页面 使用Donut Caching和Donut Hole Caching在ASP.NET MVC ...

  5. 在ASP.NET MVC 模型中 选择最好的方法将多个model（数据模型）传递到视图

    在ASP.NET MVC 模型中 选择最好的方法将多个model(数据模型)传递到视图 前提介绍 这个文章我们要讨论,在ASP.NET MVC模型的项目中,怎么选择一个最有效的方式来将多个数据模型(m ...

  6. ASP.net mvc开发中使用纯html如何创建FCKeditor编辑器的使用

    http://www.cnblogs.com/esshs/archive/2008/12/03/1346326.html FCKeditor下载路径: http://sourceforge.net/p ...

  7. 使用ASP.NET MVC Futures 中的异步Action

    在ASP.NET MVC中使用异步是比较麻烦的,从RC1版开始ASP.NET MVC Futures中提供了几个支持异步的类. 相关的类有:AsyncActionDescriptor.AsyncCon ...

  8. ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

    在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...

  9. 使用ASP.NET MVC Futures 中的异步Action 【转】

    之前看过老赵这两篇文章.也研究了一下老赵异步的实现方式. 不过感觉自己扩展的话,在ASP.NET MVC中使用异步还真是麻烦,刚好看到从RC1版开始 ASP.NET MVC Futures中提供了几个 ...

最新文章

  1. Vware Workstation pro 12|虚拟机
  2. 2-1 什么是人工智能|人工智能框架TensorFlow应用实践
  3. Android之如何判断设备是平板还是手机
  4. 如何root安卓手机_安卓Root+卡开机画面救砖教程丨以一加手机为例
  5. Linux 命令之 cut
  6. 蝙蝠侠一键改udid软件_对于您的第一个HTML代码，让我们帮助蝙蝠侠写一封情书...
  7. 电脑主页面上的计算机没了,电脑界面上的internet explorer 没有了
  8. Python库安装注意事项
  9. Padavan（老毛子）脚本自动切换网关和 DNS 服务器
  10. 今日头条信息流 - 广告策略
  11. 【笔记记录】如何写论文？论文的基本结构是什么。
  12. 三星6818芯片火焰报警器驱动的编写
  13. win10打开蓝牙_用了N年也未必知！Win10竟藏有这么多实用功能
  14. 让模态浮出水面的S2 刘易斯逻辑之八
  15. JAVA三角形边长定义_Java编译：定义三角形的三条边长a=4,b=8.54,c=4.44；求三角形的周长d...
  16. Java实现设计模式之——单例模式
  17. SAAS 客服云平台市场调研报告
  18. 2018年腾讯校招和小米校招本人所做笔试题——前端Web开发工程师方向
  19. ETCD启动不起来-超时问题
  20. 浅谈Visitor访问者模式

热门文章

  1. 【蓝桥杯Java_C组·从零开始卷】第八节、集合——list详解(ArrayList、 LinkedList 和 Vector之间的区别)
  2. sqlserver数据恢复（100%可用）
  3. 11G延迟密码验证的取消
  4. 北京周末去哪儿 —— 玉渊潭
  5. 判断是否为微信环境下打开的网页
  6. 深入浅出MySQL事务处理和锁机制
  7. primefaces 查询 点击按钮 加载 动画 ajax loader
  8. MVC 中 Razor 无限分类的展示
  9. onkeyup，onkeydown和onkeypress
  10. Redis Master/Slave 实践