1. 程式人生 > >26、ASP.NET MVC入門到精通——後臺管理區域及分離、Js壓縮、css、jquery擴充套件

26、ASP.NET MVC入門到精通——後臺管理區域及分離、Js壓縮、css、jquery擴充套件

有好一段時間沒更新博文了,最近在忙兩件事:1、看書,學習中...2、為公司年會節目做準備,由於許久沒有練習雙截棍了,難免生疏,所以現在臨時抱佛腳。深圳最近的天氣反常,許多人感冒了,我也成為其中之一,大家注意身體...

這一篇,我來簡單的講一下接下來專案中會用到的一些雜七雜八的技術。

區域及分離

1、右鍵單擊Web專案,“新增”——“區域”,區域名,我們這裡命名為Admin,建立完成之後Web專案中,就會多出一個Areas資料夾,Areas資料夾下面會有一個我們剛才建立的Admin資料夾,在Admin資料夾裡面有完整的MVC專案的目錄,這裡,我們不想把控制器放在Web專案中,所以刪除Controllers

Models資料夾。

2、新建類庫專案Web.Logic.Admin,這個類庫專案我們來作為後臺系統的區域,把Admin資料夾中的AdminAreaRegistration.cs拷貝出來,然後把這個檔案防到Web.Logic.Admin專案中,修改該檔案的名稱空間。

3、給Web.Logic.Admin專案新增如下引用

 

4web專案新增Web.Logic.Admin專案的引用

5、Web.Logic.Admin專案中新建MemberController

    public class MemberController : Controller
    {
        [HttpGet]
        
public ActionResult Index() { return View(); } }

6、web專案中,在Areas/Admin/Views/Member目錄下,新增檢視Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
測試

7、在瀏覽器輸入地址http://localhost:10757/Admin/Member/,執行結果如下:

 js壓縮和合並

 Web專案中,BundleConfig.cs檔案RegisterBundles方法中,新增如下程式碼:

            bundles.Add(new ScriptBundle("~/mvcAjax").Include("~/Scripts/jquery-1.8.2.min.js", "~/Scripts/jquery.unobtrusive-ajax.min.js", 
"~/Scripts/jquery.validate.min.js", "~/Scripts/jquery.validate.unobtrusive.min.js", "~/Scripts/jquery.msgProcess.js")); BundleTable.EnableOptimizations = true;

這裡面的jquery.msgProcess.js是我自定義的。

View呼叫程式碼:

    @Scripts.Render("~/mvcAjax")

Css

我發現許多.NET Web開發人員前端這塊非常薄弱,雖然說許多公司有專門的前端工程師和美工,但是掌握必要的前端知識還是大有裨益的。

學習CSS,我推薦一本電子書《CSS禪意花園》,咱們不要求對Css瞭解很深,能做到看懂大部分CSS程式碼,拷貝一些現成的Css樣式時,自己會修改其風格就可以了。

這裡我簡單說一下我們開發中用得非常頻繁的Css樣式。

我們經常會遇到這樣的需求,根據條件,動態控制介面中某一元素的隱藏和顯示,我們通常會考慮如下兩種方式實現:

設定元素隱藏

  • display:none;
  • visibility:hidden;

display:不會影響Css佈局,display實際上是設定元素的浮動特徵。

visibility:會影響Css佈局,從效能上來說,會造成一定的影響,因為它會導致Html介面重排。設定為hidden時,元素雖然被隱藏了,但它仍然佔據它原來所在的位置,visibility屬性是隱藏元素但保持元素的浮動位置。

Jquery

Jquery,也是我們Web專案開發中經常會使用到的,推薦一本電子書《鋒利的Jquery》。

為了統一Ajax資料方法,我先在Model專案中新增一個統一的 Ajax格式類AjaxMsgModel

    /// <summary>
    /// 統一的 Ajax格式類
    /// </summary>
    public class AjaxMsgModel
    {
        public string Msg { get; set; }
        /// <summary>
        /// OK,ERROR
        /// </summary>
        public string Statu { get; set; }
        public string BackUrl { get; set; }
        /// <summary>
        /// 資料物件
        /// </summary>
        public object Data { get; set; }
    }

然後在Web專案的Scripts目錄中新建了一個js檔案jquery.msgProcess.js,然後在其中添加了一個jquery擴充套件方法,至於Jquery的擴充套件方法使用,如果不清楚,請直接查資料。我一向是喜歡拿來注意,先Copy過來,然後琢磨懂,最後自己修改下,典型的懶人做法。

(function ($) {
    $.extend($, {
        procAjaxData: function (data,funcSuc,funcErr) {
            if (!data.Statu) {
                return;
            }

            switch (data.Statu)
            {
                case "OK":
                    alert("OK:" + data.Msg);
                    if (funcSuc) funcSuc(data);
                    break;
                case "ERROR":
                    alert("ERROR:" + data.Msg);
                    if (funcErr) funcErr(data);
                    break;
            }
        }
    });
}(jQuery));

View中呼叫

    <script type="text/javascript">
        function Success(jsonData) {
            $.procAjaxData(jsonData, function () { window.location = jsonData.BackUrl; });
        }
    </script>

 Jquery EasyUI

關於EasyUI,咱們站在一個使用者的角度來說,實在是更它的名字一樣easy。關於它的使用可以去 http://www.jeasyui.net/學習。

選擇一個版本,把原始碼和文件下載下來,最新的版本,文件一般為英文。下載下來後,裡面有許多html的Demo。有現成的就直接拷貝過來,網上關於easyUI的示例程式碼數不勝數,還是那句話,拷貝過來,看得懂,會修改,就OK了,不建議在沒學習一種新的框架前,把框架的文件從頭學到尾,現實工作中,也很少有公司會有那麼多閒時間給到我們,所以我們一般是先用起來,有需要,再深入。

相關推薦

26ASP.NET MVC入門精通——後臺管理區域分離Js壓縮cssjquery擴充套件

有好一段時間沒更新博文了,最近在忙兩件事:1、看書,學習中...2、為公司年會節目做準備,由於許久沒有練習雙截棍了,難免生疏,所以現在臨時抱佛腳。深圳最近的天氣反常,許多人感冒了,我也成為其中之一,大家注意身體... 這一篇,我來簡單的講一下接下來專案中會用到的一些雜七雜八的技術。 區域及分離

19ASP.NET MVC入門精通——Unity

一、IOC介紹   IOC(Inversion of Control),中文譯為控制反轉,又稱為“依賴注入”(DI =Dependence Injection)   IOC的基本概念是:不建立物件,但是描述建立它們的方式。在程式碼中不直接與物件和服務連線,但在配置檔案中描述哪一個元件需要哪一項服務。容器負

2ASP.NET MVC入門精通——Entity Framework入門

實體框架(Entity Framework)簡介 簡稱EF 與ADO.NET關係 ADO.NET Entity Framework 是微軟以 ADO.NET 為基礎所發展出來的物件關係對應 (O/R Mapping) 解決方案,早期被稱為 ObjectSpace,最新版本是EF7【CodeOnly功能得

6ASP.NET MVC入門精通——ASP.Net的兩種開發方式

目前,ASP.NET中兩種主流的開發方式是:ASP.NET Webform和ASP.NET MVC。從下圖可以看到ASP.NET WebForms和ASP.NET MVC是並行的,也就是說MVC不會取代WebForms(至少目前是這樣)而是多了一個選擇,Webform在短期之內不會消亡,儘管存在許多缺點,

8ASP.NET MVC入門精通——View(檢視)

View檢視職責是向用戶提供介面。負責根據提供的模型資料,生成準備提供給使用者的格式介面。 支援多種檢視引擎(Razor和ASPX檢視引擎是官方預設給出的,其實還支援其它N種檢視引擎,甚至你自己都可以寫一套檢視引擎) View和Action之間資料傳遞(前後臺數據傳遞)   弱型別 View

5ASP.NET MVC入門精通——NHibernate程式碼對映

使用的是xml進行orm對映,那麼這一篇就來講下程式碼對映。 新建一個抽象的資料化持久基類AbstractNHibernateDao.cs /// <summary> /// 資料持久化基本 /// </summary> ///

12ASP.NET MVC入門精通——HtmlHelper

HtmlHelper:是為了方便View的開發而產生 HtmlHelper的演變 普通首頁超級連結為:<a href="/home/index">首頁</a> 當路由改變時候則可能需要修改為:<a href="/home/index1">首頁</a&

9ASP.NET MVC入門精通——Controller(控制器)

Controller主要負責響應使用者的輸入。主要關注的是應用程式流,輸入資料的處理,以及對相關檢視(View)輸出資料的提供。 繼承自:System.Web.Mvc.Controller 一個Controller可以包含多個Action. 每一個Action都是一個方法, 返回一個Act

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

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

7ASP.NET MVC入門精通——第一個ASP.NET MVC程式

開發流程 新建Controller 建立Action 根據Action建立View 在Action獲取資料並生產ActionResult傳遞給View。 View是顯示資料的模板 Url請求→Controller.Action處理→View響應 url請求→Controller.Ac

3ASP.NET MVC入門精通——Entity Framework增刪改查

這裡我接上講Entity Framework入門。從網上下載Northwind資料庫,新建一個控制檯程式,然後重新新增一個ado.net實體資料模型。 EF中操作資料庫的"閘道器"(操作上下文) DBContext封裝 .NET Framework 和資料庫之間的連線。此類用作“建立”、“讀取”、“更

11ASP.NET MVC入門精通——AspnetMVC分頁

說起分頁,這基本上是我們Web開發中遇見得最多的場景,沒有之一,可即便如此,要做出比較優雅的分頁還是需要技巧的。這裡我先說一種ASP.NET MVC中很常見的一種分頁的實現方式,很low,但是很多公司的專案就是這麼用的,我現在公司的專案就是也是,有時候面對公司專案屎一樣的使用者體驗和雜亂的程式碼,真是恨不

13ASP.NET MVC入門精通——MVC請求管道

ASP.NET MVC的請求管道和ASP.NET請求管道基本上一模一樣,如果你對ASP.NET請求管道十分熟悉的話,你只要關注一下不同點。看懂下面兩張圖,你就基本上明瞭了,這兩張圖是從鄒華棟部落格上面取的。(說明:我不是給傳智帶鹽的,這圖確實畫得通俗易懂)不明白的地方,用reflector工具檢視MVC的

25ASP.NET MVC入門精通——Spring.net-業務層倉儲

上一節,我們已經把專案框架的雛形搭建好了,那麼現在我來開始業務實現,在業務實現的過程當中,不斷的來完善我們現有的框架。 1、假設我們來做一個使用者登入的業務 那麼我們可以現在IDAL專案中定義的的介面IOu_UserInfoDAL,注意是部分類partial,為了方便管理,把這些擴充套件的部分介面都統

20ASP.NET MVC入門精通——WebAPI

微軟有了Webservice和WCF,為什麼還要有WebAPI? 用過WCF的人應該都清楚,面對那一大堆複雜的配置檔案,有時候一出問題,真的會叫人抓狂。而且供不同的客戶端呼叫不是很方便。不得不承認WCF的功能確實非常強大,可是有時候我們通常不需要那麼複雜的功能,只需要簡單的僅通過使用Http或Https

17ASP.NET MVC入門精通——Spring.net入門

Spring.NET環境準備 下載後解壓   Spring.NET-1.3.2.7z:這個裡面有我們需要用到的所有東西。 Spring.NET-1.3.2.exe:安裝檔案 Spring.NET-1.3.2-API.chm:幫助文件 NHibernate 3.2 的下載地址:   

21ASP.NET MVC入門精通——ASP.NET MVC4優化

刪除無用的檢視引擎 預設情況下,ASP.NET MVCE同時支援WebForm和Razor引擎,而我們通常在同一個專案中只用到了一種檢視引擎,如Razor,那麼,我們就可以移除掉沒有使用的檢視引擎,提高View檢視的檢索效率。在沒有刪除WebForm引擎之前,檢索控制器中不存在的檢視時,我們可以從下圖看

23ASP.NET MVC入門精通——業務層和資料層父類介面-T4模板

在上一篇中,我們已經把專案的基本框架搭起來了,這一篇我們就來實現業務層和資料層的父介面及父類。 1、我們先來定義一個業務層父介面IBaseBLL.cs using System; using System.Collections.Generic; using System.Linq; u

1ASP.NET MVC入門精通——新語法

在學習ASP.NET MVC之前,有必要先了解一下C#3.0所帶來的新的語法特性,這一點尤為重要,因為在MVC專案中我們利用C#3.0的新特性將會大大的提高我們的開發效率,同時,在MVC專案中你將到處可以看到C#3.0新特性的身影。其本質都是“語法糖”,由編譯器在編譯時轉成原始語法。 目錄 自動屬

10ASP.NET MVC入門精通——Model(模型)和驗證

模型就是處理業務,想要儲存、建立、更新、刪除的物件。 註解(通過特性實現) DisplayName Required StringLength(20,MinimumLength=2) DataType(System.ComponentModel.DataAnnotations.Dat