標籤：asp.net mvc asp.net mvc view
ASP.NET MVC 視圖(四)
前言
上篇對於利用IoC架構對視圖的實現進行依賴注入，最後還簡單的介紹一下自訂的視圖輔助器是怎麼定義和使用的，對於Razor文法的細節和輔助器的使用下篇會說講到，本篇來講解一下視圖中的分段概念、和分部視圖的使用。
ASP.NETMVC 視圖
l 自訂視圖引擎
l Razor視圖引擎執行過程
l Razor視圖的依賴注入、自訂視圖輔助器
l 分段、分部視圖的使用
l Razor文法、視圖輔助器
分段、分部視圖的使用
分段的使用
在ASP.NET MVC架構的Razor引擎中有著分段的概念，分段什麼意思呢？分段的意思就是把視圖分成幾個自訂的分段，並且交由布局來控制分段的顯示。說是這麼說，我們還是來看一看代碼的定義，首先是使用了分段的視圖代碼的定義，範例程式碼1-1.
代碼1-1
@{ ViewBag.Title = "ViewPartCase";} <h2>ViewPartCase</h2> @section PartOne{<h1>這是使用分段的樣本：分段一</h1>} @section PartTwo{<h1>這是使用分段的樣本：分段二</h1>} @section PartThree{<h1>這是使用分段的樣本：分段三</h1>}
在代碼1-1中，使用@section標間來建立分段，而後面緊跟著的就是自訂分段的名稱，這個時候布局的代碼如範例程式碼1-2.
代碼1-2
<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script></head> <body> @RenderBody()</body> </html>
這個時候的運行結果1。
圖1
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/40/EC/wKioL1PPnobxwtQjAALtT2HVzOU906.jpg" title="view1.png" width="738" height="220" border="0" hspace="0" vspace="0" style="width:738px;height:220px;" alt="wKioL1PPnobxwtQjAALtT2HVzOU906.jpg" />
很明顯的看到圖1中所提示的錯誤資訊，在布局中並未定義PartOne、PartTow、PartThree。
這樣我們只能修改代碼1-2，修改布局中的定義，修改後的範例程式碼1-3.
代碼1-3
<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script></head> @RenderSection("PartOne")@RenderSection("PartThree") <body> @RenderBody()</body>@RenderSection("PartTwo")</html>
在代碼1-3中@RenderSection標籤用於顯示指定的分段，參數為自訂的分段名稱，這裡大家要清楚一個概念，就是布局的定義是來引導視圖分段的定義，只不過在本篇幅是為了讓大家清楚的理解所以顛倒了順序，實際運用中應該是先定義好布局中所要使用的分段，以及指示的分段名稱，然後在視圖的定義中如果要使用當前的布局則會根據當前布局中的指定的分段名稱來定義內容。看下以上代碼運行結果2.
圖2
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/40/EC/wKioL1PPnquxRrDEAAEpxvUJR78602.jpg" title="view2.png" alt="wKioL1PPnquxRrDEAAEpxvUJR78602.jpg" />
比如說現在我是先定義好的代碼1-3，然後要我定義我要呈現的頁面也就是我們的視圖，像代碼1-1那樣定義就是正常的應用順序，那我現在修改代碼1-1，因為我不想我的視圖中使用分段，範例程式碼1-4
代碼1-4
@{ ViewBag.Title = "ViewPartCase";} <h2>ViewPartCase</h2>
正如大家所看到的，代碼1-4也就是我修改後的視圖，就是顯示一個標題，不想有其他的東西，再次運行結果2.
圖3
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/40/EC/wKiom1PPna7A6_btAAIW0tFTkXc189.jpg" title="view3.png" width="738" height="373" border="0" hspace="0" vspace="0" style="width:738px;height:373px;" alt="wKiom1PPna7A6_btAAIW0tFTkXc189.jpg" />
圖3中明確的指示出了視圖中並未定義名為PartOne的分段，所以才會導致這樣的錯誤，就算定義了PartOne，到了PartThree還要定義，不然接著報錯，這就是強制限制式了，這樣多不人道主義阿對吧。
面對這樣的情況，我們有兩種方式來處理這種情況，
第一種，使用IsSectionDefinde()方法，方法參數即為分段名稱，以此判斷視圖中是否定義了此名稱的分段，如果定義了則會返回true，否則返回false（下面代碼會給出樣本）。
第二種，使用@RenderSection()方法的重載版本，講第二個參數設定為false，如果視圖中包含了方法參數所指定的分段則會顯示，沒有則不會報出異常。
現在我們來看一下，修改布局代碼1-3中的代碼以此示範上面說到的兩種情況，範例程式碼1-5.
代碼1-5
<!DOCTYPE html><html><head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script></head>@if (IsSectionDefined("PartOne")){ @RenderSection("PartOne")}@RenderSection("PartThree",false)<body> @RenderBody()</body>@RenderSection("PartTwo",false)</html>
這個時候我們再來看一下結果圖4,，
圖4
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/40/EC/wKiom1PPncqD3ebtAABCnrqI4Ho266.jpg" title="view4.png" alt="wKiom1PPncqD3ebtAABCnrqI4Ho266.jpg" />
分部視圖的使用
對於分部視圖的使用其實也就是跟視圖一樣的，但是分布視圖跟視圖的區別在於分部視圖是禁用布局的，也就是說上面小節所說的分段在分部視圖中使用是毫無意義的，下面我們就來看一下分部視圖的定義
圖5
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/40/EC/wKioL1PPnu7B6nRiAAGMa-Vt5og481.jpg" title="view5.png" alt="wKioL1PPnu7B6nRiAAGMa-Vt5og481.jpg" />
圖5中並沒有建立強型別的分部視圖，這樣做的意義不大，在點擊“添加”按鈕後，所呈現的字碼頁面是個空的頁面什麼都沒有，這裡主要是給大家看一下分部視圖在編譯後類型所呈現的樣子也就是跟普通的視圖沒什麼區別，範例程式碼1-6.
代碼1-6
public class _Page_Views_iocdemo_CustomPartialView_cshtml: System.Web.Mvc.WebViewPage<dynamic> { #line hidden public_Page_Views_iocdemo_CustomPartialView_cshtml() { } protectedASP.global_asax ApplicationInstance { get{ return((ASP.global_asax)(Context.ApplicationInstance)); } } public override voidExecute() {WriteLiteral("<h1>PartialView</h1>"); } }
代碼1-6所呈現的就如同在ASP.NET MVC 視圖(二)中最後所示的樣本那般，核心的地方是不會變的，我們還是來刪除掉這個分部視圖，重新添加一個同樣命名的強型別視圖，或者直接使用@model標籤來引用一個類型作為視圖的Model類型，範例程式碼1-7.
代碼1-7
@model MvcApplication.Models.CustomerInfo <h1>@Model.ID</h1><h2>@Model.Name</h2>我們再看一下對於分部視圖使用的視圖的代碼定義，範例程式碼1-8代碼1-8@model IEnumerable<MvcApplication.Models.CustomerInfo>@{ ViewBag.Title = "ViewPartCase";}<h2> ViewPartCase</h2>@foreach (varmodel in Model){ @Html.Partial("CustomPartialView",model)}
最後的呈現的介面6.
圖6
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/40/EC/wKioL1PPnw2DDgbAAAB3uMAlybk796.jpg" title="view6.png" alt="wKioL1PPnw2DDgbAAAB3uMAlybk796.jpg" />
本文出自 “金源” 部落格，請務必保留此出處http://jinyuan.blog.51cto.com/8854733/1528432
ASP.NET MVC 視圖(四)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
