Kendo UI PanelBar For MVC 生成下拉菜单

kendo ui panelbar 官网地址http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/panelbar/overview

给出三种绑定方式,items,通过绑定xml(sitemap),层级模型

这里通过第三种方式实现panelbar绑定数据,例如举例实现如下;

表一:Category

CREATE TABLE [dbo].[Category]([CategoryID] [nvarchar](50) NOT NULL,[CategoryName] [nvarchar](50) NOT NULL,) ON [PRIMARY]

表二:Product

CREATE TABLE [dbo].[Product]([ProductID] [nvarchar](50) NOT NULL,[ProductName] [nvarchar](50) NOT NULL,[CategoryID] [nvarchar](50) NULL,) ON [PRIMARY]

其中CategoryID 作为Product表中的外键

看webform页面是怎么实现的

@model IEnumerable<Kendo.UI.Models.Category>@{    ViewBag.Title = "Menu";}<h2>    Menu</h2>@(Html.Kendo().PanelBar()    .Name("panelbar")    .BindTo(Model, mappings =>    {        mappings.For<Kendo.UI.Models.Category>(binding => binding            .ItemDataBound((item, category) =>            {                item.Text = category.CategoryName;            })            .Children(category => category.Product));        mappings.For<Kendo.UI.Models.Product>(binding => binding            .ItemDataBound((item, product) =>            {                item.Text = product.ProductName;                item.Url = "/Home/Index";//如果换成菜单,可以填写菜单的URl;            })        );    }))

而Controller中,首先要绑定源数据

        public ActionResult Category()        {            ViewBag.Message = "Now get categroy.";            Kendo.UI.Models.kendoEntities db = new Models.kendoEntities();            return View(db.Category);        }

这样就可以显示出来了,截个图看看;

以上通过分类和商品做个举例;

对于菜单一个表来说,我暂时没有好的办法来处理出来,因为ParentMenuID和MenuID都存在一个表中,涉及自身与自身的关联;

因为我的菜单结构比较简单,所以我用了个比较好理解的方法,干脆就分成两个表,一个Parent表和一个Child表,结构类似上面,这样就能用panelbar来实现这种机构菜单;

这都是使用过程中个人体验作为一个记录.