C#的Razor页面是什么？如何创建和使用？-C#.Net教程-PHP中文网

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

月夜之吻

发布： 2025-09-12 08:05:01

原创

930人浏览过

Razor页面是ASP.NET Core中将C#代码嵌入HTML的轻量级开发方式，通过.cshtml文件实现前后端结合，使用@page、@model等指令定义页面和模型，支持动态数据渲染与表单处理，简化中小型应用开发流程。

c#的razor页面是什么？如何创建和使用？

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

登录后复制

（或者项目配置的路由），你应该能看到页面渲染的结果。

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

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开发任务。

以上就是C#的Razor页面是什么？如何创建和使用？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

C# 如何从xml中反序列化出字典(Dictionary) 如何使用C#执行存储过程？需要哪些参数？ C# 如何将字典(Dictionary)序列化为xml C#中如何使用数据库的本地事务？示例代码是什么？ C# 如何在xml反序列化时指定默认值