在ASP.NET MVC 4中使用Kendo UI Grid-阿里云开发者社区

开发者社区> 寒凝雪> 正文

在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

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


20120622122410197.png

创建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(); 
        } 
    }

}

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

本文来自云栖社区合作伙伴“doNET跨平台”,了解相关信息可以关注“opendotnet”微信公众号

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Blend的一些问题
原文:使用Blend的一些问题   WPF开发,界面处理首选Blend,如果你开发了两年WPF都没接触过blend(当然这种几率不高),或者你刚接触WPF,可以考虑使用Blend,这货也算得上一个神器,上手也不难。
891 0
《圣殿祭司的ASP.NET4.0专家技术手册》---- 1-14 项目同时使用C# 与VB语言及多组件的技巧
早期VS.NET 2002及VS.NET 2003的Visual Studio工具不支持多个组件文件(Assembly),也就是项目编译后只会产生一个dll组件,而一个组件只允许包含一种语言(因为系统会调用对应C#或VB编译程序进行编译),因此在同一个项目中要使用两种语言是办不到的;但在VS 2010中,因为项目支持多个组件,所以利用这个特性就可以同时使用两种以上的语言(如C#与VB),因此.cs或.vb的类别在项目中就可以直接拿来使用,直接就可以new instance,不需要先编译成dll文件再加以引用。
1418 0
ListView嵌套GridView使用详解
MainActivity如下: package cn.testlistviewandgridview; import java.util.ArrayList; import java.
965 0
+关注
5854
文章
223
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载