ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html
上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework
下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
源码下载:点我下载
一、Razor简介
在解决方案资源管理器中查看Views文件夹下的文件,如下图所示。
文件的后缀名都是.cshtml。这是什么文件呢?顾名思义,cshtml = cs + html,就是一个包含C Sharp(C#)代码的HTML文件。
既然文件包含原本HTML文件里的客户端代码和C#这样的服务器端代码,我们就得想个办法区分这两种代码。这里我们就需要Razor。
Razor是什么?一个视图引擎?期待哪位专家可以给我一个高大上的定义。
在我看来,Razor就是区分服务器端代码和其它代码的一种标记语言。
二、Razor注释
为了更好的观察运行结果,这里我们禁用掉模板。打开Views文件夹下的_ViewStart.cshtml文件。注释掉其中所有代码,如下图所示。
@*@{
Layout = "~/Views/Shared/_Layout.cshtml";
}*@
从上面可以看出cshtml文件中的多行注释就是在第一行开头写@*然后最后一行结尾写*@。
Razor的单行注释也差不多这种形式,在行首写@*,行尾写*@,如下所示。
@* A one line code comment *@
三、Razor的三种基本形式
Razor通过三种标记方式来确定指定区域的代码是服务器端代码:
- 行内(Inline)标记
- 单行(Single Line)标记
- 多行(Multi-Line)标记
打开Views文件夹下的First文件夹里的Index.cshtml文件。写入如下代码。图中黄色部分就是Razor标记下的服务器端C#代码
<div>
<!--Single Line-->
@{ var name = "Slark";}
@{ Response.Write("Single Line : Name is" + name + "<br />");}
<!--Inline-->
Inline : Today is:@DateTime.Now.ToString("yyyy-MM-dd") <br />
Inline : Name is @name <br />
<!--Multi-Line-->
@{
var age = 25;
Response.Write("Multi-Line : Age is " + age + "<br />");
}
</div>
从上面代码中可以看出行内标记@后面可以紧跟一个已经被定义的变量或者有返回值的函数
单行标记中每一行其实就是包含了一个C#语句,用分号结尾。
多行标记就是包含了多行C#语句。
四、语句运行顺序
然后选择刚才编辑的Index.cshtml,点击菜单栏中的"在浏览器中查看",显示结果如下。
右键点击页面选择“查看源”,结果如下:
Single Line : Name isSlark
<br />
Multi-Line : Age is 25
<br />
<div>
<!--Single Line-->
<!--Inline-->
Inline : Today is:2014-12-13
<br />
Inline : Name is Slark
<br />
<!--Multi-Line-->
</div>
运行结果是不是和你想的不太一样呢。这个文件的执行顺序是这样的:
- 服务器在这个文件中逐行搜寻Razor标记中的C#代码,如果读到的是C#单行或多行代码,就执行它。执行后输出的结果就是上面代码中绿色的部分。如果搜寻到了行内代码,就把这一段代码替换成代码对应的值,对应上面代码中黄色部分。这样把这个文件处理一遍之后。
- 然后服务器会把文件中所有非Razor标记的代码写入要输出的文件,对应上面代码中蓝色和黄色部分。
五、keyword(){}特殊语法
在遇到如if、for、while等具有"keyword(){}"形式的C#代码结构时,Razor标记可以写成"@keyword(){}"这样的特殊形式。
这个不是强制性的,可以不用。下面给出两个例子作为对比。
注释掉Index.cshtml中现有的代码。添加如下代码:
@if (1 > 2)
{
Response.Write("1 > 2 <br />");
}
else
{
Response.Write("1 <= 2 <br />");
}
@for (int i = 0; i < 3; i++)
{
Response.Write(i + " <br />");
}
选择在浏览器·中查看,得到如下结果:
六、在Razor标记内写入文本
注释掉Index.cshtml原有代码,写入下面代码。
@{
var name1 = "Slark";
<p>var name2 = "Slark";</p>
@:var name3 = "Slark";<br />
<text>
var name4 = "Slark";<br />
var name5 = "Slark";
</text>
}
代码看起来是不是很奇怪?来看一下执行结果:
一般情况下,@{}中的代码只被当作C#代码运行。而上面代码中只有name1被当作C#代码处理而其他几行都被当作文本输出了。
之前的内容都是介绍怎么在html文件中嵌入服务器代码,现在来介绍怎么在服务器代码里嵌入html代码...
如上面代码中所示,一共三种方法:
- 在Razor标记的代码中如果有成对的html标记,则这个标记及其内容会被当作普通文本输出。如上面的 <p>var name2 = "Slark";</p>
- 在Razor标记的代码中如果有"@:",则其后的一行代码会被当作普通文本输出。如上面的 @:var name3 = "Slark";<br />
- 在Razor标记的代码中如果有<text>...</text>标记,则其内容会被当作普通文本输出。如上面的 <text> var name4 = "Slark";<br /> var name5 = "Slark"; </text>
您的推荐和留言是我继续更新的动力,谢谢。
上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework
下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用的更多相关文章
- ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework
一.创建Model MVC中的Model是用来给View提供显示数据的对象. 这里我们首先创建一个Model对象. 在解决方案资源管理器中右键点击Models文件夹,选择添加->类.添加一个名为 ...
- ASP.NET MVC 5 入门教程 (4) View和ViewBag
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html 上一节:ASP.NET MVC 5 入门教 ...
- MVC5+EF6入门教程——实现动态创建数据库与登录验证
详细步骤 创建文件夹,规划好项目目录 创建相关实体类 (Data Model) 创建 Database Context 创建Initializer, 使用EF初始化数据库,插入测试数据 实现数据库登录 ...
- View中的Razor使用
View中的Razor使用 上一节:ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework 源码下载:点我下载 一.Razor简介 在解决方案资源管理 ...
- ASP.NET MVC 5 入门教程 (3) 路由route
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-route.html 上一节:ASP.NET MVC 5 入门 ...
- MVC5 + EF6 入门完整教程二
从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...
- MVC5+EF6 入门完整教程12--灵活控制Action权限
大家久等了. 本篇专题主要讲述MVC中的权限方案. 权限控制是每个系统都必须解决的问题,也是园子里讨论最多的专题之一. 前面的系列文章中我们用到了 SysUser, SysRole, SysUserR ...
- MVC5 + EF6 入门完整教程1
https://www.cnblogs.com/miro/p/4030622.html 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定& ...
- MVC5 + EF6 入门完整教程(转载)--01
MVC5 + EF6 入门完整教程 第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定&qu ...
随机推荐
- Effective Java 51 Beware the performance of string concatenation
Using the string concatenation operator repeatedly to concatenate n strings requires time quadratic ...
- SQL 递归查询(根据指定的节点向上获取所有父节点,向下获取所有子节点)
--------------------01.向上查找所有父节点-----------------WITH TEMP AS (SELECT * FROM CO_Department WHERE ID= ...
- SQL Server同步复制问题排查方法
1.应用复制的命令时在订阅服务器上找不到该行 解决方法:用系统存储过程sp_browsereplcmds(返回分发数据库中存储的可读版本复制命令的结果集,并将其用作诊断工具. 此存储过程在分发服务器上 ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- windows 下安装nginx
1.首先去官网下载 nginxWindows版本,官网下载:http://nginx.org/en/download.html 选择最新版本,下载到软件包后,解压文件包到指定目录,例如我的目录是D:\ ...
- Hadoop,Vertica环境搭建
本打算使用mapr的虚拟机在里面进行开发,使用eclipse进行调试,它的问题是,有时候服务不能完全起来, 如jobtracker和tasktracker,cldb没有起来,重启服务有可能解决. 但另 ...
- [转]Try Cloud Messaging for Android
本文转自:https://developers.google.com/cloud-messaging/android/start
- HTML5秘籍读书笔记
1:基本雏形 <html><head> <meta charset="UTF-8"> <title></title>&l ...
- JS实现图片上传预览效果:方法一
<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...
- Codeforces Round #253 Div2 D.Andrey and Problem 概率+贪心
概率计算:P(某set) = 令: 和 现在考虑: 1.考虑某个集合,再加一个概率为Pi的朋友后能不能使总概率提高. 即: 由公式可知, 如果 S < 1,则delta > 0,则 ...