ASP.NET Core MVC 从入门到精通之Razor语法

简介: ASP.NET Core MVC 从入门到精通之Razor语法

随着技术的发展,ASP.NET Core MVC也推出了好长时间,经过不断的版本更新迭代,已经越来越完善,本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容,适用于初学者,在校毕业生,或其他想从事ASP.NET Core MVC 系统开发的人员。 经过前几篇文章的讲解,初步了解ASP.NET Core MVC项目创建,启动运行,以及命名约定,创建控制器,视图,模型,接收参数,传递数据,路由,页面布局,wwwroot和客户端库等内容,今天继续讲解ASP.NET Core MVC 中Razor语法等相关内容,仅供学习分享使用。

Razor视图

在ASP.NET Core MVC项目中,默认创建的视图,都是以cshtml为后缀的Razor视图。

基于 Razor 的视图模板:

  • 具有 .cshtml 文件扩展名。
  • 提供一种巧妙的方法来使用 C# 创建 HTML 输出。

添加Razor视图

在项目中添加视图,可以通过在控制器中的Action上右键进行添加对应视图,也可以通过在Views中创建目录,然后目录上右键添加视图,如下所示:

打开添加视图对话框,选择Razor视图,点击【添加】按钮,如下所示:

输入视图名称,如Index,点击【添加】按钮,模板可根据具体需要是否添加,如下所示:

经过以上步骤后,即可添加视图成功,如下所示:

默认视图效果如下所示:

Razor介绍

Razor 是一种标记语法,用于将基于 .NET 的代码嵌入网页中。 Razor 语法由 Razor 标记、C# 和 HTML 组成。 包含 Razor 的文件通常具有 .cshtml 文件扩展名。 从 Razor 标记呈现 HTML 与从 HTML 文件呈现 HTML 没有什么不同。

Razor语法

Razor 支持 C#,并使用 @ 符号从 HTML 转换为 C#。 Razor 计算 C# 表达式,并将它们呈现在 HTML 输出中。当符号 @ 后跟 Razor 保留关键字时,它将转换为 Razor特定于 的标记。 否则会转换为纯 HTML。不过凡事总有特例,如包含在email中的@符号将不会被当成转换字符,而是直接显示。

<a href="mailto:Alan.hsiang@qq.com">Alan.hsiang@qq.com</a>

隐式Razor表达式

隐式 Razor 表达式以 @ 开头,后跟 C# 代码。

1. <p>今天是:@DateTime.Now</p>
2. <p>昨天是:@DateTime.Now.AddDays(-1)</p>

隐式表达式不能包含空格,但 C# await 关键字除外。 如果该 C# 语句具有明确的结束标记,则可以混用空格:

1. @{
2.     ViewData["Title"] = "Index";
3. 
4.     async Task<string> DoSomething(string left,string right)
5.     {
6.         return left + right;
7. 
8.     }
9. }
10. 
11. 
12. <h1>Index</h1>
13. <p>@await DoSomething("hello", "world")</p>

隐式表达式不能包含 C# 泛型,因为括号 (<>) 内的字符会被解释为 HTML 标记。 以下代码无效:

1. @{
2.     ViewData["Title"] = "Index";
3. 
4.     string? GenericMethod<T>(T t)
5.     {
6.         return t?.ToString();
7.     }
8. }
9. 
10. 
11. <h1>Index</h1>
12. <!--不能使用泛型-->
13. <p>@GenericMethod<int>(0)</p>

注意:泛型方法调用必须包装在 显式 Razor 表达式 或 Razor 代码块中。

显式Razor表达式

显式 Razor 表达式由 @ 符号和一对小括号组成,将计算 @() 括号中的所有内容,并将其呈现到输出中。 若要进行一些计算,可使用以下 Razor 标记:

1. @{
2.     ViewData["Title"] = "Index";
3. 
4.     int a=1,b=2,c=3,d=4;
5. }
6. 
7. 
8. <h1>Index</h1>
9. <!--显式Razor表达式-->
10. <p>@(a+b+c+d)</p>
11. <!--隐式Razor表达式-->
12. <p>@a+b+c+d</p>

在上述例子中,显示Razor表达式和隐式Razor表达式在页面显示的效果是不同的,如下所示:

另外在隐式Razor表达式中,不支持泛型,在显示Razor表达式中是支持泛型的。如下所示:

<p>@(GenericMethod<int>(10))</p>

表达式编码

通过Razor表达式进行输出时,有时并不能达到想要效果,如下所示:

1. <!--输出原生标签并进行转义-->
2. <div>@("<span>Hello World</span>")</div>
3. <!--输入标签中的内容-->
4. <div>@Html.Raw("<span>Hello World</span>")</div>

在页面上输出结果如下所示:

Razor代码块

Razor 代码块以 @ 开始,并括在 {}代码块内的 C# 代码不会呈现,这点与表达式不同。 一个视图中的代码块和表达式共享相同的作用域并按顺序进行定义:

1. @{
2.     var quote = "我是公子小六";
3. }
4. 
5. <p>@quote</p>
6. 
7. @{
8.     quote = "小六公子是我";
9. }
10. 
11. <p>@quote</p>

在页面输出 如下所示:

隐式转换

代码块中的默认语言是 C#,但 Razor 页面可以转换回 HTML:

1. @{
2.     var name = "我是公子小六";
3. <p>Now in HTML, was in C# @name</p>
4. }

显式行转换

要在代码块内以 HTML 形式呈现整个行的其余内容,请使用 @: 语法:

1. @for (var i = 0; i < students.Length; i++)
2. {
3.     var student = students[i];
4.     @:student: @student.Name
5. }

如果代码中没有 @:,会生成 Razor 运行时错误。

Razor 文件中多余的 @ 字符可能会导致代码块中后面的语句发生编译器错误。 这些额外的 @ 编译器错误:

  • 可能难以理解,因为实际错误发生在报告的错误之前。
  • 在将多个隐式表达式和显式表达式合并到单个代码块后很常见。

控制结构

控制结构是对代码块的扩展。 代码块的各个方面(转换为标记、内联 C#)同样适用于以下结构:

条件控制语句

条件 @if, else if, else,如下所示:

1. @{
2.     int value = 10;
3. }
4. 
5. @if (value % 2 == 0)
6. {
7. <p>The value was even.</p>
8. }
9. else if (value >= 1337)
10. {
11. <p>The value is large.</p>
12. }
13. else
14. {
15. <p>The value is odd and small.</p>
16. }

以下标记展示如何使用 switch 语句:

1. @switch (value)
2. {
3.     case 1:
4. <p>The value is 1!</p>
5.         break;
6.     case 1337:
7. <p>Your number is 1337!</p>
8.         break;
9.     default:
10. <p>Your number wasn't 1 or 1337.</p>
11.         break;
12. }

循环控制

循环 @for, @foreach, @while, and @do while

@for循环

1. @{
2.     var students = new Student[]
3.     {
4.         new Student(){Id=1,Name="公"},
5.         new Student(){Id=2,Name="子"},
6.         new Student(){Id=3,Name="小"},
7.         new Student(){Id=4,Name="六"},
8.     };
9. }
10. @for (var i = 0; i < students.Length; i++)
11. {
12.     var student = students[i];
13. <div>
14. <span>Id: @student.Id</span>
15. <span>Name: @student.Name</span>
16. </div>
17. }

@foreach循环

1. @foreach (var student in students)
2. {
3. <div>
4. <span>Id: @student.Id</span>
5. <span>Name: @student.Name</span>
6. </div>
7. }

@while循环

1. @{ var i = 0; }
2. @while (i < students.Length)
3. {
4.     var student = students[i];
5. <div>
6. <span>Id: @student.Id</span>
7. <span>Name: @student.Name</span>
8. </div>
9.     i++;
10. }

@do while循环

1. @{ var i = 0; }
2. @do
3. {
4.     var student = students[i];
5. <div>
6. <span>Id: @student.Id</span>
7. <span>Name: @student.Name</span>
8. </div>
9. 
10.     i++;
11. } while (i < students.Length);

以上4种循环方式实现的效果都是一样的,如下所示:

异常捕获

@try, catch, finally,异常处理与 C# 类似:

1. @try
2. {
3.     throw new InvalidOperationException("无效操作.");
4. }
5. catch (Exception ex)
6. {
7. <p>异常信息: @ex.Message</p>
8. }
9. finally
10. {
11. <p>finally块.</p>
12. }

在页面上输出如下内容:

Razor注释

Razor 支持 C# 和 HTML 注释:

1. @{
2.     /* C# comment */
3.     // Another C# comment
4. }
5. <!-- HTML comment -->
6. @*
7.     @{
8.         /* C# comment */
9.         // Another C# comment
10.     }
11. <!-- HTML comment -->
12. *@

在呈现网页之前,服务器会删除 Razor 注释。 Razor 使用 @* *@ 来分隔注释。 以上代码第3段已被注释禁止,因此服务器不呈现任何标记。

Razor保留关键字

Razor 关键字

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper(ASP.NET Core 当前不支持)

Razor 关键字使用 @(Razor Keyword) 进行转义(例如,@(functions))。

C# Razor 关键字

  • do while
  • default
  • forforeach
  • ifelse
  • lock
  • switch case
  • trycatchfinally
  • using

C# Razor 关键字必须使用 @(@C# Razor Keyword) 进行双转义(例如,@(@case))。 第一个 @ 对 Razor 分析程序转义。 第二个 @ 对 C# 分析器转义。

Razor 未使用的保留关键字

  • class

以上就是ASP.NET Core MVC 从入门到精通之Razor语法简介的主要内容,关于其他Razor语法内容,可参考文档:

参考文档:https://learn.microsoft.com/zh-cn/aspnet/core/mvc/views/razor?view=aspnetcore-7.0

相关文章
|
2月前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9,此版本与 .NET 8 的 OData 库保持一致,改进了数据编码以符合 OData 规范,并放弃了对旧版 .NET Framework 的支持,仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`,优化了内存使用和序列化速度。
|
20天前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案,其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型,实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法,展示了 gRPC 在 C# 中的基本使用方法。
30 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
|
2天前
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入(DI)注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入(DI)注册过程的开源库,支持自动扫描和注册服务。通过简单的配置,开发者可以轻松地从指定程序集中筛选、注册服务,并设置其生命周期,同时支持服务装饰等高级功能。适用于大型项目,提高代码的可维护性和简洁性。仓库地址:&lt;https://github.com/khellang/Scrutor&gt;
16 5
|
10天前
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成:从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL,包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时,文章还探讨了常见问题及其解决方法,如处理复杂查询、错误处理、性能优化和实现认证授权等,旨在帮助开发者构建灵活且高效的API。
19 3
|
12天前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码,支持 C# 和 Visual Basic。Razor 语法简洁易学,类似于 ASP 和 PHP。例如,在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
|
2月前
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
mcr.microsoft.com/dotnet/core/aspnet:2.1安装libgdiplus
32 1
|
3月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器,可在操作方法执行前后运行代码,适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法,可以统一处理日志、验证及异常。创建并注册自定义筛选器类,能提升代码的可维护性和复用性。
|
3月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core,一个轻量级、开源的跨平台框架,专为构建高性能Web应用设计。通过简单步骤,你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题,并提供了实用示例代码以助于理解与避免错误,帮助开发者更好地掌握ASP.NET Core的核心概念。
109 3
|
2月前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
45 7