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

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

區域及分離

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

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

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