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來實現這種機構菜單;

這都是使用過程中個人體驗作爲一個記錄.