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

2019-11-17 01:32:19

字體：大中小

來源：轉載

供稿：網友

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

這里布局后，前臺頁面如下：