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,会爆的