ASP.NET MVC搭建專案後臺UI框架—1、後臺主框架
目錄
準備做一個新的專案，從網頁設計師手中拿到了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。
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>View Code
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>View Code
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>View Code
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><相關推薦
ASP.NET MVC搭建專案後臺UI框架—1、後臺主框架
目錄 準備做一個新的專案，從網頁設計師手中拿到了html靜態頁面（沒有一行js），但是都一個個零散的介面，我需要做的是： 1、 把這些零散的html介面連線起來 2、 自己編寫js或者jquery實現選單效果 3、 把html頁面整合在我們的MVC Razor檢視中 本想著使用第三方的UI
ASP.NET MVC搭建專案後臺UI框架—6、客戶管理（新增、修改、查詢、分頁）
目錄 接著之前未寫完的繼續，本篇，我將講解在此UI框架中和ASP.NET MVC4進行結合開發。效果如下： 這裡，我將新增和修改用了兩個不同的檢視，當然也可以把新增和修改放到同一個檢視中，但是要寫一些業務邏輯程式碼來區分當前呼叫的是修改還是新增，根據新增和修改的不同，而對介面進行不同的操作。 新
ASP.NET MVC搭建專案後臺UI框架—8、將View中選擇的資料行中的部分資料傳入到Controller中
目錄 現在，有一個需求，我需要將表格中選中行的資料中的一部分傳直接傳到控制器中，然後儲存到另外一張表中。一開始，我就想到在前臺使用ajax構造json資料，然後控制器直接通過list接收。 選中介面中的行，然後點選“批量新增到月結表”，彈出一個對話方塊，這個對話方塊的月份列表為當前選擇資料行中
ASP.NET MVC搭建專案後臺UI框架—2、選單特效
目錄 上一篇，已經把整個專案的框框給搭建好了，但是還沒有任何js效果實現。這一節，我就來說下關於選單的特效實現。我需要的效果如下： 需求總結： 點選頂部選單模組，左側顯示不同模組下面的選單列表 點選左側選單選項，展開下面的子選單，並摺疊其它選單模組，選單圖示摺疊顯示為+，展開顯示為
ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開
目錄 上一節已經新增好了選單特效，這一節，我們來新增面板的摺疊和展開功能，效果圖如下： 思路：我在Right檢視中添加了一個div，在這個div中存放一張圖片，通過對這張圖片的點選，來控制Left檢視的隱藏和顯示。說白了，這裡其實就是修改主框架Index檢視中frameset的 cols屬性。
ASP.NET MVC搭建專案後臺UI框架—7、統計報表
本節，我將通過一個Demo，演示Datatables 和ASP.NET MVC的完美結合，可以這麼說，如果這樣的介面都能做出來，後臺系統90%的介面功能都可以開發出來了。 用jquery Datatables 來開發確實是件比較蛋疼的事情（和Jquery EasyUI、MiniUI、ExtJs相比），用
ASP.NET MVC搭建專案後臺UI框架—11、自動載入下拉框查詢
需求：在查詢記錄的時候，輸入第一個字，就自動把以這個字開頭的相關記錄查找出來，輸入2個字就過濾以這兩個子開頭的記錄，依次類推。 突然要用到這個功能了，印象中曾經寫過這個功能的文章，一下子找不到了，只好重新貼出來備忘。最近部落格快2個月沒更新了，因為這兩個月一直在閉門寫書。 <link
ASP.NET MVC搭建專案後臺UI框架—9、伺服器端排序
關於jquery datables的在伺服器端的排序，在網上貌似沒有看到.NET的例子，說實話，之前我也迷惑過，習慣了直接從網上找現成的東西，經過一翻搜尋，沒找到，於是乎，自己除錯唄，調了前臺，調後臺，還真被我看出了規律。事實上datables是支援多列排序的，但是本例，我只寫了單列排序。 在控制器
ASP.NET MVC搭建專案後臺UI框架—5、Demo演示Controller和View的互動
目錄 這一節，我將用一個Demo來演示在此UI框架中，控制器和檢視的互動。以渠道管理為例。效果圖如下： 按回車執行查詢，不是F5，筆誤。 這裡我使用了基於jquery的模態窗體元件lhgdialog和表格元件dataTables。dataTables更多資料請參考：http://dt.thxop
ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援
目錄 在點選左側選單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁籤功能，因為這樣可以支援多個頁面的瀏覽，有時候我們可能需要同時開啟多個頁面，如果不使用頁籤，那麼每次要檢視某個頁面都要去重新呼叫並重新整理，如果在網速慢或者該介面載入很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個Ex
Asp.net MVC 搭建屬於自己的框架（一）
C4D pagedlist del tran 6.0 ext 才有 應該 frame 網址：https://www.cnblogs.com/sggx/p/4555255.html 為什麽要自己搭框架？ 大家夥別急，讓我慢慢地告訴你！大家有沒有這種感覺，從一家跳槽到另一家
asp.net mvc+jquery easyui開發實戰教程之網站後臺管理系統開發2-Model層建立
ack 前端 strong syn eee 名稱 lar led tegra 上篇(asp.net mvc+jquery easyui開發實戰教程之網站後臺管理系統開發1-準備工作)文章講解了開發過程中的準備工作，主要創建了項目數據庫及項目，本文主要講解項目M層的實現，M層
ASP.Net MVC OA專案筆記<六>
1.1.1 開始寫業務，先寫業務的實現再寫業務的介面 業務類中也是有寫增刪改查公用的方法 引用Model，IDAL，DALFactory &
Asp.Net MVC WebAPI的建立與前臺Jquery ajax後臺HttpClient呼叫詳解 Asp.Net中對操作Sql Server 簡單處理的SqlDB類
1、什麼是WebApi，它有什麼用途？ Web API是一個比較寬泛的概念。這裡我們提到Web API特指ASP.NET MVC Web API。在新出的MVC中，增加了WebAPI，用於提供REST風格的WebService，新生成的W
使用Visual Studio 2015 開發ASP.NET MVC 5 專案部署到Mono/Jexus
最新的Mono 4.4已經支援執行asp.net mvc5專案，有的同學聽了這句話就興高采烈的拿起Visual Studio 2015建立了一個mvc 5的專案，然後部署到Mono上，瀏覽下發現一堆錯誤出現，心中一萬隻草泥馬奔騰而來，這也叫支援嗎，這個問題是Visual Studio造成的，不相信的話可以使用
ASP.net Mvc SportsSpore專案開發(四）
1.使用模型繫結MVC框架使用了一個叫做“模型繫結”的系統，以便通過HTTP請求來建立一些C#物件，目的是將它們作為引數值傳遞給動作方法。這是MVC 處理表單的方式。例如，框架會考查目標動作方法的引數，用一個模型繫結器來獲取由瀏覽器傳送過來的表單值，並在傳遞給動作方法之前將它
ASP.net Mvc SportsSpore專案開發(二）
1.新增導航控制元件為了使客戶能通過產品分類對其進行導航，需要從三面著手：1）增強Product Controller類中的List動作模型，以使它能夠過濾儲存庫中的Product物件。2）重新檢查並增強URL方案，並且修改路由配置。3) 建立一個產品分類列表，將其放入網
ASP.net Mvc SportsSpore專案開發(五）
1.新增分類管理此次需要實現的是對物品資訊的讀取，新增更新和刪除的操作。這些動作統稱為“CRUD”。建立CRUD控制器，在Controllers檔案下新增控制器AdminControllerusing System; using System.Collections.Gene
[ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
概括的講，View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素，而動態內容指的是在應用程式執行的時候動態建立的內容。給View新增動態內容的方式可歸納為下面幾種： Inline code，小的程式碼片段，如 if 和 foreach 語句。 Html hel
初識ASP.NET MVC窗體驗證與許可權過濾---1.窗體身份驗證
一直不懂如何解決web系統的登入許可權控制問題，在最開始的時候，我用了一個很土的方法。使用者登入成功後就把使用者的身份資訊寫到一個會話cookie中。這種方法非常的脆弱而且不安全。比如a使用者登入後沒有退出功能頁面，此時他又登入了b使用者的賬戶，身份coo