【ASP.NET MVC系列】淺談ASP.NET MVC 視圖

時間 2020-05-08

標籤 ASP.NET MVC系列淺談 asp.net asp mvc 視圖欄目 ASP 简体版

原文原文鏈接

ASP.NET MVC系列文章html

【01】淺談Google Chrome瀏覽器（理論篇）編程

【02】淺談Google Chrome瀏覽器（操做篇）（上）瀏覽器

【03】淺談Google Chrome瀏覽器（操做篇）（下）緩存

【04】淺談ASP.NET框架安全

【05】淺談ASP.NET MVC運行過程   網絡

【06】淺談ASP.NET MVC 控制器框架

【07】淺談ASP.NET MVC 路由   模塊化

【08】淺談ASP.NET MVC 視圖佈局

【09】淺談ASP.NET MVC 視圖與控制器傳遞數據單元測試

【10】淺談jqGrid 在ASP.NET MVC中增刪改查

【11】淺談ASP.NET 頁面之間傳值的幾種方式

【12】淺談緩存技術在ASP.NET中的運用

【13】淺談NuGet在VS中的運用

【14】淺談ASP.NET 程序發佈過程

【15】淺談數據註解和驗證

【16】淺談依賴注入

【17】淺談表單和HTML輔助方法

【18】淺談基於APS.NET身份驗證

【19】淺談ASP.NET MVC 模型

【20】淺談ASP.NET MVC 單元測試

【21】淺談ASP.NET MVC網絡安全;

【22】淺談ASP.NET MVC八大類擴展

【23】再談ASP.NET MVC Routing

【24】淺談ASP.NET 高級話題

【25】淺談大型ASP.NET MVC項目（含DEMO）

【26】下一系列：ASP.NET WebAPI

本篇文章內容屬於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，其餘操做，請讀者自行操做，原理思路同樣，這裏不一一論述。

咱們建立一個基礎UserInfo實體的Create

測試結果

四參考文獻

【01】【01】ASP.NET MVC5 高級編程(Jon Galloway,Brad Wilson,K.Scott Allen,David Matson ,孫遠帥譯)

【02】APS.NET MVC4

五版權區