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> //有标记后,插入代码需要再次@开头
}
*@