目錄
- ASP.NET MVC搭建項目后台UI框架—1、后台主框架
- ASP.NET MVC搭建項目后台UI框架—2、菜單特效
- ASP.NET MVC搭建項目后台UI框架—3、面板折疊和展開
- ASP.NET MVC搭建項目后台UI框架—4、tab多頁簽支持
- ASP.NET MVC搭建項目后台UI框架—5、Demo演示Controller和View的交互
- ASP.NET MVC搭建項目后台UI框架—6、客戶管理（添加、修改、查詢、分頁）
- ASP.NET MVC搭建項目后台UI框架—7、統計報表
- ASP.NET MVC搭建項目后台UI框架—8、將View中選擇的數據行中的部分數據傳入到Controller中
- ASP.NET MVC搭建項目后台UI框架—9、服務器端排序
- ASP.NET MVC搭建項目后天UI框架—10、導出excel（數據量大，非常耗時的，異步導出）
- ASP.NET MVC搭建項目后台UI框架—11、自動加載下拉框查詢
准備做一個新的項目，從網頁設計師手中拿到了html靜態頁面（沒有一行js），但是都一個個零散的界面，我需要做的是：
1、 把這些零散的html界面連接起來
2、 自己編寫js或者jquery實現菜單效果
3、 把html頁面集成在我們的MVC Razor視圖中
本想着使用第三方的UI框架 如Jquery EasyUI、ExtJs、MiniUI等來搭建框架，但是上面要求必須做得和美工給的html頁面樣式一致，不能用這些比較復雜的UI框架。作為非前端工程師，我只有硬着頭皮上了。經過差不多2天的折騰，自己搭建好了UI框架。主要使用jquery和一些jquery的ui插件。即便使用了第三方的UI插件也是非常痛苦的，因為我需要修改UI插件的主題樣式，改得和美工給我的界面看上去差不多。那我為什么要使用UI插件呢，一方面是為了提高用戶體驗，另一方面是為了減少編碼，讓View和Controller更好的結合，如果我不添加jquery的ui插件進來，可以直接在View中拼接美工給我的html頁面，這樣看起來簡單多了，但是這樣的話，界面復用性太差，需要更多的編碼，我需要做的是，通過框架來盡可能減少團隊成員的編碼量，提高開發效率。
先看下最終效果：
從這里開始
一看到這樣的后台界面，我首先就聯想到使用iframe 或者 frameset 來搭建，因為這樣可以實現頁面嵌入。項目組有同事說可以使用能夠MVC里面的局部視圖，跟以前ASPX視圖里面的母版頁差不多，但是這不是我想要的，我不想每點擊一個功能菜單都刷新整個界面，而且后面我要對菜單項做權限控制的。我先不添加任何js，一步一步來。
關於iframe 和 frame的區別大家可以網上查找，這里我不做過多解釋，最終我使用了frame。框架中用到的js和css：CssJsImg源碼
1、 新建ASP.NET MVC4項目MSD.WL.Site， 然后新建控制器HomeController，這里我用了4個Action方法，分別對應4個界面，Index代表frame主界面
public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "歡迎使用財務模塊"; return View(); } public ActionResult Top() { ViewBag.UserName = "超級管理員"; ViewBag.AvailableBalance = "8888.00"; return View(); } public ActionResult Left() { return View(); } public ActionResult Right() { return View(); } }
2、 新建Index視圖
@{ ViewBag.Title = ""; Layout = null; } <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> </head> <frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*頂部發104px，底部30px，中間部分自適應*@ <frame src="Home/Top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frameset cols="193,*" frameborder="no" border="0" framespacing="0" id="middenFram">@*左側193px，右側自適應*@ <frame src="Home/Left" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame"/> <frame src="Home/Right" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset> <frame src="/Content/Bootom.html" name="topFrame" scrolling="No" noresize="noresize" id="bootomFrame" title="topFrame" /> </frameset> <noframes> <body> </body> </noframes> </html>
3、 新建Top視圖
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta charset="utf-8" /> <link href="~/Content/sharestyle.css" rel="stylesheet" /> <style type="text/css"> .hightCss { color: yellow; } body { margin: 0px; padding: 0px; } </style> </head> <body> <div class="index_header"> <div class="index_headertop"> <div class="index_logo"><a href="#"> <img src="/images/index_logo.png"></a></div> <div class="lgstatus"> 歡迎您，@ViewBag.UserName<i><em>20</em></i>可用余額：<span>￥@ViewBag.AvailableBalance</span> <input type="submit" value="在線充值" class="btsty2"> </div> </div> <div class="clear"></div> <div class="index_headerbot"> <div class="nav_list"> <ul> <li><a href="#">業務管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">訂單管理</a></p> <p><a href="#">提單管理</a></p> <p><a href="#">身份證管理</a></p> </div> </li> <li class="slctd"><a href="#">財務管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">財務流水</a></p> <p><a href="#">提單對賬</a></p> <p><a href="#">運單對賬</a></p> <p><a href="#">異常費用對賬</a></p> <p><a href="#">充值記錄</a></p> </div> </li> <li><a href="#">系統管理</a> <div class="nav_out" style="display: none;"> <i></i> <p><a href="#">基本信息管理</a></p> <p><a href="#">認證管理</a></p> <p><a href="#">修改密碼</a></p> </div> </li> </ul> </div> <div class="fucnbx"><span><a href="#"><i class="ilChannel"></i>運單打印客戶端下載</a></span> <span><a href="#"><i class="i2"></i>API文檔</a></span> <span><a href="#"><i class="i3"></i>退出</a></span> </div> </div> </div> </body> </html>
4、新建Right視圖
@{ Layout = null; } <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <style type="text/css"> html, body { margin: 0px; font-family: Arial, Sans-Serif; /*font-size: 62.5%;*/ font-size: 12px; height: 100%; padding: 2px 4px 4px 0px; overflow:hidden; } </style> </head> <body> <div class="rightcont">Hello,World </div> </body> </html>
5、新建Left視圖
@{ Layout = null; } <!DOCTYPE html> <html lang="zh"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <link href="~/Content/sharestyle.css" rel="stylesheet" /> <link href="~/Content/main.css" rel="stylesheet" /> <style type="text/css"> body { margin:0px; padding:0px; } </style> </head> <body> <div class="leftbar" id="divOrder"> <dl> <dt class="head2" id="dt_ulOrder" onclick='ShowMenuList("ulOrder")'>訂單管理</dt> <ul class="box_n" id="ulOrder"> <li><a href="#">批量新建訂單</a></li> <li><a href="#">手工新建訂單</a></li> <li><a class="nav_sub" href="#">訂單草稿<span>（3）</span></a></li> <li><a href="#">已確認訂單<span>（3）</span></a></li> <li><a href="#">待發貨訂單<span>（3）</span></a></li> <li><a href="#">已發貨訂單<span>（0）</span></a></li> <li><a href="#">訂單回收站<span>（0）</span></a></li> <li><a href="#">退件<span>（0）</span></a></li> <li><a href="#">批量修改訂單</a></li> </ul> </dl> <dl> <dt class="head1" id="dt_ulLading" onclick='ShowMenuList("ulLading")'>提單管理</dt> <ul class="box_n" id="ulLading" style="display:none;" > <li><a href="#">創建托盤</a></li> <li><a href="#">未交貨托盤<span>（6）</span></a></li> <li><a href="#">已交貨托盤</a></li> <li><a href="#">創建交貨單</a></li> <li><a href="#">交貨單列表</a></li> <li><a href="#">待預扣提單<span>（3）</span></a></li> <li><a href="#">已預扣提單</a></li> </ul> </dl> <dl> <dt class="head1" id="dt_ulIdentityCard" onclick='ShowMenuList("ulIdentityCard")'>身份證管理</dt> <ul class="box_n" id="ulIdentityCard" style="display:none;" > <li><a href="#">待驗證身份證<span>（3）</span></a></li> <li><a href="#">無需驗證身份證<span>（3）</span></a></li> <li><a href="#">已驗證身份證<span>（3）</span></a></li> </ul> </dl> </div> <div class="leftbar" id="divSysManage"></div> <div class="leftbar" id="divFinancial"> <dl> <dt id="dt_ulChannel" class="head2" onclick='ShowMenuList("ulChannel")'>渠道費用管理</dt> <ul class="box_n" id="ulChannel"> <li><a href="#" onclick="goNewPage('a.html','渠道分類');">渠道分類</a></li> <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li> <li><a href="#">分區管理</a></li> <li><a href="#">價格管理</a></li> </ul> </dl> <dl> <dt id="dt_ulFinancial" class="head1" onclick='ShowMenuList("ulFinancial")'>財務管理</dt> <ul class="box_n" id="ulFinancial" style="display: none;"> <li><a href="#">財務流水</a></li> <li><a href="#">提單對賬</a></li> <li><a href="#">運單對賬</a></li> <li><a href="#">異常費用對賬</a></li> <li><a href="#">充值記錄</a></li> </ul> </dl> </div> </body> </html>
6、新建Bootom.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .copyright { width: 100%; height: 30px; line-height: 30px; text-align: center; color: #dadada; background: #393939; font-size: 12px; position: fixed; bottom: 0px; left: 0px; } </style> </head> <body> <div class="copyright">©2015 </div> </body> </html>
F5運行，這個時候，你看到的界面應該是這樣的：
源碼請見我的書《ASP.NET MVC企業級實戰》源碼的第11章~