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

<h2>@Model.ID</h2>

<h3>@Model.Name</h3>

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

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

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

圖1

圖2

這里要說明的一點是，因為是為了方便演示，所以這里的視圖是強類型視圖，所以可以使用強類型的視圖輔助器。

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

下面我們再來看Radiobutton輔助器

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

代碼1-5

@model MvcApplication.Models.CustomerInfo

<h2>@Model.ID</h2>

<h3>@Model.Name</h3>

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

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

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

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

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

圖3

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

圖4

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

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

代碼1-6

<div class=@Model.ID>

    <p>

        @Html.RadioButtonFor(model => model.Check,Model.Check, new { id = "radio1" })</p>

    <p>

        @Html.RadioButtonFor(model => model.Check,!Model.Check, new { id = "radio2" })</p>

</div>

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

第二個參數則為對應第一個參數類型當中的值，如果此時的Model當中的值跟當前的參數匹配則會設置當前的單選框為選中狀態。

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

圖5

圖6

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

代碼1-7

public class CustomerInfo

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public bool Check { get; set; }

        public EnumCase EnumCase { get;set; }

    }

    public enum EnumCase

    {

        EnumOne=0,

        EnumTwo=1,

        EnumThree=2

    }

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

代碼1-8

@model MvcApplication.Models.CustomerInfo
@using MvcApplication.Models
<h2>@Model.ID</h2>
<h3>@Model.Name</h3>
@Html.CheckBox("Check", Model.Check)
@Html.CheckBoxFor(model=> model.Check)
<div class=@Model.ID>
    <p>
        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumOne, new{ id = "radio1" })</p>
    <p>
        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumTwo, new{ id = "radio2" })</p>
    <p>
        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumThree, new{ id = "radio3" })</p>
</div>

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

代碼1-9

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

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

圖7

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