天天看點
傳回

MVC+EF+esayui初試（一 布局加菜單顯示）

最近都在做linq+ext.net的開發。這兩天想學習下MVC和ef，剛好，在看ext.js的時候也喜歡上了esayui，是以就想用mvc+ef+esayui做一個汽車網背景管理來加強下。在這裡也把我的經驗和大家分享下。好了開始項目的準備工作，先準備下EsayUI的一些檔案，可以到http://www.jeasyui.com/download/index.php下載下傳最新的easyui包，然後在頭部引入這個檔案

<link rel="stylesheet" type="text/css" href="/Content/Easy ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/Content/Easy ui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/Content/Easy ui/demo/demo.css">
    <script type="text/javascript" src="/Content/Easy ui/jquery.min.js"></script>
    <script type="text/javascript" src="/Content/Easy ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/Content/Easy ui/locale/easyui-lang-zh_CN.js"></script>

由于這幾個檔案是每個頁面通用的，是以把檔案加在布局頁中。這裡建了一個JSCom.cshtml布局頁，接着建立一個Index的控制器，添加Index視圖，并引用JSCom.cshtml布局頁,這裡附上前台index頁面的代碼

<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height: 60px; background: #B3DFDA; padding: 10px">
        north region  
    </div>
    <div data-options="region:'west',split:true,title:'管理'" style="width: 150px;">
        <div class="easyui-accordion" data-options="fit:true">
            <div title="菜單管理" data-options="iconCls:'icon-layout_content',tools: toolsAddMenu" style="overflow: auto;">
                <ul id="menu" class="easyui-tree" data-options="animate:true">
                </ul>
            </div>
            <div title="招聘管理" data-options="iconCls:'icon-user'">
                <ul id="zhaopin" class="easyui-tree">
                    <li data-options="iconCls:'icon-user_edit'">
                        <span>檢視招聘資訊</span>
                    </li>
                    <li data-options="iconCls:'icon-user_add'">
                        <span>添加招聘資訊</span>
                    </li>
                    <li data-options="iconCls:'icon-bin_closed'">
                        <span>檢視垃圾箱</span>
                    </li>
                </ul>
            </div>
            <div title="客戶意見管理" data-options="iconCls:'icon-email'">
                <ul id="yijian" class="easyui-tree">
                    <li data-options="iconCls:'icon-email_open'">
                        <span>檢視客戶意見</span>
                    </li>
                    <li data-options="iconCls:'icon-bin_closed'">
                        <span>檢視垃圾箱</span>
                    </li>
                </ul>
            </div>
            <div title="其他管理" data-options="iconCls:'icon-house'">
                <ul id="qita" class="easyui-tree">
                    <li data-options="iconCls:'icon-house'">
                        <span>其他管理1</span>
                    </li>
                    <li data-options="iconCls:'icon-house'">
                        <span>其他管理2</span>
                    </li>
                    <li data-options="iconCls:'icon-house'">
                        <span>其他管理3</span>
                    </li>
                    <li data-options="iconCls:'icon-house'">
                        <span>其他管理4</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <div id="win_Menu">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'center'" style="padding: 10px;">
                <div style="padding: 10px 0 10px 60px">
                    <form id="ff" method="post">
                        <table>
                            <tr>
                                <td>菜單所屬:</td>
                                <td>
                                    <input type="hidden" id="NID" name="ID" />
                                    <select id="TopID" name="TopID" class="easyui-combotree" style="width: 170px;" data-options="required:true,url:'/Menu/GetMenus'"></select>

                                </td>
                            </tr>
                            <tr>
                                <td>菜單名稱:</td>
                                <td>
                                    <input class="easyui-validatebox" type="text" name="Name" data-options="required:true" /></td>
                            </tr>
                            <tr>
                                <td>前台URL:</td>
                                <td>
                                    <input class="easyui-validatebox" type="text" name="Url" data-options="required:true,validType:'url'" /></td>
                            </tr>
                            <tr>
                                <td>背景URL:</td>
                                <td>
                                    <input class="easyui-validatebox" type="text" name="AdminUrl" data-options="required:true" /></td>
                            </tr>
                            <tr>
                                <td>顯示位置:</td>
                                <td>
                                    <input class="easyui-validatebox" type="text" name="Sort" data-options="required:true" /></td>
                            </tr>
                            @*                            <tr>
                                <td>圖檔:</td>
                                <td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"/></td>
                            </tr>*@
                            <tr>
                                <td>是否開放:</td>
                                <td>
                                    <select class="easyui-combobox" name="Display">
                                        <option value="1">是</option>
                                        <option value="0">否</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div data-options="region:'south',border:false" style="text-align: right; padding: 5px 0 0;">

                <a class="easyui-linkbutton" data-options="iconCls:'icon-accept'" href="javascript:void(0)" onclick="javascript:ffSubmit();">确定</a>
                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#win_Menu').window('close')">取消</a>
            </div>
        </div>
    </div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width: 100px; padding: 10px;">east region</div>
    <div data-options="region:'south',border:false" style="height: 50px; background: #A9FACD; padding: 10px;">south region</div>
    <div data-options="region:'center'">
        <div id="CTabs" class="easyui-tabs" data-options="fit:true">
            <div title="首頁" data-options="iconCls:'icon-house'">
                首頁
            </div>
        </div>
    </div>
</body>

View Code

這裡布局後，前台頁面如下：

MVC+EF+esayui初試（一 布局加菜單顯示）

這個說個細節問題，之前手動添加左側的樹形菜單，在添加<span>這個節點少個一閉合節點，結果找谷歌，火狐，ie8+都沒問題，在ie7以下布局都錯位了， 找了一段時間再發現，真是坑爹呀。

好了，接下來先做菜單管理這塊，由于菜單是動生成的，是以在js裡面通過url異步到背景擷取

$("#menu").tree({
                url: "/Menu/GetMenus", onContextMenu: function (e, node) {
                    e.preventDefault();
                    $(this).tree('select', node.target);
                    $('#m_menu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });

建立一個Menu控制器，添加GetMenus的方法，因為這裡考慮到菜單最多隻有兩級的情況，是以用拼接的方式生成

//菜單資料格式
        //[{
        //       "id": 1,
        //       "text": "My Documents",
        //       "attributes":{url:"/new/update"},
        //       "children": [{
        //           "id": 11,
        //           "text": "Photos",
        //           "state": "closed"
        //       }]
        //   },
        //   {
        //       "id": 2,
        //       "text": "My ",
        //   }      ]
        public ActionResult GetMenus()
        {

            StringBuilder stb = new StringBuilder();
            stb.Append("[{\"id\":0,\"iconCls\":\"icon-layout_content\",\"text\":\"首菜單\"},");
            List<Menu> parentMenu = apa.Menus.Where(p => p.TopID == 0).OrderBy(p => p.Sort).ToList();
            if (parentMenu.Count > 0)
            {
                foreach (var n in parentMenu)
                {
                    stb.Append("{\"id\":" + n.ID.ToString() + ",\"iconCls\":\"icon-layout_content\",\"attributes\":{\"url\":\"" + n.AdminUrl + "\"},\"text\":\"" + n.Name + "\"");
                    var SonMenus = apa.Menus.Where(p => p.TopID == n.ID).OrderBy(p => p.Sort).ToList();
                    if (SonMenus.Count > 0)
                    {
                        stb.Append(",\"children\":[");
                    }
                    foreach (var sn in SonMenus)
                    {
                        stb.Append("{\"id\":" + sn.ID.ToString() + ",\"iconCls\":\"icon-layout_header\",\"attributes\":{\"url\":\"" + sn.AdminUrl + "\"},\"text\":\"" + sn.Name + "\"},");
                    }
                    if (SonMenus.Count > 0)
                    {
                        stb.Remove(stb.Length - 1, 1);
                        stb.Append("]");
                    }
                    stb.Append("},");
                }
            }
            stb.Remove(stb.Length - 1, 1);
            stb.Append("]");
            return Content(stb.ToString());

        }

當然，這是應付式的做法，因為隻考慮到隻有兩次菜單才敢去拼湊，不過要是多級菜單呢？明顯，這種拼湊法簡直是有點蛋疼，即不美觀，又很看看懂，是以在後面改進了一下，采用遞歸的形式來生成菜單，首先，先建立一個表示樹節點的類：

/// <summary>
    /// 定義EasyUI樹的相關資料，友善控制器生成Json資料進行傳遞
    /// </summary>
    public class EasyTreeData
    {
        /// <summary>
        /// ID
        /// </summary>
        public string id { get; set; }

        /// <summary>
        /// 節點名稱
        /// </summary>

        public string text { get; set; }

        /// <summary>
        /// 是否展開
        /// </summary>

        public string state { get; set; }

        /// <summary>
        /// 圖示樣式
        /// </summary>

        public string iconCls { get; set; }

        /// <summary>
        ///其他屬性
        /// </summary>
        public object attributes { get; set; }


        /// <summary>
        /// 子節點集合
        /// </summary>
        public List<EasyTreeData> children { get; set; }

        /// <summary>
        /// 預設構造函數
        /// </summary>
        public EasyTreeData()
        {
            this.children = new List<EasyTreeData>();
            this.state = "open";
            this.attributes = null;
        }

        /// <summary>
        /// 常用構造函數
        /// </summary>
        public EasyTreeData(string id, string text, string iconCls = "",object attributes=null,string state = "open")
            : this()
        {
            this.id = id;
            this.text = text;
            this.state = state;
            this.iconCls = iconCls;
            this.attributes = attributes;
        }

    }

有了這個類，就簡單很多了，接着傳一個遞歸的函數：

//遞歸擷取樹節點
        public List<EasyTreeData> getSonMenus(int? topid = 0, string iconCls = "icon-layout_content")
        {
            List<Menu> parentMenu = apa.Menus.Where(p => p.TopID == topid).OrderBy(p => p.Sort).ToList();
            List<EasyTreeData> listTree = new List<EasyTreeData>();
            foreach (var sn in parentMenu)
            {
                EasyTreeData er = new EasyTreeData(sn.ID.ToString(), sn.Name, iconCls, new { url = sn.AdminUrl });
                er.children = getSonMenus(sn.ID, "icon-layout_header");
                listTree.Add(er);
            }
            return listTree;
        }

然後改下GetMenus這個方法：

public ActionResult GetMenus()
        {
            return Json(getSonMenus(0), JsonRequestBehavior.AllowGet);

        }

這樣看上去就爽多了，沒有那麼複雜的拼接，而且是遞歸的方式，可以完全實作多級菜單。運作後效果如下：

MVC+EF+esayui初試（一 布局加菜單顯示）

好了，先到這樣吧，下次在分享下添加菜單，企業、新聞資訊，和datagrid、KindEditor在裡面的使用。

本人也是菜鳥，分享這個主要是希望能有更多的學習者一起探讨，對于我不足的地方還請大家指導下。

轉載于:https://www.cnblogs.com/qtqq/p/3720871.html

測試 ui json
上一篇: 【ASP.NET MVC 學習筆記】- 20 ASP.NET Web API
下一篇: H5 iOS新機型适配前言問題解決方案

繼續閱讀