ASP.NET MVC 視圖(五)

ASP.NET MVC 視圖(五)

前言

上篇講解了視圖中的分段概念、和分部視圖的使用，本篇將會對Razor的基礎語法簡潔的說明一下，前面的不少篇幅中都有涉及到視圖的調用，其中用了不少視圖輔助器，也就是至關於傳統webform中的服務器控件，它們都是給咱們帶來方便的。都是用於生成Html代碼的。

 

ASP.NET MVC 視圖

• 自定義視圖引擎
• Razor視圖引擎執行過程
• Razor視圖的依賴注入、自定義視圖輔助器
• 分段、分部視圖的使用
• Razor語法、視圖輔助器

 

Razor語法-區分代碼和標記語言

在視圖中，咱們能夠體會獲得Razor引擎給咱們帶來的便利，而後初學的時候總有一個寫苦惱，由於在使用代碼或者是標籤的時候經常分不清在哪裏使用」;」分號來結束代碼，在Razor中提供了兩種不一樣的方式來區分代碼和標籤，也就是代碼段和代碼塊。

 

代碼段

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

代碼1-1

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

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

<p>Action to Index: <a href="/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代碼，圖一、圖2

圖1

圖2

這裏要說明的一點是，由於是爲了方便演示，因此這裏的視圖是強類型視圖，因此可使用強類型的視圖輔助器。

從圖2中咱們就能夠看到二者的使用效果是相同的,並且CheckBox類型的輔助器是惟一的一個生成兩個input元素的輔助器。

 

下面咱們再來看Radiobutton輔助器

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

代碼1-5

@model MvcApplication.Models.CustomerInfo

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@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

<h1>@Model.ID</h1>

<h2>@Model.Name</h2>

@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類型的表格，用法上面所演示的都同樣，惟一缺乏的就是對於強類型的演示；不過不復雜了本身搗鼓一下也就好了，帶點難度的上面都說明了。

Html元素	示例
Checkbox (複選框)	Html.CheckBox(「myCheckBox」,false) 輸出： <input id=」myCheckBox」 name=」myCheckBox」 type=」checkbox」 value=」true」 /> <input name=」myCheckBox」 type=」hidden」 value=」false」/>
Hidden field （隱藏字段）	Html.Hidden(「mHidden」,」val」) 輸出： <input id=」myHidden」 name=」myHidden」 type=」hidden」 value=」val」 />
Radio button 單選框	Html.RadioButton(「myRadiobutton」,」val」,true) 輸出： <input checked=」checked」 id=」myRadiobutton」 name=」myRadiobutton」 type=」radio」 value=」val」 />
Password 密令字符	Html.Password(「myPassword」,」val」) 輸出： <input id=」myPassword」 name=」myPassword」 type=」password」 value=」val」 />
TextBox 文本框	Html.TextBox(「myTextbox」,」val」) 輸出： <input id=」myTextbox」 name=」myTextbox」 type=」text」 value=」val」 />

 

 

做者：金源

出處：http://www.cnblogs.com/jin-yuan/

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面