博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC 5 Web编程4 -- Razor视图引擎
阅读量:4647 次
发布时间:2019-06-09

本文共 7514 字,大约阅读时间需要 25 分钟。

Razor简介

Razor是ASP.NET新增的一个视图引擎,由微软全球最年轻的副总裁,有着"ASP.NET之父"称呼的Scott Guthrie主导的团队开发。

主导Razor开发的Scott Guthrie,毕业于美国杜克大学。现任微软云计算与企业级产品工程部执行副总裁。

Razor对传统aspx页面的写法和页面渲染能力提出了反思,所以它在代码书写和HTML生成方面都进行了优化。Rzaor的设计目标遵循以下几点:

a). 尽量减少代码

b). 上手快,只需要现有的编程语言和基本的HTML知识

c). 可以使用记事本编写

d). 便于单元测试

Rzaor视图引擎页面以.cshtml(或.vbhtml)文件后缀结尾,是ASP.NET MVC 5默认使用的页面展现形式。

Razor与.aspx视图引擎对比

为了有一个直观的认识,我们先来看一个简单的用户管理页面的实现:

假定上图的页面呈现效果就是我们的最终目标。先来看Razor实现的页面:

@{    Layout = null;}@model IEnumerable
@Html.ActionLink("新增", "Add", "UserInfo")

用户信息列表

@foreach (var item in Model) {
}
姓名 性别 年龄 部门 操作
@Html.DisplayFor(p => item.UserName) @(item.Sex == 0 ? "女" : "男") @Html.DisplayFor(p => item.Age) @Html.DisplayFor(p => item.Dept) @Html.ActionLink("编辑", "Edit", "UserInfo", new { id=item.UserID.ToString() },null) @Html.ActionLink("删除", "Delete", "UserInfo", new { id = item.UserID.ToString() }, new { οnclick="return confirm('确认删除"+item.UserName+"的记录?');" })
View Code

同时贴出传统aspx页面的代码(注:样式代码部分省略):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MVC5Demo.WebForms.UserInfo.WebForm1" %>
View Code

站在Razor的角度,

与传统aspx页面实现的代码不同,主要是以下几点:

1. 没有使用"GridView" 服务器控件(或者说没有这样的控件可以使用);

2. 使用@符号代替<%= %>来访问服务器代码;

3. 使用MVC提供的HTML辅助函数来渲染页面(代替服务器控件形式);

4. 其他不同点(如页头)。

可以看到,Razor的页面处理更"精细",在页面展示上有点类似jsp(或者说回到了asp?),你需要具备基本的HTML知识(如画Table),因为"视图设计器","服务器控件"这些你曾经熟悉的东西,"不存在"了。

我们再来看看两种视图引擎生成的HTML源代码的差异。先来看Razor页面生成的HTML:

    
新增

用户信息列表

姓名 性别 年龄 部门 操作
lili 22 Human Resource 编辑 删除
zhangsan 0 Resource 编辑 删除
hangwei 26 Technology 编辑 删除
xiaoya 20 Human Resource 编辑 删除
lulu 19 public relation 编辑 删除
View Code

总的来说,非常"干净"。跟Razor书写的代码几乎一样。再来看aspx页面生成的HTML:

新增
姓名 性别 年龄 部门 编辑 删除
lili 0 22 Human Resource 编辑 删除
zhangsan 0 0 Resource 编辑 删除
hangwei 1 26 Technology 编辑 删除
xiaoya 0 20 Human Resource 编辑 删除
lulu 0 19 public relation 编辑 删除
View Code

直观的,多了些"ViewState"。以上对比是不是就能说明MVC从性能和书写方面比WebForms好呢?

关于这点,首先注意Razor介绍里,Razor是一个独立的渲染引擎。至今为止没有专业的团队从性能的角度去测试它和WebForms的区别并给出实际结果的(估计结果相差不大)。其次,我个人比较赞同老赵的观点(),高性能Web应用程序大多与具体所用的实现技术无关。MVC和WebForms各有各的好处和适合的应用场景,一味的压低WebForms抬高MVC,有种跟风和墙头草嫌疑。

Razor语法

1). @标示符

     @符号表示Razor代码块的开始,无需像WebForms那样,加'%>'表示结束。Razor会自动从@符号的右边开始,判断哪些是后台代码,哪些是前台HTML。

     

 

2). 普通输出

     如在.cshtml文件中,输入下面的代码:

@DateTime.Now;

     前台会显示什么呢?如下图:

     

     前台显示 时间+";"(注意这个分号),在单语句@符号后,进行代码书写,是不需要加分号的,加分号会被当做HTML文本来输出到前台。

     如果进行代码和文本混合编写,可以这样:

时间 @DateTime.Now 星期: @DateTime.Now.DayOfWeek

     文本和Razor代码,中间加空格,这样视图引擎就可以判定@后是代码部分。

     关于文本和代码混合,还有一种简单的方式:

@("today is :" + DateTime.Now.Year + "year.")

     使用@(),来进行多符号语句输出。

 

3). 在语句块中输出

     语句块,使用@{}来表示一段代码。

@{            @DateTime.Now.Month;            
int x = 8; @x; }

      在语句块中,需要注意的是:

      a. 使用@符号进行输出,并且由于块中遵循C#代码机制,建议加分号(';'),这个分号不会输出到前台页面;

      b. 直接使用HTML标签,会自动被识别为前台代码。这点真的很方便,想想在一个C#代码的编译环境,直接写HTML标签输出...;

      c. 不能直接输出字符,如直接在代码块中书写"Test" ,Test 等,都是不被允许的,请谨记代码块中遵循的是C#(或VB)环境;

      d. 其它书写方式同后台代码。

 

4). HTML辅助函数 

     以往的方式,我们是在代码中向前台输出HTML文本,这可以实现,但,不是很理想。像我本人,以前还使用了像jsrender这样的页面渲染方式。现在,借助于Razor的HTML辅助函数,可以轻松实现代码输出HTML。

     使用@helper 语法,自定义辅助函数(代码片段可以放在任意位置)。

@helper pList(List
lst) {
//HTML辅助函数
    @foreach (string p in lst) {
  • @p
  • }
}

      然后使用

HTML辅助函数:        @{            List
lsts = new List
{ "a", "b", "c", "d", "e" }; @pList(lsts); }

      由于定义了名为pList的函数,使用时直接调用即可。

 

5). 其它

      a)一些书写习惯,作用上是等价的,如条件判断、循环分支:

@if (1 == 1) {         }        @foreach (string p in lsts){        }        @{            if (1 == 1) { }            foreach (string p in lsts) { }        }

       b)代码注释,使用@*  ...  *@

@*            代码注释符:            http://www.cnblogs.com/hangwei        *@

       c)输出@符号,使用 @@

       d)字符串转换

字符串转换:        @{            string str = "10000";            @str.AsInt();//在块中遵循后台代码形式        }

 

6). 布局(模板)的使用

     a)layout布局页的使用

     首先你需要在MVC工程下的Views/Shared目录下,新建一个视图文件(此目录默认用来存放layout(模板)文件)。这里我们新建一个TestLayout.cshtml,代码如下:

@{    Layout = null;}    
1.TestLayout是模板页 @DateTime.Now.ToString("HH:mm:ss.fff")
@RenderBody()

定义好布局页的内容 ,子页的部分,用@RenderBody()表示。再新建一个子页套用此布局页,代码如下:

@{    Layout = "~/Views/Shared/TestLayout.cshtml";}    
2.Index页面 @DateTime.Now.ToString("HH:mm:ss.fff")

在页面的开始部分,使用Layout指定模板页的地址即可。我们再来看前台显示效果:

需要注意的是:MVC跟WebForms不同,子页是先于布局页被显示(渲染)出来的。

      b)布局页的灵活使用(RenderSection)

      有时我们需要页面的区域内容不是由布局页定,而是动态的,由子页自己决定内容的呈现。这时就使用到了RenderSection。比如我们在布局页TestLayout.cshtml加入以下代码:

再在子页中加入以下代码:

@section menu{        
}

前台显示效果:

 

总结

本文主要对Razor的创立,Razor和WebForms视图引擎的对比做了简单介绍;同时详细介绍了Razor的语法。在下一章中,将介绍MVC5页面之间的传值,敬请期待~

希望对你有帮助。

转载于:https://www.cnblogs.com/hangwei/p/4391058.html

你可能感兴趣的文章
apt-get for ubuntu 工具简介
查看>>
数值计算算法-多项式插值算法的实现与分析
查看>>
day8-异常处理与网络编程
查看>>
Python基础-time and datetime
查看>>
Linux epoll 笔记(高并发事件处理机制)
查看>>
shell脚本练习01
查看>>
WPF图标拾取器
查看>>
通过取父级for循环的i来理解闭包,iife,匿名函数
查看>>
HDU 3374 String Problem
查看>>
数据集
查看>>
[Leetcode] unique paths ii 独特路径
查看>>
HDU 1217 Arbitrage (Floyd + SPFA判环)
查看>>
IntelliJ idea学习资源
查看>>
Django Rest Framework -解析器
查看>>
ExtJs 分组表格控件----监听
查看>>
Hibernate二级缓存配置
查看>>
LoadRunner常用术语
查看>>
关于jedis2.4以上版本的连接池配置,及工具类
查看>>
记忆讲师石伟华微信公众号2017所有文章汇总(待更新)
查看>>
mechanize (1)
查看>>