Kendo UI for ASP.NET MVC 的一些使用经验(转)
转自 http://blog.csdn.net/dj2008/article/details/45313805
最近的项目里用到了Kendo UI。这货很好很强大,但可惜官方文档组织的并不是很好,有很多配置非常坑,需要自己去发掘。
一、版本
首先,是版本的区别。简单的来说,免费版的Kendo UI是不包含DataViz组件的,即没有图表功能,并且也没有服务端的Helper,比如MVC的wapper,所以,免费版只有js和css,不会给你dll的。
收费版,比如for MVC的这个版本,除了包含dataviz以外,还包含预先定义好的mvc wapper,所以你需要引用dll才能使用kendo的html helper。这些Helper的功能仅仅是生成对应的JS,对于熟悉C#的程序员来说,图个方便而已。不过不得不承认,这些helper的设计是一流的,使用lambda表达式来配置参数感觉非常棒。
总结一下,如果你的团队前端程序员非常碉,你可以使用免费版,但不包含图表组件。如果你是像我一样的屌丝ASP.NET猿,又为了快速开发应用,你就应该买收费版。999美元,卖个肾就有了。
二、和bootstrap 3.0的样式冲突问题
一开始我就发现kendo ui的最新版和bootstrap 3.0的样式有小冲突了,官方论坛里也说目前不支持。但是有个临时的解决办法,可以override一下bootstrap 3.0的CSS。不兼容的问题主要是因为box-sizing引起的:
/* kendo ui blow up hack with bootstrap 3.0 */ .k-widget,
.k-widget *,
.k-animation-container * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
} .k-window-titlebar.k-header {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
} .k-window-title {
font-size: 12px;
}
这段CSS记的加在bootstrap的后面,浏览器才会更具优先级使用后面的CSS覆盖前面的。
三、Grid的数据绑定
如果你发现Grid数据绑不上,首先检查这些问题:
1. jQuery引用了没?如果引用了,那它的位置是在哪里?按照MVC4以后的默认模板,jquery是在页面尾部的,而kendo生成的js会渲染在jquery的上面,这样就爆掉了。所以建议把jquery单独拿到header里面。
2. kendo.aspnetmvc.min.js引用了没?这个JS是专门为了配合kendo在服务端的代码而用的,有了它,grid就可以传递POST请求而不是GET请求,并且后台才能正确的做model binding。
首先,如果是binding to remote data的话,kendo要求后台返回JSON字符串,所以你的action必须返回JsonResult。当然,方法签名可以是ActionResult,毕竟JsonResult is-a ActionResult。
另外,参数必须含有kendo自己的request参数:public ActionResult GetChannelGridData( [DataSourceRequest]DataSourceRequest request )。
最后,拿到数据后,必须用kendo的dll里对IQueryable的拓展方法去撸一遍,才能撸成kendo grid认识的JSON格式:
var grid = list.ToDataSourceResult(request);
return Json(grid);
4. 关于分页、排序、筛选的服务端操作
简单的说,如果你的数据源是IQueryable的,比如从EntityFramework里返回的,那kendo ui grid会自动帮你处理所有的服务端操作。不然的话,你就应该看看custom binding的文档:
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding
四、Grid的外键列
Grid的外键列可以在编辑模式里自动变成下拉列表,不过这是个大坑,光看官网demo你肯定是撸不出来的。
首先,在后台,你需要一个方法来返回这个下拉列表:
private void PopulateChannels()
{
var channels = db.Channel
.Select(c => new ChannelViewDataModel
{
ChannelId = c.Id,
Title = c.Title
})
.OrderBy(e => e.Title).ToList(); ViewData["channels"] = channels;
ViewData["defaultChannel"] = channels.FirstOrDefault();
}
public ActionResult Index()
{
PopulateChannels();
return View();
}
然后,Grid里,对外键列这样配置:
columns.ForeignKey(p => p.ChannelId, (IEnumerable )ViewData["channels"], "ChannelId", "Title").Title("渠道");
DataSource里这样配置:
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.ChannelId).DefaultValue(((ChannelViewDataModel)ViewData["defaultChannel"]).ChannelId);
})
记的一定要配默认值,不然当下拉列表只有一个值的时候,是传不回后台的,这应该是个bug。
最后是个最最坑爹的,你需要一个EditorTemplate才能让它显示为下拉列表!!!
@using Kendo.Mvc.UI @(Html.Kendo().DropDownListFor(m => m)
.DataValueField("ChannelId")
.DataTextField("Title")
.BindTo((System.Collections.IEnumerable)ViewData["channels"])
)
坑爹还在继续,有了这个template,你还得在model里写一笔UIHint:
public class ActivationDataGridModel
{
public Guid Id { get; set; } [UIHint("ChannelDropDown")]
public Guid? ChannelId { get; set; } [UIHint("NumericSelector")]
public int NumberOfActivation { get; set; } [UIHint("Date")]
public DateTime? PubDate { get; set; } public ActivationDataGridModel()
{
Id = Guid.NewGuid();
}
}
五、如何让Kendo Window只有在点击后才弹出,并且居中显示
据我研究,在MVC Wapper里是不能实现的。这里我们必须手写JS了。
首先,你需要一个承载窗体内容的DIV:<div id="chartwindow"></div>
然后,用jquery给你的按钮或链接注册一个点击事件:
$(function () {
$("#viewChart").click(function () {
if (null == currentSelectedChannelId) {
alert('请先选择一个渠道');
}
else {
console.info(currentSelectedChannelId); $("#chartwindow").kendoWindow({
"modal": true,
"iframe": true,
"draggable": true,
"pinned": false,
"title": "@ViewBag.SelectedProductTitle",
"resizable": true,
"content": "@Url.Content("~/ActivationData/GetChartImage?channelId=")" + currentSelectedChannelId,
"width": 720, "height": 480,
"actions": ["Refresh", "Maximize", "Close"]
}); $("#chartwindow").data("kendoWindow").open();
$("#chartwindow").data("kendoWindow").center();
}
});
})
居中显示的代码在最后一行,.center()方法。
六、折线图Line Chart自动步长
默认情况下,你很容易做出这样的chart:
但是你需要这样的chart:
.CategoryAxis(axis => axis
.Justify()
.Date().AutoBaseUnitSteps(a =>
{
a.Days(1);
a.Weeks(2);
a.Months(3);
})
.BaseUnitStep(0)
.Categories(model => model.PubDate.Value)
)

分别给你需要的场景,比如日、周、月设置默认步长后,再指定BaseUnitStep为0就好了,0就是自动的,默认是1,会爆的
Kendo UI for ASP.NET MVC 的一些使用经验(转)的更多相关文章
- Kendo UI For ASP.NET MVC项目资源
一.官网: 1.Telerik大学官网:http://best.telerikacademy.com/ 二.相关博客 1.http://blog.csdn.net/magicsgxie/article ...
- UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1
Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...
- 下载文件时-修改文件名字 Redis在Windows中安装方法 SVN安装和使用(简单版) WinForm-SQL查询避免UI卡死 Asp.Net MVC Https设置
下载文件时-修改文件名字 1后台代码 /// <summary> /// 文件下载2 /// </summary> /// <param name="Fil ...
- Kendo UI for jQuery使用教程——使用NPM/NuGet进行安装
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- 【Kendo UI系列开发使用笔记】01-简单介绍
ps:接触telerik出品的kendo ui系列已经快有一年了,使用过程中也在不断踩坑填坑.这套UI用起来还是非常爽的,尤其asp.net mvc版的配合lambda表达式来配置参数非常流畅.这次对 ...
- Kendo UI for jQuery使用教程——创建自定义捆绑包
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI使用教程:入门指南
[Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...
- 5、ASP.NET MVC入门到精通——NHibernate代码映射
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 上一篇NHibernate学习笔记—使用 NHibernate构建一个ASP.NET MVC应用程序 使用的是xml进行orm映射,那么这一 ...
- ASP.NET MVC 学习7、为Model Class的字段添加验证属性(validation attribuate)
Adding Validation to the Model ,在Model中添加数据验证 参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-star ...
随机推荐
- WCF数据通讯
Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NET Fra ...
- java byte转无符号int
import java.io.ByteArrayInputStream; public class Test{ public static void main(String[] args) { byt ...
- [HTML] CSS3 边框
CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- MBW内存测试
在测试前,理应了解本机所具备的特点,比如CPU频率.内存频率.内存大小,等等信息. 查看CPU用如下命令(多少个核,频率,特性等): cat /proc/cpuinfo 查看内存用如下命令:(只有当前 ...
- mac java目录
/Library/Java/JavaVirtualMachines/jdk1.7.0_10.jdk/Contents/Home mac java的安装目录为 /Library/Java/JavaVir ...
- MySQL 常用命令(持续更新)
停止启动MySQL服务 停止:net stop mysql启动:net start mysql 查看正在运行的线程 SHOW PROCESSLIST SHOW FULL PROCESSLIST 杀死线 ...
- SQL Server 磁盘空间告急(磁盘扩容)转载
一.背景 在线上系统中,如果我们发现存放数据库文件的磁盘空间不够,我们应该怎么办呢?新买一个硬盘挂载上去可以嘛?(linux下可以直接挂载硬盘进行扩容),但是我们的SQL Server是运行在Wind ...
- Python之路【第十九篇】:爬虫
Python之路[第十九篇]:爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...
- 【原创】No matching distribution found for Twisted>=10.0.0 (from scrapy)
系统 Ubuntu14.04 python 2.7.11 运行 pip install scrapy 报错: No matching distribution found for Twiste ...