ASP.NET MVC 視圖(四)
前言
上篇對于利用IoC架構對視圖的實作進行依賴注入,最後還簡單的介紹一下自定義的視圖輔助器是怎麼定義和使用的,對于Razor文法的細節和輔助器的使用下篇會說講到,本篇來講解一下視圖中的分段概念、和分部視圖的使用。
ASP.NETMVC 視圖
l 自定義視圖引擎
l Razor視圖引擎執行過程
l Razor視圖的依賴注入、自定義視圖輔助器
l 分段、分部視圖的使用
l Razor文法、視圖輔助器
分段、分部視圖的使用
分段的使用
在ASP.NET MVC架構的Razor引擎中有着分段的概念,分段什麼意思呢?分段的意思就是把視圖分成幾個自定義的分段,并且交由布局來控制分段的顯示。說是這麼說,我們還是來看一看代碼的定義,首先是使用了分段的視圖代碼的定義,示例代碼1-1.
代碼1-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<code>@{</code>
<code> </code><code>ViewBag.Title = "ViewPartCase";</code>
<code>}</code>
<code> </code>
<code><</code><code>h2</code><code>>ViewPartCase</</code><code>h2</code><code>></code>
<code>@section PartOne</code>
<code>{</code>
<code><</code><code>h1</code><code>>這是使用分段的示例:分段一</</code><code>h1</code><code>></code>
<code>@section PartTwo</code>
<code><</code><code>h1</code><code>>這是使用分段的示例:分段二</</code><code>h1</code><code>></code>
<code>@section PartThree</code>
<code><</code><code>h1</code><code>>這是使用分段的示例:分段三</</code><code>h1</code><code>></code>
在代碼1-1中,使用@section标間來建立分段,而後面緊跟着的就是自定義分段的名稱,這個時候布局的代碼如示例代碼1-2.
代碼1-2
<code><!DOCTYPE html></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>title</code><code>>@ViewBag.Title</</code><code>title</code><code>></code>
<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"@Url.Content("</code><code>~/Content/Site.css")" </code><code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"@Url.Content("</code><code>~/Scripts/jquery-1.5.1.min.js")" </code><code>type</code><code>=</code><code>"text/javascript"</code><code>></</code><code>script</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code>@RenderBody()</code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
這個時候的運作結果如圖1。
圖1
<a href="http://s3.51cto.com/wyfs02/M02/40/EC/wKioL1PPnobxwtQjAALtT2HVzOU906.jpg" target="_blank"></a>
很明顯的看到圖1中所提示的錯誤資訊,在布局中并未定義PartOne、PartTow、PartThree。
這樣我們隻能修改代碼1-2,修改布局中的定義,修改後的示例代碼1-3.
代碼1-3
<code>@RenderSection("PartOne")</code>
<code>@RenderSection("PartThree")</code>
<code>@RenderSection("PartTwo")</code>
在代碼1-3中@RenderSection标簽用于顯示指定的分段,參數為自定義的分段名稱,這裡大家要清楚一個概念,就是布局的定義是來引導視圖分段的定義,隻不過在本篇幅是為了讓大家清楚的了解是以颠倒了順序,實際運用中應該是先定義好布局中所要使用的分段,以及訓示的分段名稱,然後在視圖的定義中如果要使用目前的布局則會根據目前布局中的指定的分段名稱來定義内容。看下以上代碼運作結果如圖2.
圖2
<a href="http://s3.51cto.com/wyfs02/M00/40/EC/wKioL1PPnquxRrDEAAEpxvUJR78602.jpg" target="_blank"></a>
比如說現在我是先定義好的代碼1-3,然後要我定義我要呈現的頁面也就是我們的視圖,像代碼1-1那樣定義就是正常的應用順序,那我現在修改代碼1-1,因為我不想我的視圖中使用分段,示例代碼1-4
代碼1-4
正如大家所看到的,代碼1-4也就是我修改後的視圖,就是顯示一個标題,不想有其他的東西,再次運作結果如圖2.
圖3
<a href="http://s3.51cto.com/wyfs02/M00/40/EC/wKiom1PPna7A6_btAAIW0tFTkXc189.jpg" target="_blank"></a>
圖3中明确的訓示出了視圖中并未定義名為PartOne的分段,是以才會導緻這樣的錯誤,就算定義了PartOne,到了PartThree還要定義,不然接着報錯,這就是強制限制了,這樣多不人道主義阿對吧。
面對這樣的情況,我們有兩種方式來處理這種情況,
第一種,使用IsSectionDefinde()方法,方法參數即為分段名稱,以此判斷視圖中是否定義了此名稱的分段,如果定義了則會傳回true,否則傳回false(下面代碼會給出示例)。
第二種,使用@RenderSection()方法的重載版本,講第二個參數設定為false,如果視圖中包含了方法參數所指定的分段則會顯示,沒有則不會報出異常。
現在我們來看一下,修改布局代碼1-3中的代碼以此示範上面說到的兩種情況,示例代碼1-5.
代碼1-5
<code>@if (IsSectionDefined("PartOne"))</code>
<code> </code><code>@RenderSection("PartOne")</code>
<code>@RenderSection("PartThree",false)</code>
<code>@RenderSection("PartTwo",false)</code>
這個時候我們再來看一下結果圖4,,
圖4
<a href="http://s3.51cto.com/wyfs02/M01/40/EC/wKiom1PPncqD3ebtAABCnrqI4Ho266.jpg" target="_blank"></a>
分部視圖的使用
對于分部視圖的使用其實也就是跟視圖一樣的,但是分布視圖跟視圖的差別在于分部視圖是禁用布局的,也就是說上面小節所說的分段在分部視圖中使用是毫無意義的,下面我們就來看一下分部視圖的定義
圖5
<a href="http://s3.51cto.com/wyfs02/M02/40/EC/wKioL1PPnu7B6nRiAAGMa-Vt5og481.jpg" target="_blank"></a>
圖5中并沒有建立強類型的分部視圖,這樣做的意義不大,在點選“添加”按鈕後,所呈現的代碼頁面是個空的頁面什麼都沒有,這裡主要是給大家看一下分部視圖在編譯後類型所呈現的樣子也就是跟普通的視圖沒什麼差別,示例代碼1-6.
代碼1-6
<code> </code><code>public</code> <code>class</code> <code>_Page_Views_iocdemo_CustomPartialView_cshtml: System.Web.Mvc.WebViewPage<dynamic> {</code>
<code> </code>
<code>#line hidden</code>
<code> </code><code>public_Page_Views_iocdemo_CustomPartialView_cshtml() {</code>
<code> </code><code>}</code>
<code> </code><code>protectedASP.global_asax ApplicationInstance {</code>
<code> </code><code>get</code><code>{</code>
<code> </code><code>return</code><code>((ASP.global_asax)(Context.ApplicationInstance));</code>
<code> </code><code>}</code>
<code> </code><code>public</code> <code>override</code> <code>voidExecute() {</code>
<code>WriteLiteral(</code><code>"<h1>PartialView</h1>"</code><code>);</code>
<code> </code><code>}</code>
代碼1-6所呈現的就如同在ASP.NET MVC 視圖(二)中最後所示的示例那般,核心的地方是不會變的,我們還是來删除掉這個分部視圖,重新添加一個同樣命名的強類型視圖,或者直接使用@model标簽來引用一個類型作為視圖的Model類型,示例代碼1-7.
代碼1-7
<code>@model MvcApplication.Models.CustomerInfo</code>
<code><</code><code>h1</code><code>>@Model.ID</</code><code>h1</code><code>></code>
<code><</code><code>h2</code><code>>@Model.Name</</code><code>h2</code><code>></code>
我們再看一下對于分部視圖使用的視圖的代碼定義,示例代碼1-8
代碼1-8
<code>@model IEnumerable<</code><code>MvcApplication.Models.CustomerInfo</code><code>></code>
<code><</code><code>h2</code><code>></code>
<code> </code><code>ViewPartCase</</code><code>h2</code><code>></code>
<code>@foreach (varmodel in Model)</code>
<code> </code><code>@Html.Partial("CustomPartialView",model)</code>
最後的呈現的界面如圖6.
圖6
<a href="http://s3.51cto.com/wyfs02/M01/40/EC/wKioL1PPnw2DDgbAAAB3uMAlybk796.jpg" target="_blank"></a>
本文轉自jinyuan0829 51CTO部落格,原文連結:http://blog.51cto.com/jinyuan/1528432,如需轉載請自行聯系原作者