本系列目錄：ASP.NET MVC4入門到精通系列目錄彙總有好一段時間沒更新博文了，最近在忙兩件事：1、看書，學習中...2、為公司年會節目做準備，由於許久沒有練習雙截棍了，難免生疏，所以現在臨時抱佛腳。深圳最近的天氣反常，許多人感冒了，我也成為其中之一，大家註意身體...這一篇，我來簡單的講一下接...
本系列目錄：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了，不建議在沒學習一種新的框架前，把框架的文檔從頭學到尾，現實工作中，也很少有公司會有那麼多閑時間給到我們，所以我們一般是先用起來，有需要，再深入。
