最近花了不少時間在重構和進一步提煉我的Web開發框架上，力求在使用者體驗和介面設計方面，和Winform開發框架保持一致，而在Web上，我主要採用EasyUI的前端介面處理技術，走MVC的技術路線，在重構完善過程中，很多細節花費不少時間進行研究和提煉，一步步走過來，也積累了不少經驗，本系列將主要介紹我在進一步完善我的Web框架基礎上積累的經驗進行分享，本隨筆主要介紹使用如何使用Json實體類構建選單資料，然後在主介面中進行使用。

 選單的介面效果如下所示，選單分為一級選單、二級選單、三級選單，他們各自在位置上是不同的定義，這個介面佈局規定三級選單就是最小的選單節點了，也就是葉子節點。

要實現以上的選單，需要把選單定義成相關的Json資料，然後通過指令碼把它們新增到介面裡面去，如下資料和指令碼就是定義相關的選單資料的。

    <script type="text/javascript">
        var _menus = {
            "default": [
                {
                    "menuid": "1", "icon": "icon-computer", "menuname": "許可權管理",
                    "menus": [
                              { "menuid": "13", "menuname": "使用者管理", "icon": "icon-user", "url": "/User/Index" },
                              { 
 
"menuid": "14", "menuname": "組織機構管理", "icon": "icon-organ", "url": "/OU/Index" },
                              { "menuid": "15", "menuname": "角色管理", "icon": "icon-group-key", "url": "/Role/Index" },
                              { "menuid": "16", "menuname": "功能管理", "icon": "icon-key", "url": "/Function/Index" },
                              { 
 
"menuid": "17", "menuname": "登陸日誌", "icon": "icon-view", "url": "/LoginLog/Index" }
                    ]
                },
               {
                   "menuid": "2", "icon": "icon-user", "menuname": "其他管理",
                   "menus": [{ "menuid": "21", "menuname": "修改密碼", "icon": "icon-lock", "url": "javascript:ShowPasswordDialog()" }
                   ]
               }
            ],
            "point": [
                {
                    "menuid": "3", "icon": "icon-computer", "menuname": "事務中心",
                    "menus": [
                              { "menuid": "33", "menuname": "測試選單1", "icon": "icon-user", "url": "../Commonpage/building.htm" },
                              { "menuid": "34", "menuname": "測試選單2", "icon": "icon-organ", "url": "../Commonpage/building.htm" },
                              { "menuid": "35", "menuname": "測試選單3", "icon": "icon-group-key", "url": "../Commonpage/building.htm" },
                              { "menuid": "36", "menuname": "測試選單4", "icon": "icon-key", "url": "../Commonpage/building.htm" }
                    ]
                },
                {
                    "menuid": "4", "icon": "icon-user", "menuname": "其他選單",
                    "menus": [{ "menuid": "41", "menuname": "測試選單5", "icon": "icon-lock", "url": "../Commonpage/building.htm" }]
                }
            ]
        };

        function showSubMenu(url, title, menuCategory, defaultIcon) {
            if (defaultIcon == null || defaultIcon == "") {
                defaultIcon = "icon-table";
            }
            addTab(title, url, "icon " + defaultIcon);
            Clearnav();
            if (menuCategory != "") {
                addNav(_menus[menuCategory]);
            }
        }
    </script>

從上面的選單Json資料來看，它是一個字典的Json資料列表，在Web介面上，通過下面的程式碼可以展開上面Json定義的二級選單。

<li><a href="#" onclick="showSubMenu('/User/Index', '使用者管理', 'default')">許可權管理</a></li>

雖然上面的定義的資料能夠解決選單的顯示問題，但是對於我們需要動態控制的選單，顯然做不到，因此需要把上面的json資料，通過選單控制器進行動態生成才可以，然後在腳本里面通過Jquery的方式獲取Json資料，如下所示。

        var _menus = {};
        //同步獲取
        $.ajax({
            type: 'GET',
            url: '/Menu/GetMenuData?r=' + Math.random(),
            async: false,//同步
            dataType: 'json',
            success: function (json) {
                _menus = json;
            },
            error: function (xhr, status, error) {
                alert("操作失敗"); //xhr.responseText
            }
        });

上面的GetMenuData方法，通過後臺的控制器進行動態生成的，它的程式碼如下所示

        /// <summary>
        /// 獲取樹形展示資料
        /// </summary>
        /// <returns></returns>
        public ActionResult GetMenuData()
        {
            string json = GetTreeJson("-1", "", "");
            json = json.Trim(',');
            return Content(string.Format("[{0}]", json));
        }

        /// <summary>
        /// 遞迴獲取樹形資訊
        /// </summary>
        /// <returns></returns>
        private string GetTreeJson(string PID, string folderIcon, string leafIcon)
        {
            string condition = string.Format("PID='{0}' ", PID);
            List<MenuInfo> nodeList = BLLFactory<Menu>.Instance.Find(condition);
            StringBuilder content = new StringBuilder();
            foreach (MenuInfo model in nodeList)
            {
                string ParentID = (model.PID == "-1" ? "0" : model.PID);
                string subMenu = this.GetTreeJson(model.ID, folderIcon, leafIcon);
                string parentMenu = string.Format("{{ \"id\":\"{0}\", \"pId\":\"{1}\", \"name\":\"{2}\" ", model.ID, ParentID, model.Name);
                if (string.IsNullOrEmpty(subMenu))
                {
                    if (!string.IsNullOrEmpty(leafIcon))
                    {
                        parentMenu += string.Format(",\"icon\":\"{0}\" }},", leafIcon);
                    }
                    else
                    {
                        parentMenu += "},";
                    }
                }
                else
                {
                    if (!string.IsNullOrEmpty(folderIcon))
                    {
                        parentMenu += string.Format(",\"icon\":\"{0}\" }},", folderIcon);
                    }
                    else
                    {
                        parentMenu += "},";
                    }
                }

                content.AppendLine(parentMenu.Trim());
                content.AppendLine(subMenu.Trim());
            }
            return content.ToString().Trim();
        }

不過對於上面的程式碼，我覺得雖然能解決問題，能夠正確生成相關的Json程式碼，但是感覺不夠優雅，我不喜歡使用拼湊方法構建資料。

前面看了Menu的Json指令碼，我說過他是一個字典型別的Json資料格式，那麼我們是否可以通過字典和實體資訊來承載，然後直接通過ToJson方法出來呢？答案是可以的。

        /// <summary>
        /// 獲取選單的樹形展示資料
        /// </summary>
        /// <returns></returns>
        public ActionResult GetMenuData()
        {
            Dictionary<string, List<MenuData>> dict = new Dictionary<string, List<MenuData>>();
                                                     
            List<MenuInfo> list = BLLFactory<Menu>.Instance.GetTopMenu(MyConstants.SystemType);
            int i = 0;
            foreach (MenuInfo info in list)
            {
                if (!HasFunction(info.FunctionId))
                {
                    continue;
                }              
                List<MenuData> treeList = new List<MenuData>();
                List<MenuNodeInfo> nodeList = BLLFactory<Menu>.Instance.GetTreeByID(info.ID);
                foreach (MenuNodeInfo nodeInfo in nodeList)
                {
                    if (!HasFunction(nodeInfo.FunctionId))
                    {
                        continue;
                    }                                                                                                                                                                       
                    MenuData menuData = new MenuData(nodeInfo.ID, nodeInfo.Name, string.IsNullOrEmpty(nodeInfo.WebIcon) ? "icon-computer" : nodeInfo.WebIcon);
                    foreach (MenuNodeInfo subNodeInfo in nodeInfo.Children)
                    {
                        if (!HasFunction(subNodeInfo.FunctionId))
                        {
                            continue;
                        }
                        string icon = string.IsNullOrEmpty(subNodeInfo.WebIcon) ? "icon-organ" : subNodeInfo.WebIcon;
                        menuData.menus.Add(new MenuData(subNodeInfo.ID, subNodeInfo.Name, icon, subNodeInfo.Url));
                    }
                    treeList.Add(menuData);
                }

                //新增到字典裡面，如果是第一個，預設用default名稱
                string dictName = (i++ == 0) ? "default" : info.ID;
                dict.Add(dictName, treeList);
            }

            string content = ToJson(dict);
            return Content(content.Trim(','));
        }

上面的程式碼，通過MenuData的物件資料，來承載相關的選單資訊，然後把它新增到字典Dictionary<string, List<MenuData>> dict 裡面就可以了，這樣的程式碼，沒有那麼多拼湊出來的感覺，是不是很好看呢？把物件轉換為Json資料，直接通過ToJson就可以解決了，很簡單吧。

而選單的許可權控制，就是通過集合許可權管理進行判斷，父選單如果沒有許可權，就直接跳過，不在繼續生成下面的子選單，許可權判斷的如下所示。

if (!HasFunction(info.FunctionId))
{
       continue;
 } 

當然，在介面上展開二級選單的操作介面，也應該通過指令碼動態進行生成的，這樣才能做到所有的內容動態構建。

        <ul class="navigation" style="display:block">
            @Html.Raw(@ViewBag.HeaderScript)</ul>

上面使用ViewBag物件進行傳遞指令碼內容到介面上，其實後臺生成的操作，是一行HTML程式碼就是了，程式碼類似下面的內容。

<li><a href="#" onclick="showSubMenu('/User/Index', '使用者管理', 'default')">許可權管理</a></li>

最後出來的效果，就是部落格開始介紹的介面截圖，沒有任何變化，但是程式碼我們已經經過了幾步的優化整理，看起來很清爽，更能實現動態變化了。

有空可以回顧下其他兩篇的經驗總結內容：

基於MVC4+EasyUI的Web開發框架的系列文章：