C#的Razor页面是什么?如何创建和使用?

来源:这里教程网 时间:2026-02-21 17:24:45 作者:

Razor页面是ASP.NET Core中一种轻量级的页面开发方式,它允许你将C#代码嵌入到HTML中,从而创建动态Web页面。简单来说,它就是一种将前端展示和后端逻辑结合在一起的技术。

解决方案

Razor页面本质上是

.cshtml
文件,它包含了HTML标记、Razor指令和C#代码。ASP.NET Core运行时会解析这些文件,并将C#代码编译成最终的HTML输出。

创建Razor页面:

    新建ASP.NET Core项目: 在Visual Studio中,选择“创建新项目”,然后选择“ASP.NET Core Web应用”,选择“Web应用(模型-视图-控制器)”或“Web应用”,这里选择“Web应用”会更接近Razor Pages的默认架构。 添加Razor页面: 在“Pages”文件夹下(如果选择的是Web应用(模型-视图-控制器)项目,则需要在“Views”文件夹下手动创建Pages文件夹),右键单击,选择“添加” -> “新建项”,然后选择“Razor页面”。 给它起个名字,比如“MyPage.cshtml”。

使用Razor页面:

打开

MyPage.cshtml
文件,你会看到类似这样的结构:

@page
@model MyWebApp.Pages.MyPageModel
@{
    ViewData["Title"] = "My Page";
}
<h1>@ViewData["Title"]</h1>
<p>This is my Razor page.</p>
<p>Current time: @DateTime.Now</p>
<ul>
    @foreach (var item in Model.MyList)
    {
        <li>@item</li>
    }
</ul>
@page
: 这个指令将该文件标记为Razor页面。
@model
: 指定与该页面关联的模型类。 通常,每个Razor页面都有一个对应的“页面模型”类,它处理页面的逻辑。 如果省略,则默认使用
PageModel
基类。
@{ ... }
: 在花括号内可以编写C#代码块。
@ViewData["Title"]
: 从
ViewData
字典中获取标题,
ViewData
允许你在页面和页面模型之间传递数据。
@DateTime.Now
: 在HTML中嵌入C#表达式。
@foreach
: 在HTML中嵌入C#循环。
Model.MyList
: 访问页面模型中名为
MyList
的属性。

页面模型:

为了让Razor页面更具结构性,通常会创建一个与页面关联的页面模型类。 在

MyPage.cshtml
文件所在的文件夹中,创建一个名为
MyPage.cshtml.cs
的文件(注意文件名要对应)。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApp.Pages
{
    public class MyPageModel : PageModel
    {
        public List<string> MyList { get; set; } = new List<string> { "Item 1", "Item 2", "Item 3" };
        public void OnGet()
        {
            // 在页面加载时执行的逻辑
        }
    }
}
MyPageModel
: 页面模型类,继承自
PageModel
MyList
: 一个属性,可以在Razor页面中访问。
OnGet()
: 处理HTTP GET请求的方法。 页面加载时会执行此方法。 还可以有
OnPost()
方法来处理POST请求。

运行项目:

运行ASP.NET Core项目,然后在浏览器中访问

/MyPage
(或者项目配置的路由),你应该能看到页面渲染的结果。

Razor页面的优势是什么?为什么选择它而不是MVC?

Razor Pages简化了小型到中型Web应用的开发。与传统的MVC模式相比,它减少了样板代码,并将视图和控制器逻辑紧密地结合在一起。对于简单的页面,你不需要单独的控制器类,所有逻辑都可以在页面模型中处理。这使得代码更易于阅读和维护。当然,对于更复杂的应用程序,MVC可能仍然是更好的选择,因为它提供了更好的分离关注点。

如何在Razor页面中处理表单提交?

要在Razor页面中处理表单提交,你需要使用

OnPost
方法。 首先,在你的Razor页面中创建一个表单:

<form method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Submit</button>
</form>
<p>You entered: @Model.Name</p>

然后在你的页面模型中,添加一个

Name
属性和一个
OnPost
方法:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApp.Pages
{
    public class MyPageModel : PageModel
    {
        [BindProperty]
        public string Name { get; set; }
        public void OnPost()
        {
            // 在这里处理表单提交
            // 可以访问 this.Name 来获取用户输入的值
        }
    }
}
[BindProperty]
: 这个属性告诉ASP.NET Core将表单中的
Name
字段绑定到
Name
属性。
OnPost()
: 当表单提交时,会执行此方法。 你可以在这里处理表单数据。
this.Name
: 在
OnPost
方法中,你可以通过
this.Name
访问用户输入的值。

你还可以使用不同的

OnPost
方法来处理不同的表单提交。 例如,你可以创建
OnPostSubmit1()
OnPostSubmit2()
方法,并在表单中使用不同的提交按钮来调用它们。

如何在Razor页面中使用依赖注入?

依赖注入是ASP.NET Core的核心特性之一,你可以在Razor页面中使用它来访问各种服务。 例如,假设你有一个服务叫做

IMyService

public interface IMyService
{
    string GetMessage();
}
public class MyService : IMyService
{
    public string GetMessage()
    {
        return "Hello from MyService!";
    }
}

首先,你需要在

Startup.cs
文件中注册这个服务:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddTransient<IMyService, MyService>();
}

然后,你可以在你的页面模型中使用构造函数注入来获取这个服务:

using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyWebApp.Pages
{
    public class MyPageModel : PageModel
    {
        private readonly IMyService _myService;
        public MyPageModel(IMyService myService)
        {
            _myService = myService;
        }
        public string Message { get; set; }
        public void OnGet()
        {
            Message = _myService.GetMessage();
        }
    }
}
private readonly IMyService _myService;
: 声明一个私有只读字段来存储服务实例。
public MyPageModel(IMyService myService)
: 使用构造函数注入来获取服务实例。
Message = _myService.GetMessage();
: 在
OnGet
方法中调用服务方法。

最后,你可以在Razor页面中使用

Message
属性来显示服务返回的消息:

@page
@model MyWebApp.Pages.MyPageModel
@{
    ViewData["Title"] = "My Page";
}
<h1>@ViewData["Title"]</h1>
<p>@Model.Message</p>

总的来说,Razor页面提供了一种简洁高效的方式来构建ASP.NET Core Web应用。它简化了开发流程,并提供了强大的功能来处理各种Web开发任务。

相关推荐