asp.net mvc 4 高级编程学习笔记:第三章 视图(1)

时间:2022-08-30 07:48:05

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

}

*@