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

这里布局后，前台页面如下：