ASP.NET MVC視圖(五)

創(chuàng)新互聯(lián)公司專注于辰溪企業(yè)網(wǎng)站建設,響應式網(wǎng)站,成都做商城網(wǎng)站。辰溪網(wǎng)站建設公司,為辰溪等地區(qū)提供建站服務。全流程按需設計，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

前言

上篇講解了視圖中的分段概念、和分部視圖的使用，本篇將會對Razor的基礎語法簡潔的說明一下，前面的很多篇幅中都有涉及到視圖的調(diào)用，其中用了很多視圖輔助器，也就是相當于傳統(tǒng)webform中的服務器控件，它們都是給我們帶來方便的。都是用于生成Html代碼的。

ASP.NETMVC視圖

l 自定義視圖引擎

l Razor視圖引擎執(zhí)行過程

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

l 分段、分部視圖的使用

l Razor語法、視圖輔助器

Razor語法-區(qū)分代碼和標記語言

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

代碼段

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

代碼1-1

Actionto Index:@Html.ActionLink("Index","Index")

表達式跟在@之后，代碼1-1將會渲染以下的輸出結(jié)果：

Actionto Index: Index

這里要說明就是這里的代碼段必須是要返回標記代碼給視圖渲染，如果編寫的代碼段是返回void的，視圖在執(zhí)行的時候是會報錯的。

代碼塊

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

代碼1-2

@{

    ViewBag.Title = "代碼塊";

}

視圖輔助器

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

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

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

代碼1-3ViewModel:

    public class CustomerInfo

    {

        public string ID { get; set; }

        public string Name { get; set; }

        public bool Check { get; set; }

    }

代碼1-4View：

@modelMvcApplication.Models.CustomerInfo

@Model.ID

@Model.Name

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

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

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

圖1

圖2

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

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

下面我們再來看Radiobutton輔助器

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

代碼1-5

@modelMvcApplication.Models.CustomerInfo

@Model.ID

@Model.Name

@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，我們來看一下結(jié)果圖，

圖3

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

圖4

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

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

代碼1-6

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

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

第三個參數(shù)則是為了修改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中添置了一個示例的枚舉類型，這樣更直觀，現(xiàn)在我們看一下視圖中的代碼，示例代碼1-8

代碼1-8

@model MvcApplication.Models.CustomerInfo
@using MvcApplication.Models
@Model.ID
@Model.Name
@Html.CheckBox("Check", Model.Check)
@Html.CheckBoxFor(model=> model.Check)

    

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumOne, new{ id = "radio1" })
    

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumTwo, new{ id = "radio2" })
    

        @Html.RadioButtonFor(model => model.EnumCase, EnumCase.EnumThree, new{ id = "radio3" })