2. 程式人生 > >ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援

ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援

阿新 • • 發佈：2019-01-17

目錄

在點選左側選單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁籤功能，因為這樣可以支援多個頁面的瀏覽，有時候我們可能需要同時開啟多個頁面，如果不使用頁籤，那麼每次要檢視某個頁面都要去重新呼叫並重新整理，如果在網速慢或者該介面載入很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個ExtJs等的內容。自然而然的，就想到了去網上找這種ui外掛。找到了許多，不過我覺得CleverTabs比較適合我這個專案。效果如下：

Action

1、修改Right檢視，新增如下js引用：

    <link href="~/Lib/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery-ui.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.cleverTabs.js"></script>
    <script src="~/Lib/CleverTabs/scripts/jquery.contextMenu.js"></script>

2、新增js方法：

   <script type="text/javascript">
           var tabs;
           $(function () {
               var h = $(document).height()-35;
               $("#tabs").height(h); //關於這裡我要說明一下，如果不設定高度的話，它預設並不是發100%佔滿螢幕的，所以我這裡使用了計算的方式，初始化介面高度
               tabs = $('#tabs').cleverTabs();
               $(window).bind(
 
'resize', function () {
                   tabs.resizePanelContainer();
               });

               tabs.add({
                   url: 'http://www.cnblogs.com/jiekzou/',
                   label: '我的部落格',
                   //開啟Tab後是否鎖定(不允許關閉，預設: false)
                   lock: false
               });
               $(
 
'input[type="button"]').button();

           });
           function addTab(url,name) {
               tabs.add({
                   url: url,
                   label: name
               });
           }</script>

3、修改Right檢視中body主體：

<body>
     <div class="sidebar fleft"><div class="btn" id="divFolding"></div></div>
    <div id="tabs" style="overflow:hidden; padding-top:0px; height:400px;">
        <ul>
        </ul>
    </div>
    </body>

4、在Left檢視中，新增如下js方法：Left中的選單點選時呼叫Right檢視中的新增頁籤方法addTab

        function goNewPage(url,name) {
            self.parent.frames["mainFrame"].addTab(url,name);
        }

修改Left檢視中選單的呼叫方法

  <li><a target="mainFrame" id="channelManage" onclick="goNewPage('/Channel/Index','渠道管理');">渠道管理</a></li>

5、F5執行，你將看到如下效果：

框架中用到的js和css、Img

相關推薦

ASP.NET MVC搭建專案後臺UI框架—4、tab多頁籤支援

目錄 在點選左側選單中的選項時，我希望有Extjs、EasyUI等中類似的tab頁籤功能，因為這樣可以支援多個頁面的瀏覽，有時候我們可能需要同時開啟多個頁面，如果不使用頁籤，那麼每次要檢視某個頁面都要去重新呼叫並重新整理，如果在網速慢或者該介面載入很耗時的情況下，簡直會讓人奔潰。因為我又不想引入整個Ex

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 搭建屬於自己的框架（一）

C4D pagedlist del tran 6.0 ext 才有 應該 frame 網址：https://www.cnblogs.com/sggx/p/4555255.html 為什麽要自己搭框架？ 　　大家夥別急，讓我慢慢地告訴你！大家有沒有這種感覺，從一家跳槽到另一家

ASP.Net MVC OA專案筆記<六>

1.1.1 開始寫業務，先寫業務的實現再寫業務的介面          業務類中也是有寫增刪改查公用的方法          引用Model，IDAL，DALFactory     &

使用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各個類的說明(Preview 4)

限於水平部分寫的有些粗糙,會慢慢改進的. 本文將Asp.net MVC中的類分為十大類進行整理 分別為          列舉       介面       Helper       Filter       Re

22、ASP.NET MVC入門到精通——搭建專案框架

前面的章節，說了ASP.NET MVC專案中常用的一些技術和知識點，更多的是理論上面的東西，接下來，我將通過一個簡單的OA專案來應用我們之前涉及到的一些技術，為了兼顧初學者，所以我儘量把操作步驟說得足夠詳細。（本來想用VS2015來演示MVC5開發的，無奈家裡的筆記本是11年2月份的老爺機了，一直未曾捨得

【無私分享：從入門到精通ASP.NET MVC】從0開始，一起搭框架、做專案 （16）原始碼分享二：登入功能以及UI、資料庫、倉儲原始碼分享

1 using Common; 2 using Service.IService; 3 using System; 4 using System.Collections.Generic; 5 using System.Linq; 6 using System.Web;