ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開

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

開始操作

1、修改Right檢視，在右側新增一個div，設定float:left;，裡面存放一個圖片按鈕，作為面板摺疊和展開的開關。新增一個juqery方法，呼叫父框架Index檢視中的方法hideShowFrame，修改Index檢視中frameset的 cols屬性，從而控制介面的展示。

@{
    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>
    <style type="text/css">
        .sidebar
        {
            width: 5px;
            height: 500px;
        }
            .sidebar .btn
            {
                width: 5px;
                height: 39px;
                background: url( 
/images/sidebar-on.gif);
                margin-top: 200px;
            }

                .sidebar .btn:hover
                {
                    background-position: 0 -39px;
                }

        .fleft
        {
            float: left;
        }
    </style>
    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#divFolding").click(
                function () { self.parent.hideShowFrame(); }
                );
        });
    </script>

</head>
<body>
    <div class="sidebar fleft">
        <div class="btn" id="divFolding"></div>
    </div>
    <div class="rightcont">
        hello，world
    </div>
</body>
</html>

2、修改Index檢視，新增如下js：

    //摺疊展開面板
        function hideShowFrame() {
            if (document.getElementById("middenFram").cols == "193,*") {
                document.getElementById("middenFram").cols = "0,*";
            }
            else {
                document.getElementById("middenFram").cols = "193,*"
            }
        }

我們看下Index檢視的主體部分：

<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>

3、F5執行，看效果。

ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開

目錄上一節已經新增好了選單特效，這一節，我們來新增面板的摺疊和展開功能，效果圖如下：思路：我在Right檢視中添加了一個div，在這個div中存放一張圖片，通過對這張圖片的點選，來控制Left檢視的隱藏和顯示。說白了，這裡其實就是修改主框架Index檢視中frameset的 cols屬性。

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框架—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 小牛之路]12 - Section、Partial View 和 Child Action

概括的講，View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素，而動態內容指的是在應用程式執行的時候動態建立的內容。給View新增動態內容的方式可歸納為下面幾種： Inline code，小的程式碼片段，如 if 和 foreach 語句。 Html hel

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窗體驗證與許可權過濾---3.自定義過濾器驗證Session超時

為了防止使用者在seesion過期之後進行操作，可以新增自定義過濾器驗證session是否過期，為了便於測試將過期時間設定為1分鐘，在Filters資料夾下新增一個自定義過濾器。namespace AuthStudy.Filters { public

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;

ASP.NET MVC搭建專案後臺UI框架—3、面板摺疊和展開

目錄

開始操作

相關推薦