Kendo UI for ASP.NET MVC 的一些使用经验

最近的项目里用到了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。

3. Action的写法。

首先，如果是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，会爆的！

Microsoft MVP for Azure