標籤：lang device fixed 網上 ann tom blank image 分數
目錄準備做一個新的項目，從網頁設計師手中拿到了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視圖
View Code5、建立Left視圖
View Code6、建立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搭建項目後台UI架構—1、後台主架構
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
