在ASP.NET MVC 4中使用Kendo UI Grid

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全权处理啰!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5 Canvas WebGL制作分离摩托车

工业方面制作图表,制作模型方面运用到 3d 模型是非常多的,在一个大的环境中,构建无数个相同的或者不同的模型,构建起来对于程序员来说也是一件相当头疼的事情,我们...

2065
来自专栏我和未来有约会

silverlight项目小结

最近又用silverlight做了一个小的东西,如图: ? 主要就是下边的导航,点击了后上边的大图和文字简介都跟着做相应的变化。 界面设计的思路:整个silve...

3836
来自专栏hightopo

原 基于HTML5 Canvas WebG

1213
来自专栏Android机动车

Flutter 实战:撸半个知乎日报~HomePage

https://github.com/zhujian1989/ZhihuDailyPurifyByFlutter

1162
来自专栏张善友的专栏

Microsoft Visual Studio International Pack

Visual Studio International Pack 包含一组类库,该类库扩展了.NET Framework对全球化软件开发的支持。使用该类库提供的...

19910
来自专栏吉浦迅科技

DAY21:阅读CUDA Array

982
来自专栏技术博客

Win8中缩放视图(SemanticZoom控件)

    SemanticZoom控件可以让用户缩放具有相同内容的两个不同视图。其中有一个是主视图。另外一个视图可以让用户进行快速导航。例如,当用户查看地址簿时,...

691
来自专栏机器学习算法与Python学习

Python:matplotlib

原文链接:http://blog.csdn.net/ywjun0919/article/details/8692018 来源于书籍:《Python科学计算》 ...

3998
来自专栏岑志军的专栏

Quartz2D实战-画板工具

1184
来自专栏JackieZheng

可视化工具solo show-----Prefuse自带例子GraphView讲解

  2014.10.15日以来的一个月,挤破了头、跑断了腿、伤透了心、吃够了全国最大餐饮连锁店——沙县小吃。其中酸甜苦辣,绝不是三言两语能够说得清道的明的。校招...

4926

扫码关注云+社区

领取腾讯云代金券