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

源码下载:点我下载

一、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

时间: 2024-08-06 18:04:11

ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用的相关文章

ASP.NET MVC5 + EF6 入门教程 (5) Model和Entity Framework

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC 5 入门教程 (4) View和ViewBag 源码下载:点我下载 一.创建Model MVC中的Model是用来给View提供显示数据的对象. 这里我们首先创建一个Model对象. 在解决方案资源管理器中右键点击Models文件夹,选择添加->类.添加一个名为Employee.cs的Model类

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 入门教程 (3) 路由Route 源码下载:点我下载 View(视图)用来显示被controller处理好的数据.本节我们就来看看如何通过controller访问一个View页面,如何从controller向View传值. 打开Controllers文件夹下的FirstController.cs,我们把其

ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这样的数据库访问技术之外,一个简洁.美观.大方的UI框架也是必不可少的. 话不多说,有请今天的主角登场!! 看看它的自我介绍,是不是很屌.没错,这个介绍一点都不夸

MVC5+EF6 入门完整教程九

前一阵子临时有事,这篇文章发布间隔比较长,我们先回顾下之前的内容,每篇文章用一句话总结重点. 文章一 MVC核心概念简介,一个基本MVC项目结构 文章二 通过开发一个最基本的登录界面,介绍了如何从Controller中获取表单数据 文章三 EF的整个开发过程 文章四 EF基本的CRUD和常用的HtmlHelper 文章五 使用布局页(模板页)改造UI 文章六 分部视图(Partial View) 文章七 排序过滤分页 文章八 不丢失数据进行数据库结构升级 以上如果有不清楚的可以再回去看一下. 文

MVC5+EF6 入门完整教程

MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表数据加载@20150212 MVC5+EF6 入门完整教程8 :不丢失数据进行数据库结构升级 @20141215 MVC5+EF6 入门完整教程7 :排序过滤分页 @20141201 MVC5+EF6 入门完整教程6 :分部视图(Partial View) @20141117 MVC5+EF6 入门完整教程

MVC5+EF6 入门完整教程十

本篇是第一阶段的完结篇. 学完这篇后,你应该可以利用MVC进行完整项目的开发了. 本篇主要讲述多表关联数据的更新,以及如何使用原生SQL. 文章提纲 多表关联数据更新 如何使用原生SQL 总结 多表关联数据更新 我们在第四篇文章已经讲过数据的更新了,不过那个是针对单表结构的更新. 这次我们讲下使用EF进行关联数据的更新. 关联数据更新有两种情况: 1.一对多 2.多对多 第一种情况关联表有主外键关联,只要简单的更新外键值就可以了(相当于更新单表),我们主要讲解第二种多对多的情况. 使用之前很熟悉

MVC5+EF6 入门完整教程 总目录

MVC5 + EF6 入门完整教程1 MVC5 + EF6 入门完整教程二 MVC5 + EF6 完整入门教程三 MVC5+EF6 入门完整教程四 MVC5+EF6 入门完整教程五 MVC5+EF6 入门完整教程六 MVC5+EF6 入门完整教程七 MVC5+EF6 入门完整教程八 MVC5+EF6 入门完整教程九

MVC5+EF6 完整教程17--升级到EFCore2.0(转)

MVC5+EF6 完整教程17--升级到EFCore2.0 2017年08月22日 14:48:12 linux12a 阅读数:2814 EF Core 2.0上周已经发布了,我们也升级到core 文章内容基于vs2017,请大家先安装好vs2017(15.3). 本篇文章主要讲下差异点,跟之前一样的就不再重复了. 文章目录(差异点): 一.新建项目, EF配置/使用 过程的变化 二.身份验证方式的变化(达到类似于原form认证效果) 三.使用原生SQL方式变化 四.读取config过程(默认取

ASP.NET MVC 5 入门教程 (3) 路由route

文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-route.html 上一节:ASP.NET MVC 5 入门教程 (2) 控制器Controller 源码下载:点我下载 上一节我们讲了如何创建一个控制器,本节我们来讨论如何通过路由来访问控制器及其Action. 那么问题来了,怎么写url能访问到我想要访问的控制器呢? 要想正确访问路由器,就得知道路由规则.它被写在解决方案的App_Start文件夹下的Ro