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