26、ASP.NET MVC入門到精通——后台管理區域及分離、Js壓縮、css、jquery擴展

本系列目錄：ASP.NET MVC4入門到精通系列目錄匯總

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

這一篇，我來簡單的講一下接下來項目中會用到的一些雜七雜八的技術。

區域及分離

在15、ASP.NET MVC入門到精通——MVC-路由中，我已經簡要說明了區域的分離。

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項目添加如下引用

 

4、web項目添加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")

關於壓縮和合並我在21、ASP.NET MVC入門到精通——ASP.NET MVC4優化這一篇中有更詳細的說明，這里只是簡單提及，不再贅述。

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了，不建議在沒學習一種新的框架前，把框架的文檔從頭學到尾，現實工作中，也很少有公司會有那么多閑時間給到我們，所以我們一般是先用起來，有需要，再深入。