asp.net mvc 4 高级编程学习笔记：第三章 视图（1）

1、基础规则

视图的职责是向用户提供用户界面。

视图位于View目录下：有普通的需要控制器渲染的视图，有局部视图，有布局视图等各种视图。

2、视图渲染

控制器默认情况下渲染与控制器同名的目录内的与Action同名的视图，也可以在Action中，通过return view(“视图名”)来指定需要渲染的其他视图，如果视图位于同一个目录内，采用视图名称即可，如果视图位于不同的目录内，需要提供服务端根路径“~/view/Example/index.cshtml”。

3、强类型视图与数据传递

控制器中通过viewData和ViewBag给渲染的视图传递数据，viewData是键值对的对象，viewBag是dynamic字段类型。viewData是viewDataDictionary类型，不是普通的Dictionary类型，它具有一个额外的Model属性，利用这一点可以很容易的向视图传递一个特定的视图类型，称为视图主模型（只能一个），此对象需要作为return view（对象)使用，并在视图的顶部添加如下的代码进行声明：

例如：强类型方式

@model List<MvcMusicStore.Models.Album>

@foreach (var album in Model)

在视图中通过@Model变量获取声明的强类型对象。

如果要传递与视图主模型无关的其它数据，可以存放在viewBag中，通过类型转换的方式来实现强类型的效果。

例如： 非强类型方式

@using MvcMusicStore.Models;

@foreach (Album album in ViewBag.albums)

 4、视图模型ViewModel

对于一个视图只能有一个视图主模型的问题，为了能够将所有的数据都采用强类型的方式进行访问，可以单独编写一个“视图模型类”，将需要传递的数据定义在视图模型类中。

例如：定义视图模型

public class ShoppingCartViewModel
{
public List<Cart> CartItems { get; set; }
public decimal CartTotal { get; set; }
}

强类型引用视图模型：@model MvcMusicStore.ViewModels.ShoppingCartViewModel

5、视图的增加

可以通过解决方案，直接添加一个视图，添加视图时，可以选择视图引擎Razor，是否创建强类型视图，是否创建局部视图，是否套用模板页等选项。

也可以通过Controller中对应的Action，直接添加对应Action所对应的视图。

6、Razor表达式注意事项

Razor代码主要分为：

代码表达式 @代码，无需指出代码表达式的结束位置，会自动识别结束，转为标记模式，有的有二义性，可以通过@(代码)的方式来告诉代码的结束位置。如果要在页面上输出@符号，可以通过@@的方式。

或者代码块 @{  代码；  }

Razor表达式是用HTML自动编码的，可以防止XSS攻击，内容会被直接显示在网页上，失去了原始内容的HTML特性(不被浏览器解析)。如果不要进行HTML编码，可以采用@HTML.Raw()。

当在JS中将用户提供的值赋值给变量时，要使用Javascript字符串编码而不仅仅是HTML编码，这样可以有效的防止被浏览器解析，避免XSS攻击。

var message = "hello @Ajax.JavaScriptStringEncode("\u003cscript\u003ealert(\u0027hack\u0027)\u003c/script\u003e")";

7、Razor语法实例

1) 隐式代码表达式

@Model.Student

2) 显示代码表达式

@(Model.Student)

3) 无编码代码表达式

@HTML.Raw(Model.Student)

4) 代码块，代码块中出现标记会自动结束

@{ Model.Studeng; }

5）文本和标记相混合

@foreach(var item in items)

{

　　<div>@item.Name</div>  //有标记后，插入代码需要再次@开头

}

6）转义字符

@@

7) 注释

@*

@foreach(var item in items)

{

　　<div>@item.Name</div>  //有标记后，插入代码需要再次@开头

}

*@