ASP.NET Mvc Razor视图语法

在ASP.NET MVC中有两套模版引擎,一套是ASPX,一套是Razor,从事过WebForms开发的朋友们,对于ASPX模版已经很熟悉了,下面我说一下我所熟悉的Razor模版引擎的一些语法,供大家参考:#

在ASPX中我们使用 <% %>在里面编写C#代码

在Razor中我们将会使用@符号这个核心语法,给程序员提供了大量的便利,废话不多说，我一一举例:

1.首先如何定义变量,我们在 .cshtml 这个视图上，定义C#变量的话,我们可以先定义一个C#代码块,在这个代码块里编写C#语法

定义一个C#代码块: 

?
1
2
3
4
5
6
7
@｛
 
　　<strong><font color="#ff0000">//定义一个变量</font>
</strong>
　　string name="我是一个字符串";
 
｝
?
1
2
3
<font color="#ff0000"><strong>//输出这个字符串</strong></font>
 
@name

2.假如我们现在有一个需求,让我们输出10个<span>我爱北京天安门</span>,那么肯定要使用for循环了

?
2
3
4
5
6
<font color="#ff0000" size="2"><strong>@for(var i=0;i<10;i++){
 
<span>我爱北京天安门</span>
 
}</strong></font>

有同学可以有疑问了,为什么我们在C#代码段里面可以直接写html标签,ASPX里我们必须将C#代码放在<%%>中,因为Razor引擎有一个非常强大的功能,那就是自动识别<>(尖括号),当在Razor中遇到<>的时候,Razor会自动识别这里是Html语法，看到@符号就知道开始编写C#代码了。

那么我们就有疑问了,Razor视图是如何识别的呢?#

在ASPX中,我们的 .aspx页面和 .aspx.cs页面的,他们编译以后会编译成两个类,并且 .aspx 继承于.aspx.cs#

在.cshtml在编译后也会编译成一个类,那么我们如何能看到这个类呢?那就要借助我们的神器 .NET Reflector 反编译。#

?
2
3
<font color="#ff0000"><strong>//我们随便找一个 .cshtml 输出这一段话,表示输出视图程序集所在的路径</strong></font>
@this.GetType().Assembly.Location

会在页面上输出 C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\vs\fc705515\4aff2ded\App_Web_ju12f1hu.dll  类似的路径,那么我们可以去找到此dll文件，将其拖入 .NET Reflector中。

1

我们就可以看到了这个.cshtml页面编译成的类_Page_Views_Employee_Index_cshtml，这个类继承WebViewPage<object>。这个类有一个重写父类的Execute方法,从方法中我们很容易看出一些html标签:例如<!DOCTYPE html> 等等,这个方法将里面的html标签内容拼接,C#代码在此方法定义并执行,再将输出的内容拼接起来。#

3.Razor视图引擎在解析C#语法块里的标签时,会去自动查找结束标签,如果没有结束标签,则Razor视图引擎会报错,除非是单标签,例如: <img />  自定义的<beijing/>#

4.Razor视图引擎,在编译页面类时,如果遇到了@符号就会认为是C#语法,如果此C#语句块中包含了<>那么就会自动当字符串处理#

5.现在我有一个需求就是我想循环输出10条,没有任何标签修饰的 我爱北京天安门,那么这个怎么做？#

?
2
3
4
5
6
7
8
9
10
11
12
13
14
//第一种方式 
 @{
        var str = string.Empty;
        for (var i = 0; i < 10;i++){
            str += "我爱北京天安门";
        }  
     }
@str
 
//第二种方式
@for (var k = 0; k < 10; k++) {
        <text>我爱北京天安门</text>
    }

第一种方式给人感觉比较繁琐,因为Razor视图引擎能识别<>,如果你直接在@{}代码里书写 #

我爱北京天安门 会报错的,因为这不是C#语法,如果你用<span></span>修饰的话,可以实现，但是我们查看网页源代码的时候，可以看到这个就不是我们想要的结果了。所以我们引入了第二种方式,<text></text>标签,这个是Razor自带的标签,在这个标签里书写文字可以原样输出到浏览器。#

6.前面我们提到过，Razor可以识别<>,如果我们想要在html中输出C#数据的话怎么办#

?
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//控制器
 public ActionResult check()
        {
            Person p = new Person() { Name="aa" };
            return View(p);
        }
//视图
@for(var i=0;i<10;i++){
     //我们在控制器传递数据到视图上,如果下面这种情况输出的话
 
     <b>asdsad@Model.Name~~~~~</b> 
 
}
 
//输出结果:asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name asdsad@Model.Name
显然这不是我们想要的结果
 
<font color="#ff0000"><strong>那么我们如果更正呢?
我们需要在@符号前加一个空格,这样Razor就是识别了</strong></font>
<b>asdsad @Model.Name~~~~~</b>

 

    //由此我们可以得到结论:

如果想在html中输出C#语句的话,@符号钱必须要加空格，否则将@符号当成字符串处理

?
2
3
4
5
6
7
8
9
10
11
12
13
14
//控制器
public ActionResult check()
        {
            Person p = new Person() { Name="aa" };
            ViewBag.CName = "cc";
            return View(p);
        }
//视图
我要输出一个 cc.CName呢?
<font color="#ff0000" size="3"><strong>//这样输出,编译器会报错,编译器会解析为cc有一个CName属性,但是显然cc中没有这个属性</strong></font>
@ViewBag.CName.CName
//那么我们可以通过
@(ViewBag.CName).CName

 

7.我现在用C#定义一个html标签,然后输出到浏览器上#

//第一种方式

?
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@{
   string str="<input type='text' value=''>":
}
@str
//输出结果
<input type='text' value=''>
//这样输出的话,我们查看网页源代码会发现,我们书写的html的input标签的<>会被转义。显然不是我们想要的结果,如果我们想输出一个完全的input 标签呢
 
//第一种方式
使用@Html.Raw(str),输出不转义的html
 
//第二种方式
使用HtmlString输出不转义的html
@{
  HtmlString htmlRaw=new HtmlString("<input type='button' value='按钮'>");
}
@htmlRaw
//第三种方式
@{
  MvcHtmlString mvcStr=new MvcHtmlString("<p>我不会被转义</p>");
}
@mvcStr
//第四种方式
//使用MvcHtmlString 静态方法 Create输出不转义的html
@{
    var _str=MvcHtmlString.Create("<p>我是方式二</p>");
}
@_str

今天先介绍这些,我先此说不一定完全正确,欢迎批评指正。#
posted @   清澈的大海  阅读(5036)  评论(1)    收藏  举报
编辑推荐：
· 领域驱动设计实战：聚合根设计与领域模型实现
· 突破Excel百万数据导出瓶颈：全链路优化实战指南
· 如何把ASP.NET Core WebApi打造成Mcp Server
· Linux系列：如何用perf跟踪.NET程序的mmap泄露
· 日常问题排查-空闲一段时间再请求就超时
阅读排行：
· .NET周刊【5月第1期 2025-05-04】
· Python 3.14 新特性盘点，更新了些什么？
· 聊聊 ruoyi-vue ,ruoyi-vue-plus ,ruoyi-vue-pro 谁才是真正的
· 物联网之对接MQTT最佳实践
· Redis 连接池耗尽的一次异常定位
点击右上角即可分享
微信分享提示

目录

目录

X
+

"感谢您的支持，我会继续努力"

微信支付
支付宝支付