快速入門系列--MVC--06視圖

標籤：rip   amp   狀態   caff   template   情況   write   img   技術分享   

    到了View的呈現板塊，感覺ASP.NET MVC的學習也進入了尾聲，還是比較開心的，畢竟也有了不小收穫。這部分內容相對比較簡單，因為之前還專門學習過如何結合HTML5與MVC架構。前文中提到過，ActionResult的執行實際就是View呈現的入口。不同類型的ActionResult比較多，以下做個簡要的介紹。

類型	簡介
EmptyResult	最簡單的Result，只是為了符合架構的流程。
ContentResult	可以設定ContentType為javascript, CSS等，預設將基本類型的傳回值轉化為ContentResult。
FileResult	包含FileContentResult, FilePathResult, FileStreamResult
JavascriptResult	在服務端動態產生javascript並作為請求的相應。
JsonResult	提供對象和Json字串的序列化與返序列化
HttpStatusCodeResult	方便返回Http狀態代碼
RedirectResult RedirectToRouteResult	前者是我們可以直接重新導向到指定的目標地址，後者協助我們根據註冊的路由進行重新導向，不提供URL參數，而提供RouteName和RouteValues。類似httpResponse的Redirect/RedirectPermanent，在SEO中，前者會使永久重新導向目的地址更新為搜尋引擎的索引，後則不會。

    接下來介紹最重要的ViewResult以及VIewEngine的概念。View實現IView介面，其實就是一個Render方法，參數ViewContext除了常見屬性外，還有兩個與js相關屬性(CleintValidationEnabled, UnobstrusiveJavascriptEnabled)，特別的是object類型的ViewBag用了[Dynamic]特性。ViewEngine也實現了相應的介面，注意View緩衝，SearchedLocations屬性包含了所有的尋找路徑，FindView方法的的返回名稱比較奇怪，ViewEngineResult，但實際的意思應該是這個Result包含View和ViewEngine資訊。在另一篇管自訂ViewEngine的博文中對這一塊進行了更加深入的介紹。

    再則簡要的介紹下Razor引擎，我們知道.cshtml檔案並不能直接執行，必須先動態編譯後才能使用，那麼問題來了，編譯成什麼檔案的檔案名稱是什麼，所屬的程式集為什嗎？並存放在哪呢？

檔案名稱為：ASP_Page_views_XXX_ActionXXX_cshtml

程式集名由代碼可知：

 View Code

編譯的臨時檔案的路徑為：

"%WinDir%\Microsoft.NET\Framework\{VersionNo}\Temporary ASP.NET Files\"

可以通過如下配置，變更路徑：

 View Code

補充一個獲得編譯後類型和程式集的方法，使用BuilderManager類型的靜態方法GetCompiledType和GetCompiledAssembly。

    View檔案編譯產生的類型為WebViewPage<TModel>，也就是說.cshtml編譯後的類型均為以上類型。其基類WebPageExecutingBase包含Execute, Write, WriteLiteral等方法。該基類的另一個自雷WebPageRendingBase包含Layout, IsAjax, Server, Session, Profile, Cache等屬性，以及輸出整個頁面的抽象方法ExecutePageHierarchy。

    WebViewPage還有一個直接基類WebPageBase，它實作類別抽象方法ExecutePageHierarchy，最終呈現的頁麵包含3部分內容：布局檔案、開始頁面View本身。蔣老師提供的一個不錯的布局例子代碼如下所示：

 View Code

    看到這個我才真正明白了以前在代碼中的RenderBody是如何使用的，布局檔案和View是如何結合的。

 

細節：（可以考慮插入到原有的文章中，這樣比較合理哈）

Return View("NotIndex");命名視圖

Return View("~/Views/Example/Index.cshtml");

簡單請款下推薦使用Dynamic的ViewBag，複雜推薦強型別的ViewModel，在使用強型別時，為了方便，推薦將其加入設定檔中，如下所示。

 View Code

此外，比較有意思的是，可以通過Install-Package XXX命令安裝自己的程式集。

視圖模型部分推薦大家使用MVVM模式，儘可能的使資料扁平化，便於強型別的資料管理。

在（設定好Model後）通過基架模板Scaffold template（T4模板）建立視圖時，支援Empty、Create、Delete、Details、Edit、List等類型的視圖。通過設定RefenceScriptLib添加JQuery（包括非侵入版）驗證等相關js。

Razor引擎簡單介紹：

通過"@"進行代碼和標記的轉換符，@@表示原有的@，@（運算式）

運算式	值（只是樣本，勿深究）
@ProductList.Length	3
@@	@，轉義
[email protected](item.length)	Item_3
@{ xxx }	代碼塊
@{ Html.RenderPartial("SomePartial"); }	程式碼
@foreach(var item in items){<span>Item @item.Name</span>}	迴圈
@if(showMessage){<text>xxx<text>}	判斷
@* ………………..*@	注釋，這個需要注意哦，不然可能會出錯
@(Html.SomeMethod<Type>)	泛型需要加括弧

所有後台資料的呈現預設使用HTML編碼（這個html標記類型為System.Web.IHtmlString），如果遇到特殊字元，如<script>alert(‘hacked!‘)<alert>等情況，會編碼為&lt;script&gt;….，如果需要原樣輸出，需要使用@Html.Raw(message)。這樣就夠了嗎？不然，在前端如果使用js處理後台資料時，為了防止跨站指令碼攻擊，還需要使用‘@Ajax.JavaScriptStringEncode()‘防止XSS攻擊。

布局，使用在Layout頁面中使用@RenderBody可以為主體佔位，也可以用的@RenderSection("Footer")為Footer佔位，這時需要在頁面中通過@section Footer{ html內容 }設定，否則會拋出異常，一個比較合理的例子如下。

 View Code

此外，還可以使用_ViewStart.cshtml版面設定布局頁，它可以遞迴到相應的子目錄中，它先於所有頁面的渲染。

最後一點是，可以通過部分視圖的方式，來滿足Ajax調用的需要，這個需要時html檔案，而僅僅是json要注意。

 View Code

 

註：本文主要供自己學習，不妥之處望見諒。

參考資料：

[1]蔣金楠. ASP.NET MVC4架構揭秘[M]. 上海:電子工業出版社, 2012. 390-444

[2]（美）加洛韋. ASP.NET MVC 4進階編程(第4版)[M]. 北京:清華大學出版社, 2012. 

快速入門系列--MVC--06視圖