【ASP.NET系列】詳解Views_ZenDei技術網路在線

描述本片文章內容屬於ASP.NET MVC系列視圖篇，主要講解View，大致內容如下： 1.Views文件夾講解 2.View種類 3.Razor語法 4.對視圖的基本操作一 Views文件夾（一） Views文件夾下常用文件種類分析： 1.ASP.NET MVC頁面基本被放在Views文件 ...

描述

本片文章內容屬於ASP.NET MVC系列視圖篇，主要講解View，大致內容如下：

1.Views文件夾講解

2.View種類

3.Razor語法

4.對視圖的基本操作

一 Views文件夾

（一） Views文件夾下常用文件種類

分析：

1.ASP.NET MVC頁面基本被放在Views文件夾下；

2.利用APS.NET MVC模板生成框架，Views文件夾下的預設頁面為.cshtml頁面；

3.ASP.NET MVC預設頁面為Razor格式的頁面，因此預設頁面為.cshtml頁面；

4.ASP.NET MVC中，支持WebForm頁面，即.aspx頁面；

5.ASP.NET MVC中，支持靜態html頁面；

（二）預設Views文件夾包含內容

分析：

1.這裡沒添加Account控制器；

2).預設約定：在Controllers新增一個控制器，就會預設地在Views文件夾下新增一個視圖問價，用來存放該控制器添加的視圖，如上圖中增加Home控制器，

在Views下就自動新增加Home文件，用來存放是Home控制器視圖；

二視圖種類

（一）起始視圖——_ViewStart.cshtml

分析：

1.打開_ViewStart.cshtml文件，我們發現該文件是引用Shared文件夾下的_Layout.cshtml文件，_Layout.cshtml是什麼文件？佈局頁，稍後將分析；

2.我們來做如下動作

(1)將_ViewStart.cshtml內容註釋掉，且添加一個div內容

(2)添加控制器_ViewStartDemoController和Index.cshtml視圖

(3)運行程式，訪問視圖：http://localhost:2016/_ViewStartDemo/Index

分析：

查看html

（二）佈局視圖

如上，我們分析了_VeiwStart.cshtml文件，我們發現裡面有一段代碼

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

不理解這局話不要緊，它採用的Razor語法格式，將稍後與大家分享Razor，但我們看到了_Layout.cshtml文件，該文件即是Views文件夾下，Shared文件夾下的_Layout.cshtml視圖

1.查看_Layout.cshtml視圖

分析：

(1)_Layout.cshtml基本結構就是HTML基本結構(其實，.aspx和.cshtml結構，均是html結構);

(2)我們發現在<body></body>區域，有兩個後臺代碼：@RenderBody()和@RenderSection()。@RenderBody()表示視圖體，@RenderSection()表示部分視圖和節點；

(3)我們將程式運行起來，看看

分析：

(1)我們發現最終呈現的頁面由兩部分組成：Layout.cshtml頁面(由_ViewStart.cshtml頁面引用_Layout.cshtml頁面實現)和Home控制器下的Index頁面;

(2)_Layout.cshtml到底是什麼？佈局頁，相當於WebForm的模板頁面；

(3)下麵我們來定義一個模板頁

（三）強類型視圖

何為“強類型視圖”？Controller向View傳遞少量數據，一般情況，我們可以歸為兩大類別：弱類別傳遞（ViewBag，ViewData，TempData）和強類別傳遞（強類型視圖）。然而，在實際操作中，當涉及大量數據時，

弱類別就顯得不是那麼方便，此時，一般採用強類型視圖。強類型視圖一般由三部分構成，即控制器層，視圖層和模型層，三者之間調用關係可表示為：

1.創建一個強類型視圖

(1)在Model文件夾添加一個UserInfo類

public class UserInfo
    {
        string UserName { get; set; }
        string UserAddress { get; set; }
    }

(2)在控制器PartialViewDemo中添加一個方法QiangLeiXing()，並添加視圖

(3)強類型視圖分析

使用強類型視圖，從控制器向視圖傳遞一個在兩端都是強類型的模型對象，從那個人獲得智能感知、編譯檢查等好處。在Controller方法中，可以通過向重載的View方法中傳遞模型實例來指定模型。

 public ActionResult QiangLeiXingView()
        {
            List<UserInfo> List_UserInfo = new List<UserInfo>();
            for (int i = 0; i < 2; i++)
            {
                List_UserInfo.Add(new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" + (i++) });
            }
            ViewBag.List_UserInfo = List_UserInfo;
            return View(List_UserInfo);
        }

下一步是告知視圖哪種類型的模型正在使用@model聲明。註意，這裡需要輸入模型的完全限定名(名稱空間和類型名稱)

@model IEnumerable<ViewDemo.Models.UserInfo>

對應View

@model IEnumerable<ViewDemo.Models.UserInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QiangLeiXingView</title>
</head>
<body>
    <div> 
        <ul>
            @foreach(ViewDemo.Models.UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>
</body>
</html>

當然你也可以採用如下限定

@using ViewDemo.Models
@model IEnumerable<UserInfo>

對應的View

@using ViewDemo.Models
@model IEnumerable<UserInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>QiangLeiXingView</title>
</head>
<body>
    <div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>
</body>
</html>

2.關於Controller和View之間傳值，請參考我的另一篇文章：【ASP.NET MVC】View與Controller之間傳遞數據

由於本篇文章關於頁面之間傳值講得比較詳細，因此這裡就不分析了。

3.我們來分析一下，為什麼使用弱型別來傳遞不是很方便的原因

關於這個例子，只舉例ViewBag(ViewData和TempData差不多原理)

(1)在控制器PartialViewDemo中添加方法

 /// <summary>
        /// 弱類型視圖，使用ViewBag來傳遞數據
        /// </summary>
        /// <returns></returns>
        public ActionResult RuoLeiXingView()
        {
            List<UserInfo> List_UserInfo = new List<UserInfo>();
            for (int i = 0; i < 2; i++)
            {
                List_UserInfo.Add(new UserInfo() { UserName = "Alan_beijing" + i, UserAddress = "上海" });
            }
            ViewBag.List_UserInfo = List_UserInfo;
            return View();
        }

(2)在視圖中接收數據

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RuoLeiXingView</title>
</head>
<body>
    <div>
        @foreach(ViewDemo.Models.UserInfo V_UserInfo in (ViewBag.List_UserInfo as IEnumerable<ViewDemo.Models.UserInfo>))
        {
            @V_UserInfo.UserName
            @V_UserInfo.UserAddress
            <br />
        }
   </div>
</body>
</html>

我們發現在枚舉之前，需要將動態的ViewBag.List_UserInf 轉化為IEnumerable<UserInfo>類型，比較麻煩，當然，你可以使用Dynamic代替

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RuoLeiXingView</title>
</head>
<body>
    <div>
       @foreach(dynamic D_UserInfo in ViewBag.List_UserInfo)
        {
            @D_UserInfo.UserName
            @D_UserInfo.UserAddress
            <br />
        }
    </div>
</body>
</html>

使用Dynamic似乎方便了許多，但細心的你可能已經發現，變數沒有了智能感應功能。

到此，大家應該明白了ViewBag的不方便性了，當然，細心的你又會發現，強類型視圖，剛好具備如上兩個優勢。

（四）部分視圖

何為“分佈視圖”？在WebForm開發中，我們經常用到用戶自定義控制項，其作用是提高代碼的復用性，減少代碼的冗餘，使程式更加模塊化，那麼，在ASP.NET MVC中，對應地引入了基於Razor結構的分佈頁，其作用與

WebForm開發中的用戶自定義控制項差不多。

1. 創建分佈頁

我們在/Views/Shared文件夾下創建一個分佈頁_PartialPageDemo.cshtml，並向該頁面中添加一段代碼：

<h1 style="color:red">我是分佈頁</h1>

創建過程如下:

2.調用分佈頁

(1) 添加控制器PartialViewDemo和視圖Index.cshtml

(2)在Index.cshtml頁面中調用_PartialPageDemo.cshtml

3.調用分佈頁的幾種方式

方式一：

@Html.Partial()

方式二：

@Html.Action()

方式三：

通過Ajax方式調用；

三 Razor語法

Razor視圖引擎是ASP.NET MVC3中新擴展的內容，並且也是他的預設視圖引擎，其設計理念是：簡單直觀。Razor視圖引擎可分為MVC和WebForm視圖引擎，基於篇幅限制，本文只分析MVC Razor視圖引擎。Razor中的核心轉

換符"@",代表：標記-代碼或代碼-標記的意思。一般有兩種基本轉換，即代碼表達式和代碼塊。

（一）代碼表達式

1.支持隱式代碼表達式求解

這個特性，在強類型視圖中，體現得很明顯。

<div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>

2.支持顯示代碼表達式

<div>1+2=@(1+2)<div>

3.Razor十分智能，可以知道表達後面的空格字元不是一個有效的標識符，所以它可以順暢地轉回到標記語言。

4.自動識別郵件格式

會自動識別郵件，而並不是當作變數。

<div>@www.qq.com</div>

5.支持文本量

@{

      string  BlogName="Alan_beijing";
 }
<div>@BlogName.Views</div>

這段代碼回提示錯誤，提示string沒有Views屬性。

其實我們想要輸出的結果：Alan_beijing.Views，但@BlogName.Views ，View被解析為BlogName的一個屬性，因此出錯，此時，應用字面量

@{

      string  BlogName="Alan_beijing";
 }
<div>@(BlogName).Views</div>

6.支持轉義字元

如我想輸出:@Alan_beijing

<div>@@Alan_beijing</div>

（二）支持HTML編碼

我們知道，在防止XSS攻擊時了(跨站腳本註入攻擊)　，首先要做到HTML編碼，Razor剛好是HTML編碼的。

@{

     string message="<script>alert('haacked!')</script>";

}
<span>@message<span>

這段代碼不會彈出警告框而只會呈現編碼的HTML

<span>&alt;script>alert('haacked!');&alt;/script></span>

這裡不論述這個，後在【ASP.NET MVC系列】的後續篇幅中，專門講解。

(三) 代碼塊

這個大家應該用的比較多，foreach

<div> 
        <ul>
            @foreach(UserInfo V_UserInfo in Model)
            {
                @V_UserInfo.UserName
                @V_UserInfo.UserAddress
                <br/>
            }
        </ul>
    </div>

四對視圖的基本操作

ASP.NET MVC 提供的模板中，當創建View時，提供了六種模型，分別為Create,Delete,Detail,Edit,Empty,Empty(不具有模型),List。基於該模型，我們可以輕鬆地創建具體實體的增刪改查。由於比較簡單，本例只

簡單結合UserInfo實體演示Create，其他操作，請讀者自行操作，原理思路一樣，這裡不一一論述。