ASP.NET Core MVC 中 Razor 的入门与进阶教程

ASP.NET Core MVC 中 Razor 的入门与进阶教程

在当今数字化时代,构建高效、动态的 Web 应用程序已成为开发者的首要任务。ASP.NET Core MVC 作为微软推出的一款强大的 Web 开发框架,凭借其高性能、可扩展性和灵活性,受到了广大开发者的青睐。而 Razor 作为 ASP.NET Core MVC 中的核心技术之一,更是为开发动态 Web 页面提供了极大的便利。

Razor 语法简洁明了,能够将 HTML 与 C# 代码无缝结合,让开发者可以轻松地在视图中嵌入服务器端代码,实现动态内容的生成。无论是简单的数据展示,还是复杂的用户交互,Razor 都能轻松应对。同时,Razor 提供了丰富的功能,如分部视图、页面布局、数据绑定、表单处理等,极大地提高了开发效率和代码复用性。

本教程将从基础语法讲起,逐步深入到高级功能,通过大量实例和实战案例,带你全面掌握 ASP.NET Core MVC 中 Razor 的使用方法。无论你是初学者,还是有一定开发经验的开发者,都能从本教程中获得有价值的知识和技能,帮助你更好地利用 Razor 构建出功能强大、性能卓越的 Web 应用程序。让我们一起踏上这段精彩的开发之旅吧!

1. Razor简介与基础语法

1.1 Razor是什么

Razor是ASP.NET Core MVC中用于构建动态Web页面的语法,它将HTML与C#代码相结合,使开发者能够轻松地创建复杂的Web应用程序。Razor语法简洁明了,易于学习和使用,能够显著提高开发效率。它允许开发者在HTML中嵌入C#代码,从而实现动态内容的生成和页面的交互功能。例如,开发者可以使用Razor语法来循环显示数据集合、根据用户输入动态生成HTML元素等。

1.2 基础语法示例

在Razor中,C#代码可以使用@符号嵌入到HTML中。以下是一些基础语法示例:

嵌入C#代码:使用@符号可以嵌入简单的C#表达式。例如:

当前时间是:@DateTime.Now

这段代码会在页面上显示当前的时间。

代码块:如果需要嵌入多行C#代码,可以使用@{ ... }代码块。例如:

@{

var message = "欢迎来到我的网站!";

}

@message

这段代码会在页面上显示“欢迎来到我的网站!”。

条件语句:可以使用C#的条件语句来动态生成HTML内容。例如:

@{

var isUserLoggedIn = true;

}

@if (isUserLoggedIn)

{

欢迎回来,用户!

}

else

{

请登录。

}

这段代码会根据用户是否登录来显示不同的消息。

循环语句:可以使用循环语句来动态生成HTML元素。例如:

@{

var items = new List { "苹果", "香蕉", "橙子" };

}

    @foreach (var item in items)

    {

  • @item
  • }

这段代码会生成一个包含三个水果名称的无序列表。

通过这些基础语法,开发者可以轻松地在ASP.NET Core MVC中创建动态的Web页面,实现丰富的功能和交互效果。

2. Razor视图中的C#代码使用

2.1 嵌入C#代码

在Razor视图中嵌入C#代码是实现动态内容生成的关键。通过@符号,开发者可以将C#代码与HTML无缝结合。除了前面提到的基础语法,还可以嵌入更复杂的表达式和方法调用。例如:

服务器的运行时间是:@(DateTime.Now - new DateTime(2024, 1, 1))

这段代码会计算并显示服务器从2024年1月1日到当前时间的运行时长。Razor支持所有C#语法,这使得开发者可以充分利用C#的强大功能来处理复杂的逻辑和数据操作。

在实际开发中,嵌入C#代码时需要注意代码的可读性和性能。过多的嵌入代码可能会使视图文件变得复杂难懂,因此建议将复杂的逻辑封装到模型或视图模型中,然后在视图中通过简单的表达式调用它们。例如:

@model MyViewModel

欢迎,@Model.UserName!您的账户余额为:@Model.Balance

这种方式不仅使视图更加简洁,还便于维护和扩展。

2.2 控制结构使用

Razor支持C#中的所有控制结构,如if、else、switch、for、foreach等。这些控制结构可以用来根据不同的条件动态生成HTML内容,从而实现页面的交互功能。

条件语句

条件语句是Razor中常用的控制结构之一。通过if、else和else if语句,可以根据不同的条件显示不同的HTML内容。例如:

@{

var userRole = "admin";

}

@if (userRole == "admin")

{

您是管理员,可以访问所有功能。

}

else if (userRole == "editor")

{

您是编辑,可以编辑内容。

}

else

{

您是普通用户,只能查看内容。

}

这段代码会根据用户的角色显示不同的消息。在实际开发中,条件语句可以用于实现用户权限控制、内容展示切换等功能。

循环语句

循环语句用于重复生成HTML元素。foreach是最常用的循环语句,适用于遍历集合数据。例如:

@{

var users = new List { "Alice", "Bob", "Charlie" };

}

    @foreach (var user in users)

    {

  • @user
  • }

这段代码会生成一个包含用户名称的无序列表。foreach循环可以遍历任何实现了IEnumerable接口的集合,如List、Array等。

除了foreach,for循环也可以在Razor中使用。例如:

@{

var count = 5;

}

    @for (int i = 0; i < count; i++)

    {

  • 项目@(i + 1)
  • }

这段代码会生成一个包含5个项目的无序列表。for循环在需要根据索引进行操作时非常有用。

切换语句

switch语句在Razor中也可以使用,用于根据不同的条件选择不同的分支。例如:

@{

var status = "active";

}

状态:@(status)

@switch (status)

{

case "active":

当前状态是激活状态。

break;

case "inactive":

当前状态是非激活状态。

break;

default:

未知状态。

break;

}

这段代码会根据状态值显示不同的消息。switch语句在处理多个固定条件时比if语句更清晰,代码也更易于维护。

通过合理使用控制结构,开发者可以在Razor视图中实现复杂的逻辑和动态内容生成,从而提升Web应用程序的交互性和用户体验。

3. Razor页面布局与分部视图

3.1 页面布局文件_Layout.cshtml

在ASP.NET Core MVC中,页面布局文件_Layout.cshtml是实现页面一致性布局的关键组件。它允许开发者定义一个共享的布局模板,所有视图都可以基于这个模板进行渲染,从而确保整个网站的页面风格和结构保持一致。

布局文件的定义

布局文件通常位于Views/Shared目录下,文件名为_Layout.cshtml。在布局文件中,可以使用@RenderBody()方法来指定内容视图的渲染位置。例如:

我的网站

欢迎来到我的网站

@RenderBody()

版权所有 © 2025

在这个例子中,@RenderBody()方法会将具体的视图内容插入到

标签中。这样,所有使用该布局的页面都会共享相同的头部和尾部,而只有
部分的内容会根据具体的视图而变化。

设置默认布局

在视图中,可以通过@Layout指令来指定使用哪个布局文件。如果省略该指令,则默认使用_Layout.cshtml。例如:

@{

Layout = "~/Views/Shared/_Layout.cshtml";

}

这是具体页面的内容。

通过这种方式,开发者可以灵活地为不同的视图指定不同的布局文件,或者在某些情况下禁用布局(将Layout设置为null)。

布局中的占位符

除了@RenderBody(),布局文件还可以使用@RenderSection()方法来定义可选的占位符。这些占位符可以在具体的视图中被填充,从而实现更灵活的布局定制。例如:

我的网站

@RenderSection("Styles", required: false)

欢迎来到我的网站

@RenderBody()

版权所有 © 2025

在具体的视图中,可以通过@section指令来填充这些占位符。例如:

@section Styles {

}

这是具体页面的内容。

这样,mystyle.css文件就会被插入到布局文件的部分,从而实现页面特定的样式定制。

3.2 分部视图的创建与使用

分部视图是ASP.NET Core MVC中用于实现代码复用的重要工具。它允许开发者将HTML代码片段提取到单独的文件中,然后在多个视图中重复使用这些片段。分部视图通常用于实现导航栏、侧边栏、页脚等公共组件。

创建分部视图

分部视图通常位于Views/Shared目录下,文件名以.cshtml结尾。例如,创建一个名为_Header.cshtml的分部视图:

欢迎来到我的网站

这个分部视图定义了一个简单的头部组件,可以在多个页面中重复使用。

使用分部视图

在视图中,可以通过@Html.Partial()方法或@await Html.PartialAsync()方法来渲染分部视图。例如:

@await Html.PartialAsync("~/Views/Shared/_Header.cshtml")

或者使用@partial标签:

@partial "~/Views/Shared/_Header.cshtml"

这些方法会将分部视图的内容插入到当前视图中,从而实现代码复用。

传递数据到分部视图

分部视图可以接收数据作为参数,从而实现更灵活的复用。例如,修改_Header.cshtml分部视图,使其能够接收标题作为参数:

@model string

@Model

在主视图中,可以通过传递数据来渲染分部视图:

@await Html.PartialAsync("~/Views/Shared/_Header.cshtml", "欢迎来到我的网站")

这样,分部视图会显示传递的标题内容。

使用视图组件

视图组件是分部视图的增强版本,它允许开发者将复杂的逻辑封装到一个可复用的组件中。视图组件通常用于实现需要执行复杂逻辑的公共组件,如用户登录状态显示、购物车等。

视图组件由一个类和一个视图文件组成。例如,创建一个名为UserLogin的视图组件:

public class UserLoginViewComponent : ViewComponent

{

public IViewComponentResult Invoke()

{

var isLoggedIn = true; // 示例逻辑,实际中可能从Session或Cookie获取

return View(isLoggedIn);

}

}

然后创建对应的视图文件Views/Shared/Components/UserLogin/Default.cshtml:

@model bool

@if (Model)

{

欢迎回来,用户!

}

else

{

请登录。

}

在主视图中,可以通过@await Component.InvokeAsync()方法来渲染视图组件:

@await Component.InvokeAsync("UserLogin")

这种方式不仅实现了代码复用,还封装了复杂的逻辑,使主视图更加简洁。

通过合理使用页面布局和分部视图,开发者可以构建出结构清晰、易于维护的ASP.NET Core MVC应用程序,同时提高开发效率和用户体验。

4. 数据绑定与表单处理

4.1 数据绑定方式

在ASP.NET Core MVC中,数据绑定是将模型数据与视图进行交互的关键机制,Razor视图通过数据绑定将用户输入的数据传递给控制器,同时也可以将模型数据展示在视图中。以下是几种常见的数据绑定方式:

强类型视图数据绑定:通过在视图文件顶部指定@model指令来声明视图所使用的模型类型。例如:

@model MyModel

用户名:@Model.UserName

这种方式使得视图可以直接访问模型的属性,代码更加清晰且易于维护。在控制器中,只需要将模型实例传递给视图即可:

public IActionResult Index()

{

var model = new MyModel { UserName = "Alice" };

return View(model);

}

视图数据(ViewData):ViewData是一个动态属性,它允许控制器向视图传递任意类型的数据。ViewData是一个字典类型,可以使用字符串键来存储和检索数据。例如:

public IActionResult Index()

{

ViewData["Message"] = "欢迎来到我的网站!";

return View();

}

在视图中,可以通过ViewData["Message"]来访问数据:

@ViewData["Message"]

视图包(ViewBag):ViewBag是ViewData的一个动态包装器,它提供了一种更简洁的方式来传递数据。ViewBag的属性名称即为键名。例如:

public IActionResult Index()

{

ViewBag.Message = "欢迎来到我的网站!";

return View();

}

在视图中,可以直接访问ViewBag.Message:

@ViewBag.Message

临时数据(TempData):TempData用于在重定向时传递数据,它只在请求之间保持一次数据。这在处理表单提交后重定向到另一个页面时非常有用。例如:

public IActionResult SubmitForm()

{

TempData["Message"] = "表单提交成功!";

return RedirectToAction("Result");

}

public IActionResult Result()

{

return View();

}

在Result视图中,可以通过TempData["Message"]来访问数据:

@TempData["Message"]

4.2 表单数据收集

表单是Web应用程序中收集用户输入的主要方式之一。在ASP.NET Core MVC中,表单数据可以通过

标签和asp-for标签助手来收集,并通过控制器的[HttpPost]方法进行处理。以下是表单数据收集的详细步骤:

创建表单视图:在视图中,使用标签来定义表单,并使用asp-for标签助手来绑定模型属性。例如:



在这个例子中,asp-action指定了表单提交的目标控制器方法,asp-for用于绑定模型的属性,从而实现自动填充和验证。

处理表单提交:在控制器中,通过[HttpPost]方法来处理表单提交的数据。例如:

[HttpPost]

public IActionResult SubmitForm(MyModel model)

{

if (ModelState.IsValid)

{

// 处理表单数据

return RedirectToAction("Result");

}

return View(model);

}

在这个例子中,model参数会自动绑定表单提交的数据。ModelState.IsValid用于验证模型数据是否有效,如果验证通过,则可以处理表单数据。

模型验证:ASP.NET Core MVC提供了强大的模型验证机制,可以在模型类中使用数据注解来定义验证规则。例如:

public class MyModel

{

[Required(ErrorMessage = "用户名不能为空")]

public string UserName { get; set; }

[Required(ErrorMessage = "邮箱不能为空")]

[EmailAddress(ErrorMessage = "邮箱格式不正确")]

public string Email { get; set; }

}

在视图中,可以使用来显示验证错误信息:



通过合理使用数据绑定和表单处理机制,开发者可以轻松地在ASP.NET Core MVC中实现动态数据交互和用户输入收集,从而构建出功能强大的Web应用程序。

5. Tag Helpers的使用

5.1 Tag Helpers概述

Tag Helpers 是 ASP.NET Core MVC 中用于增强 HTML 标签功能的工具,它们允许开发者使用类似 HTML 的语法来实现复杂的功能,而无需编写大量的 JavaScript 或者服务器端代码。Tag Helpers 的主要优势在于它们能够将服务器端逻辑与 HTML 标签紧密结合,从而提高代码的可读性和可维护性,同时减少视图模板中的代码量。

提高开发效率:通过使用 Tag Helpers,开发者可以快速实现诸如表单验证、路由生成、资源链接等功能,而无需手动编写复杂的代码。

增强代码可读性:Tag Helpers 使用 HTML 样式的语法,使得视图模板更加直观易懂,即使是非开发者也能轻松理解代码的意图。

减少 JavaScript 的使用:许多常见的功能可以通过 Tag Helpers 在服务器端实现,从而减少了对客户端 JavaScript 的依赖,提高了应用程序的性能和安全性。

易于扩展和自定义:ASP.NET Core 提供了丰富的内置 Tag Helpers,同时开发者还可以根据需要创建自定义的 Tag Helpers,以满足特定的业务需求。

5.2 常用 Tag Helpers 示例

表单相关 Tag Helpers

asp-action 和 asp-controller:用于指定表单提交的目标控制器和操作方法。例如:

这段代码会生成一个表单,当用户提交时,会将数据发送到 Home 控制器的 SubmitForm 方法。

asp-for:用于绑定模型属性到表单控件。例如:

这会自动将输入框与模型的 UserName 属性绑定,同时生成 name 和 id 属性。

asp-validation-for:用于显示模型验证错误信息。例如:

如果模型验证失败,会在页面上显示相应的错误信息。

路由相关 Tag Helpers

asp-route-{value}:用于在生成的 URL 中添加路由参数。例如:

查看详情

这会生成一个链接,当用户点击时,会导航到 Details 方法,并将 id 参数设置为 123。

asp-controller 和 asp-action:用于生成指向特定控制器和操作的链接。例如:

返回首页

这会生成一个指向 Home 控制器的 Index 方法的链接。

资源相关 Tag Helpers

asp-append-version:用于在静态资源的 URL 中添加版本号,以避免浏览器缓存问题。例如:

这会为 site.css 文件添加一个版本号,确保每次更新后浏览器都会加载最新的文件。

asp-content:用于指定内容的来源路径。例如:

这会加载指定路径下的 JavaScript 文件。

自定义 Tag Helpers

除了内置的 Tag Helpers,开发者还可以根据需要创建自定义的 Tag Helpers。例如,创建一个简单的自定义 Tag Helper,用于生成一个带有版权信息的

标签:

public class FooterTagHelper : TagHelper

{

public override void Process(TagHelperContext context, TagHelperOutput output)

{

output.TagName = "footer";

output.Content.SetContent($"版权所有 © {DateTime.Now.Year}");

}

}

在视图中使用这个自定义 Tag Helper:

这会生成一个包含当前年份版权信息的

标签。

通过合理使用 Tag Helpers,开发者可以显著提高 ASP.NET Core MVC 应用程序的开发效率和可维护性,同时实现更加灵活和强大的功能。

6. Razor Pages与MVC的结合使用

6.1 Razor Pages与MVC的区别与联系

Razor Pages和MVC都是ASP.NET Core中用于构建Web应用程序的框架,它们在某些方面有相似之处,但也存在显著的区别。

区别

架构设计:

MVC:遵循传统的模型-视图-控制器(MVC)架构模式。控制器负责处理用户请求,模型负责数据逻辑,视图负责展示。这种架构适合复杂的应用程序,尤其是那些需要高度分离关注点的应用。

Razor Pages:采用页面模型(Page Model)架构,每个页面都有一个对应的页面模型类,该类负责处理页面的逻辑。这种架构更适合简单的页面级交互,减少了控制器的复杂性。

路由机制:

MVC:通过控制器和操作方法的组合来定义路由,通常需要在路由配置中明确指定路由规则。

Razor Pages:路由基于文件系统结构,页面的URL与其文件路径相对应,这使得路由更加直观和易于管理。

开发效率:

MVC:由于其高度的灵活性和可扩展性,适合大型复杂项目,但开发效率可能受到一定影响,尤其是在处理简单页面时。

Razor Pages:对于简单的页面和表单操作,开发效率更高,因为页面模型类与视图紧密集成,减少了代码量和复杂性。

联系

共享视图引擎:两者都使用Razor作为视图引擎,这意味着在视图的编写上具有相似的语法和功能。

依赖注入:都支持依赖注入,可以通过构造函数注入服务,从而实现松耦合和可测试性。

中间件支持:都可以利用ASP.NET Core的中间件管道来处理请求和响应,例如身份验证、授权、静态文件服务等。

6.2 在MVC项目中使用Razor Pages

在某些情况下,可能需要在一个MVC项目中使用Razor Pages来实现特定的功能,例如简单的表单处理或页面级交互。以下是如何在MVC项目中集成Razor Pages的步骤:

添加Razor Pages支持

修改项目文件:确保项目文件中包含Razor Pages的依赖项。如果项目是基于MVC创建的,通常已经包含了必要的依赖项,例如Microsoft.AspNetCore.App。

配置路由:在Startup.cs或Program.cs中配置Razor Pages的路由。例如:

app.UseEndpoints(endpoints =>

{

endpoints.MapControllerRoute(

name: "default",

pattern: "{controller=Home}/{action=Index}/{id?}");

endpoints.MapRazorPages(); // 添加Razor Pages路由

});

创建Razor Pages

添加Razor Page文件:在Pages文件夹中添加Razor Page文件(.cshtml)。例如,创建一个名为Contact.cshtml的页面:

@page

@model ContactModel

@{

ViewData["Title"] = "联系我们";

}

联系我们



创建页面模型类:在Pages文件夹中创建对应的页面模型类(.cshtml.cs)。例如,创建ContactModel类:

public class ContactModel : PageModel

{

[BindProperty]

public string Name { get; set; }

[BindProperty]

public string Email { get; set; }

public void OnPost()

{

// 处理表单提交

if (ModelState.IsValid)

{

// 保存数据或发送邮件等操作

}

}

}

访问Razor Pages

启动应用程序后,可以通过访问/Contact来查看和使用Razor Page。Razor Page的URL与其文件路径相对应,因此Contact.cshtml页面可以通过/Contact路径访问。

数据共享

在MVC项目中,可以通过多种方式在Razor Pages和MVC视图之间共享数据。例如,可以使用ViewData、ViewBag或TempData来传递数据。此外,还可以通过依赖注入的方式将服务注入到页面模型类中,从而实现数据的共享和交互。

通过在MVC项目中集成Razor Pages,可以充分利用两者的优势,实现更灵活和高效的Web应用程序开发。

7. 总结

在本篇教程中,我们详细介绍了 ASP.NET Core MVC 中 Razor 的使用方法,从基础语法到高级功能,逐步深入探讨了如何利用 Razor 构建动态 Web 应用程序。

通过前面的章节,我们了解到 Razor 是一种强大的语法,能够将 HTML 与 C# 代码有机结合,极大地提高了开发效率。从简单的嵌入代码到复杂的控制结构,Razor 提供了丰富的功能来实现动态内容的生成和页面的交互功能。同时,通过页面布局文件和分部视图,开发者可以实现代码复用,构建出结构清晰、易于维护的应用程序。

数据绑定和表单处理是 ASP.NET Core MVC 中的核心功能,Razor 通过多种数据绑定方式(如强类型视图数据绑定、ViewData、ViewBag 和 TempData)实现了模型数据与视图的交互。表单数据收集和模型验证机制则确保了用户输入的有效性和安全性。

Tag Helpers 的引入进一步增强了 Razor 的功能,通过类似 HTML 的语法,开发者可以实现复杂的功能,减少视图模板中的代码量,提高开发效率和代码可读性。同时,自定义 Tag Helpers 的能力使得开发者能够根据具体需求扩展功能。

最后,我们探讨了 Razor Pages 与 MVC 的结合使用。Razor Pages 提供了一种更简洁的页面级交互方式,适合处理简单的表单和页面逻辑。在 MVC 项目中集成 Razor Pages 可以充分利用两者的优点,实现更灵活和高效的开发。

总之,通过掌握 Razor 的各种功能和技巧,开发者可以更加高效地构建功能强大、易于维护的 ASP.NET Core MVC 应用程序。

相关探索