ASP.NET MVC系列文章
【02】淺談Google Chrome瀏覽器（操作篇）（上）
【03】淺談Google Chrome瀏覽器（操作篇）（下）
【04】淺談ASP.NET框架
【07】淺談ASP.NET MVC 路由
【08】淺談ASP.NET MVC 視圖
【10】淺談jqGrid 在ASP.NET MVC中增刪改查
【13】淺談NuGet在VS中的運用
【14】淺談ASP.NET 程序發布過程
本篇文章內容屬於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
五 版權區
- 感謝您的閱讀，若有不足之處，歡迎指教，共同學習、共同進步。
- 博主網址：http://www.cnblogs.com/wangjiming/。
- 極少部分文章利用讀書、參考、引用、抄襲、復制和粘貼等多種方式整合而成的，大部分為原創。
- 如您喜歡，麻煩推薦一下；如您有新想法，歡迎提出，郵箱：2016177728@qq.com。
- 可以轉載該博客，但必須著名博客來源。