ASP.NET MVC 視圖(五)

ASP.NET MVC 視圖(五)

前言

上篇講解了視圖中的分段概念、和分部視圖的使用，本篇将會對Razor的基礎文法簡潔的說明一下，前面的很多篇幅中都有涉及到視圖的調用，其中用了很多視圖輔助器，也就是相當于傳統webform中的伺服器控件，它們都是給我們帶來友善的。都是用于生成Html代碼的。

ASP.NETMVC 視圖

l  自定義視圖引擎

l Razor視圖引擎執行過程

l  Razor視圖的依賴注入、自定義視圖輔助器

l  分段、分部視圖的使用

l  Razor文法、視圖輔助器

Razor文法-區分代碼和标記語言

在視圖中，我們可以體會得到Razor引擎給我們帶來的便利，然後初學的時候總有一個寫苦惱，因為在使用代碼或者是标簽的時候常常分不清在哪裡使用”;”分号來結束代碼，在Razor中提供了兩種不同的方式來區分代碼和标簽，也就是代碼段和代碼塊。

代碼段

代碼段就是一些視圖輔助器或者是表達式，它們可以在一行中進行渲染，也可以與文本混合的，例如示例代碼1-1.

代碼1-1

<p>Actionto Index:@Html.ActionLink("Index","Index")</p>

表達式跟在@之後，代碼1-1将會渲染以下的輸出結果：

<p>Actionto Index: <ahref="/home/Index">Index</a></p>

這裡要說明就是這裡的代碼段必須是要傳回标記代碼給視圖渲染，如果編寫的代碼段是傳回void的，視圖在執行的時候是會報錯的。

代碼塊

代碼塊是一段包含代碼的視圖，它裡面隻包含代碼，而不是代碼和标記語言的混合，Razor中定義的代碼塊要求是使用”@{}”來包裝，以”@{“開始，”}”結束。而且在代碼塊中的代碼書寫方式就和.cs檔案中的C#類型代碼一樣，每行代碼都必須以;結尾的。來看下示例代碼1-2.

代碼1-2

@{

    ViewBag.Title = "代碼塊";

}

視圖輔助器

這些輔助器都是擴充了ASP.NET MVC視圖對象的HtmlHelper對象，用擴充方法的技術來實作這些輔助器，對于擴充方法可以看我前面寫的《ASP.NET MVC學前篇之擴充方法、鍊式程式設計》篇幅，而在視圖系列前面的篇幅也說到過視圖檔案會編譯成.cs類檔案并且是編譯成類型對象，而我們使用的就是這個類型對象中的Html屬性，它的屬性類型就是HtmlHelper類型，對于自定義輔助器可以看這個視圖系列的《ASP.NET MVC 視圖(三)》篇幅，這裡不多說了下面我們來看一下關于Input類型的一些視圖輔助器，都是些基礎知識，了解的大神們可以直接忽略掉了。

我們先來看一下Checkbox的視圖輔助器。

對應的是HtmlHelper.CheckBox()和HtmlHelper. CheckBoxFor<TModel>()，第一個方法是個普通的類型，可自由的傳遞參數值，而第二種方法則是針對于強類型視圖的輔助器方法，參數類型為lambda表達式，而表達式的參數類型就是強類型視圖的Model類型了，以下所講的這些視圖輔助器幾乎所有都是采用的這種程式設計模型，我們還是來看代碼。

代碼1-3ViewModel:

    public class CustomerInfo

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public bool Check { get; set; }

    }

代碼1-4View：

@model MvcApplication.Models.CustomerInfo

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@Html.CheckBox("Check", Model.Check)

@Html.CheckBoxFor(model=> model.Check)

在示例中Check值是為true的，我們看一下渲染後的效果圖，以及輔助器所傳回的Html代碼，圖1、圖2

圖1

<a href="http://s3.51cto.com/wyfs02/M01/41/22/wKiom1PRDHmizHexAABHTrKcvJ8781.jpg" target="_blank"></a>

圖2

<a href="http://s3.51cto.com/wyfs02/M00/41/22/wKiom1PRDIHj5e4uAAEhLM9mnh4335.jpg" target="_blank"></a>

這裡要說明的一點是，因為是為了友善示範，是以這裡的視圖是強類型視圖，是以可以使用強類型的視圖輔助器。

從圖2中我們就可以看到兩者的使用效果是相同的,而且CheckBox類型的輔助器是唯一的一個生成兩個input元素的輔助器。

下面我們再來看Radiobutton輔助器

我先來示範一下普通的方式，也就是RadioButton()方法。還是接着上面的示例來看，

代碼1-5

@Html.RadioButton("Check",Model.Check,Model.Check)

@Html.RadioButton("Check", !Model.Check, !Model.Check)

這裡的視圖還是強類型視圖，隻不過是借用一下Model，我們來看一下結果圖，

圖3

<a href="http://s3.51cto.com/wyfs02/M01/41/22/wKiom1PRDJPQ8L3bAABT21nUksc592.jpg" target="_blank"></a>

在這裡要說一下，Model裡的Check屬性值是為true的，是以在顯示的時候第一個單選框被設定為了選中狀态了。

圖4

<a href="http://s3.51cto.com/wyfs02/M00/41/22/wKioL1PRDbnABivmAABt26fLKhg042.jpg" target="_blank"></a>

圖4所示的就是輔助器生成傳回的Html代碼

下面我們再來看一下單選框強類型版本的輔助器，也就是對應着RadioButtonFor()擴充方法。

代碼1-6

&lt;div [email protected]&gt;

    &lt;p&gt;

        @Html.RadioButtonFor(model =&gt; model.Check,Model.Check, new { id = "radio1" })&lt;/p&gt;

        @Html.RadioButtonFor(model =&gt; model.Check,!Model.Check, new { id = "radio2" })&lt;/p&gt;

&lt;/div&gt;

在代碼1-6中我們可以看到RadioButtonFor()方法中有三個參數，第一個為lambda表達式類型，這個參數表示着RadioButtonFor()擴充方法内部綁定值的類型，這裡這樣說可能有點不清楚後面我會給大家再示範一個示例，這樣才會更清晰。

第二個參數則為對應第一個參數類型當中的值，如果此時的Model當中的值跟目前的參數比對則會設定目前的單選框為選中狀态。

第三個參數則是為了修改RadioButtonFor()擴充方法生成的Input元素中的屬性值，示例中我們是修改了Input元素的Id的值。我們看一下渲染後的視圖和Input元素代碼。

圖5

<a href="http://s3.51cto.com/wyfs02/M02/41/22/wKiom1PRDLCwueGYAABRIqUTHqY218.jpg" target="_blank"></a>

圖6

<a href="http://s3.51cto.com/wyfs02/M02/41/22/wKioL1PRDdThIseaAADDPTuaqHs275.jpg" target="_blank"></a>

下面我修改一下ViewModel，示例代碼1-7.

代碼1-7

public class CustomerInfo

        public EnumCase EnumCase { get;set; }

    public enum EnumCase

        EnumOne=0,

        EnumTwo=1,

        EnumThree=2

看到代碼1-7中的定義了吧，我在ViewModel中添置了一個示例的枚舉類型，這樣更直覺，現在我們看一下視圖中的代碼，示例代碼1-8

代碼1-8

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code>@model MvcApplication.Models.CustomerInfo</code>

<code>@using MvcApplication.Models</code>

<code>&lt;</code><code>h1</code><code>&gt;@Model.ID&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;</code><code>h2</code><code>&gt;@Model.Name&lt;/</code><code>h2</code><code>&gt;</code>

<code>@Html.CheckBox("Check", Model.Check)</code>

<code>@Html.CheckBoxFor(model=&gt; model.Check)</code>

<code>&lt;</code><code>div</code> <code>[email protected]&gt;</code>

<code>    </code><code>&lt;</code><code>p</code><code>&gt;</code>

<code>        </code><code>@Html.RadioButtonFor(model =&gt; model.EnumCase, EnumCase.EnumOne, new{ id = "radio1" })&lt;/</code><code>p</code><code>&gt;</code>

<code>        </code><code>@Html.RadioButtonFor(model =&gt; model.EnumCase, EnumCase.EnumTwo, new{ id = "radio2" })&lt;/</code><code>p</code><code>&gt;</code>

<code>        </code><code>@Html.RadioButtonFor(model =&gt; model.EnumCase, EnumCase.EnumThree, new{ id = "radio3" })&lt;/</code><code>p</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

傳入到視圖的ViewModel值如下代碼1-9所示：

代碼1-9

new CustomerInfo(){ID="001",Name="張三", Check=true, EnumCase= EnumCase.EnumThree};

下面我們代碼1-8視圖渲染呈現後的頁面，圖7.

圖7

<a href="http://s3.51cto.com/wyfs02/M02/41/22/wKioL1PRDfXzgVgCAABTp6h6ADU551.jpg" target="_blank"></a>

最後附上Input類型的表格，用法上面所示範的都一樣，唯一缺少的就是對于強類型的示範；不過不複雜了自己搗鼓一下也就行了，帶點難度的上面都說明了。

Html元素

示例

Checkbox

(複選框)

Html.CheckBox(“myCheckBox”,false)

輸出：

&lt;input id=”myCheckBox” name=”myCheckBox”type=”checkbox” value=”true” /&gt;

&lt;input name=”myCheckBox”type=”hidden” value=”false”/&gt;

Hidden field

（隐藏字段）

Html.Hidden(“mHidden”,”val”)

&lt;input id=”myHidden”name=”myHidden” type=”hidden” value=”val” /&gt;

Radio button

單選框

Html.RadioButton(“myRadiobutton”,”val”,true)

&lt;input checked=”checked”id=”myRadiobutton” name=”myRadiobutton” type=”radio” value=”val” /&gt;

Password

密令字元

Html.Password(“myPassword”,”val”)

&lt;input id=”myPassword”name=”myPassword” type=”password” value=”val” /&gt;

TextBox

文本框

Html.TextBox(“myTextbox”,”val”)

&lt;input id=”myTextbox”name=”myTextbox” type=”text” value=”val” /&gt;

     本文轉自jinyuan0829 51CTO部落格，原文連結：http://blog.51cto.com/jinyuan/1529853，如需轉載請自行聯系原作者