1.新建HomeController控制器,并创建视图，后台的主页
2.easyUI的引用：
<link href="~/Content/default/easyui.css" rel="stylesheet" /> <!--easyui样式--> <link href="~/Content/icon.css" rel="stylesheet" /> <!--easyui样式--> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <!--jquery引用文件--> <script src="~/Scripts/jquery.easyui.min.js"></script> <!--引用easyui文件--> <script src="~/Scripts/easyui-lang-zh_CN.js"></script> <!--easyui语言包-->
3.后台布局
easyui--layout，中间部分采用tabs页签，里面的采用iframe框架
<body class="easyui-layout"> @*顶部*@ <div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:10px">north region</div> @*左边*@ <div data-options="region:'west',split:true,title:'导航菜单'" style="150px; padding:2px;"> <div class="easyui-accordion" style="auto;height:100%;"> <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test1</h3></a> <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test2</h3></a> <a class="detailLink123" href="javascript:void(0)" url="/AdminNewInfo/Index"><h3>test3</h3></a> </div> <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;"> </div> <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;"> </div> </div> </div> @*右边*@ <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="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="tt" class="easyui-tabs" style="100%;height:100%" fit="true"> <div title="首页" style="padding:10px"> <iframe src="/AdminNewInfo/Index" scrolling="no" frameborder="0" width="100%" height="100%"></iframe> </div> </div> </div> </body>
4.tabs标签中的:exists,select,add方法，用于页签功能的编写
<script> $(function () { bindEvent(); }) //绑定事件 function bindEvent() { $(".detailLink123").click(function () { var title = $(this).text(); var url = $(this).attr("url"); var isExt = $('#tt').tabs('exists', title);//判断页签是否已经存在 if (isExt) { $('#tt').tabs('select', title);//如果存在选中 return; } $('#tt').tabs('add', {//添加页签 title: title, content: createContent(url), closable: true }); }); } function createContent(url) { var strHtml = '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>'; return strHtml; } </script>