4.2 Razor Pages 结构与约定

4.2 Razor Pages 结构与约定

4.2 Razor Pages 结构与约定

4.2.1 目录结构

Razor Pages 默认位于项目的 Pages 目录下。这个目录是 ASP.NET Core 自动识别的 Razor Pages 根目录。在这个目录下，你可以创建子目录来组织你的页面。

MyWebApp/
│
├── Pages/
│   ├── Index.cshtml        // 首页
│   ├── Index.cshtml.cs     // 首页的 PageModel
│   ├── About.cshtml        // 关于页面
│   ├── About.cshtml.cs     // 关于页面的 PageModel
│   └── Products/
│       ├── Index.cshtml    // 产品列表页
│       ├── Index.cshtml.cs // 产品列表页的 PageModel
│       ├── Details.cshtml  // 产品详情页
│       ├── Details.cshtml.cs// 产品详情页的 PageModel
│       └── Create.cshtml   // 创建产品页
│           └── Create.cshtml.cs // 创建产品页的 PageModel
│
├── ...
└── MyWebApp.csproj
​

约定：

• Pages 目录是 Razor Pages 的根目录。

• 每个 Razor Page 由一个 .cshtml 文件（视图）和一个 .cshtml.cs 文件（PageModel）组成。

• .cshtml.cs 文件通常与对应的 .cshtml 文件位于同一目录下。

• 目录结构反映了 URL 路由结构。例如，Pages/Products/Details.cshtml 对应于 URL /Products/Details。

4.2.2 命名约定

Razor Pages 的命名约定至关重要，因为它直接影响路由和 PageModel 的绑定。

1. .cshtml 文件 (视图)

• .cshtml 文件定义了页面的 HTML 结构和 Razor 语法。

• 文件名（不包括扩展名）决定了页面的路由。例如，About.cshtml 对应于 /About。

• Index.cshtml 文件是目录的默认页面。例如，Pages/Products/Index.cshtml 对应于 /Products。

2. .cshtml.cs 文件 (PageModel)

• .cshtml.cs 文件包含 PageModel 类，负责处理页面请求、数据绑定和逻辑。

• PageModel 类必须继承自 PageModel 类。

• PageModel 类名通常与 .cshtml 文件名相同，并附加 "Model" 后缀。例如，About.cshtml.cs 包含 AboutModel 类。

• PageModel 类可以包含处理 HTTP 请求的方法（如 OnGet, OnPost, OnGetAsync, OnPostAsync）。

3. 处理程序方法 (Handler Methods)

• PageModel 中的处理程序方法处理特定的 HTTP 请求。

• OnGet 方法处理 GET 请求，用于初始化页面数据。

• OnPost 方法处理 POST 请求，用于处理表单提交。

• OnGetAsync 和 OnPostAsync 是异步版本，用于执行 I/O 密集型操作。

• 可以通过添加处理程序名称来区分不同的 POST 请求。 例如： OnPostDelete, OnPostUpdate

4. 路由约定

• Razor Pages 遵循基于目录结构的约定路由。

• URL 路径与 Pages 目录下的文件路径相对应。

• 可以使用 @page 指令在 .cshtml 文件中显式指定路由。

• 可以使用路由参数来传递数据到页面。

4.2.3 代码实践

示例：创建一个简单的 "Contact" Razor Page

1. 创建 Contact.cshtml 文件：

   在 Pages 目录下创建一个名为 Contact.cshtml 的文件，并添加以下内容：

   @page
   @model MyWebApp.Pages.ContactModel
   @{
       ViewData["Title"] = "Contact Us";
   }
   <h1>@ViewData["Title"]</h1>
   <p>This is the contact page.</p>
   <form method="post">
       <label for="Name">Name:</label>
       <input type="text" id="Name" asp-for="Name" /><br /><br />
       <label for="Email">Email:</label>
       <input type="email" id="Email" asp-for="Email" /><br /><br />
       <label for="Message">Message:</label>
       <textarea id="Message" asp-for="Message"></textarea><br /><br />
       <button type="submit">Submit</button>
   </form>
   @if (!string.IsNullOrEmpty(Model.ConfirmationMessage))
   {
       <p>@Model.ConfirmationMessage</p>
   }
   ​

2. 创建 Contact.cshtml.cs 文件：

   在 Pages 目录下创建一个名为 Contact.cshtml.cs 的文件，并添加以下内容：

   using Microsoft.AspNetCore.Mvc;
   using Microsoft.AspNetCore.Mvc.RazorPages;
   namespace MyWebApp.Pages
   {
       public class ContactModel : PageModel
       {
           [BindProperty]
           public string Name { get; set; }
           [BindProperty]
           public string Email { get; set; }
           [BindProperty]
           public string Message { get; set; }
           public string ConfirmationMessage { get; set; }
           public void OnGet()
           {
               // 初始化页面数据
           }
           public IActionResult OnPost()
           {
               if (!ModelState.IsValid)
               {
                   return Page();
               }
               // 处理表单提交
               ConfirmationMessage = $"Thank you, {Name}! We have received your message.";
               // 可以将数据保存到数据库或发送电子邮件
               return Page();
           }
       }
   }
   ​

代码解释：

• @page 指令告诉 Razor 引擎这是一个 Razor Page。

• @model 指令指定与此页面关联的 PageModel 类型。

• ViewData["Title"] 用于设置页面标题。

• [BindProperty] 属性将 HTML 表单元素绑定到 PageModel 的属性。

• OnGet 方法处理 GET 请求，用于初始化页面数据。

• OnPost 方法处理 POST 请求，用于处理表单提交。

• ModelState.IsValid 属性验证表单数据是否有效。

• return Page() 返回当前页面。

运行结果：

访问 /Contact 将显示 "Contact Us" 页面，包含一个表单。提交表单后，页面将显示确认消息。

示例：使用路由参数

1. 创建 Products/Details.cshtml 文件：

   @page "{id:int}"
   @model MyWebApp.Pages.Products.DetailsModel
   @{
       ViewData["Title"] = "Product Details";
   }
   <h1>@ViewData["Title"]</h1>
   <p>Product ID: @Model.ProductId</p>
   <p>Product Name: @Model.ProductName</p>
   ​

2. 创建 Products/Details.cshtml.cs 文件：

   using Microsoft.AspNetCore.Mvc;
   using Microsoft.AspNetCore.Mvc.RazorPages;
   namespace MyWebApp.Pages.Products
   {
       public class DetailsModel : PageModel
       {
           public int ProductId { get; set; }
           public string ProductName { get; set; }
           public IActionResult OnGet(int id)
           {
               // 模拟从数据库获取产品信息
               if (id == 1)
               {
                   ProductId = id;
                   ProductName = "Awesome Product";
                   return Page();
               }
               else
               {
                   return NotFound();
               }
           }
       }
   }
   ​

代码解释：

• @page "{id:int}" 指令定义了一个路由参数 id，类型为整数。

• OnGet(int id) 方法接收 id 参数，并根据 id 从数据库获取产品信息。

• 访问 /Products/Details/1 将显示 ID 为 1 的产品的详细信息。

4.2.4 路由约定图示

4.2.5 总结

Razor Pages 的结构与约定简化了 Web UI 的开发。通过理解目录结构、命名约定和路由规则，可以更高效地构建和维护 ASP.NET Core 应用程序。 掌握 PageModel 的使用，以及处理程序方法，对于构建动态的、交互式的 Web 页面至关重要。 记住，良好的组织和清晰的命名是可维护代码的基础。