Razor视图引擎

Posted wyy1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Razor视图引擎相关的知识,希望对你有一定的参考价值。

一、什么是Razor

  Razor 是一种允许您向网页中嵌入基于服务器的代码(如C#)的标记语法,其根本目的是为了动态输出html标签和其他标签给浏览器。为了提高性能,在Razor视图被首次被请求时,Razor视图引擎会编译这个视图,将cshtml视图编译为C#类(所用的父类定义了Layout属性,这是我们可以使用布局页的前提)这些编译过的C#代码负责输出HTML标签和其他标签给浏览器。

二、Razor的使用

(一)强类型视图

声明视图模型对象的类型使用@model,而访问视图模型对象的属性用@Model

@model Razor.Models.Product      @*这里声明视图模型对象*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @Model.Name             @*这里访问模型对象的属性*@
    </div>
</body>
</html>

(二)使用布局

在MVC中我们可以通过添加“MVC 5 Layout Page(Razor)”来添加一个布局页,布局页的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @*设置title元素内容*@
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        <h1>我在RenderBody上边</h1>
        @RenderBody()
        <h1>我在RenderBody下边</h1>
    </div>
</body>
</html>

使用布局页就很方便了,直接设置Layout属性即可,下边代码的主体部分替代布局页中的@RenderBody(),如下,

@model Razor.Models.Product

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/myLayout.cshtml";
}
<h2>@Model.Name</h2>

运行结果如图:

技术分享图片

注意:在MVC框架中,渲染一个视图时会去查找一个叫做_ViewStart.cshtml的文件,这个文件的内容会视作视图的一部分,我们也可以在这个文件中指定视图Layout的属性。

 (三)使用Razor表达式

1.插入数据值

通过Razor插入数据值常用的有三种方法, ViewData ViewBag Model 。还是用上边获取商品名字的例子:

@model Razor.Models.Product
@using Razor.Models

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/myLayout.cshtml";
}
<!--通过模型对象获取商品名字-->
<p>@Model.Name</p>
<!--通过ViewData获取商品名字,老版本使用,现在不推荐-->
@{
    Product p = ViewData["product"] as Product;
    <p>@p.Name</p>
}
<!--通过ViewBag获取商品名字-->
<p>@ViewBag.product.Name</p>

注意:ViewBag和ViewData的区别
ViewData是字典的键值对结构,在视图上获取的都是object类型,通常需要进行类型转化;ViewBag是 dynamic 动态类型,它会在程序运行的时候动态解析,所以在视图中获取它的数据时候不需要进行类型转换

2.设置标签属性的值

我们可以使用Razor直接给标签的属性赋值,如

<input type="text" name="name" value="@Model.Name" />

Razor模板在标签属性赋值时,有一些智能的地方,像select下option的selected属性和checkbox的checked属性是通过有无来判断的,以checked属性为例,Razor模板中True有checked,而False和null对应没有checked属性

<!-------------------controller中代码---------------------->
ViewBag.IsChecked = true;
ViewBag.IsNotChecked = false;
ViewBag.IsNull = null;

<!-----------------------view中代码------------------------>
True:<input type="checkbox" name="name" checked="@ViewBag.IsChecked" />
False:<input type="checkbox" name="name" checked="@ViewBag.IsNotChecked" />
Null:<input type="checkbox" name="name" checked="@ViewBag.IsNull" />

运行结果如下:

技术分享图片

3.枚举数组和集合

Razor中的if,for,foreach和C#中是一样的这里不再细说,我们有时候希望传给View的是一个数组或者集合,这时应该怎么处理呢?VS中不支持我们指定一个数组作为模型类型,但是Razor本身可以很好地支持数组的,我们可以自己手动添加@model表达式就可以了,直接上代码

 1 <!-----------------------controller中代码--------------------------->
 2  Product[] array = {
 3                new Product{Name="basketball",Price=59M},
 4                new Product{Name="football",Price=39M},
 5                new Product{Name="kayak",Price=260M}
 6         };
 7 public ActionResult Test()
 8 {
 9             return View(array);
10 }
11 <!--------------------------View中代码----------------------------->
12 @*<!---重点是这里,如果我们想指定一个集合的话,把@model表达式换成
13      @model IEnumerable<Razor.Models.Product>  -->
14 *@
15 
16 @model Razor.Models.Product[]
17 
18 @{
19     ViewBag.Title = "Test";
20     Layout = "~/Views/myLayout.cshtml";
21 }
22 
23 @if (Model.Length > 0)
24 {
25     foreach (var item in Model)
26     {
27         <li>名称:<span>@item.Name</span>-----价格:<span>@item.Price</span></li>
28     }
29 }

技术分享图片

4.一些补充

添加引用:

@using Razor.Models

未包含在html元素中的文字文本插入视图:

@:say something

 


以上是关于Razor视图引擎的主要内容,如果未能解决你的问题,请参考以下文章

Razor视图中的@:和语法

ASP.Net MVC开发基础学习笔记:三Razor视图引擎控制器与路由机制学习

如何使用 Razor 视图引擎在 JavaScript 中正确混合 C# 代码。我希望根据 ViewBag 中的值包含或省略 Javascript

Nancy - Razor 视图引擎

使用Razor视图引擎来生成邮件内容

我可以为 Razor 页面使用第三方视图引擎吗? [关闭]