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来实现这种机构菜单;

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