asp.net: 如何在 ASP.NET Core MVC 中使用 Razor pages

在 ASP.NET Core MVC 應用程序中使用 Razor Pages，您可以將 Razor Pages 與傳統的 MVC 組合使用，這樣可以充分利用兩者的優勢。以下是詳細步驟和示例：

1. 配置項目
首先，確保您的 ASP.NET Core MVC 項目已安裝並配置好必要的包。通常，創建新的 ASP.NET Core MVC 項目時，會自動包括所需的包。

Program.cs
確保在 Program.cs 中配置了 Razor Pages：

csharp


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();

app.Run();

2. 創建 Razor Page
在您的項目中添加 Razor Page。例如，創建一個名為 MyPage 的 Razor Page：

Pages/MyPage.cshtml
html

@page
@model MyApp.Pages.MyPageModel
@{
    ViewData["Title"] = "My Page";
}

<h2>@ViewData["Title"]</h2>
<p>Welcome to my Razor Page!</p>

Pages/MyPage.cshtml.cs
csharp


using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyApp.Pages
{
    public class MyPageModel : PageModel
    {
        public void OnGet()
        {
            // Add your page logic here
        }
    }
}

3. 設置路由和導航
在 MVC 中添加指向 Razor Page 的導航連結。例如，在您的 _Layout.cshtml 文件中添加一個連結：

Views/Shared/_Layout.cshtml
html

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My ASP.NET Core Application</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-page="/MyPage">My Page</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        @RenderBody()
    </div>
    <footer>
        <p>&copy; 2024 - My ASP.NET Core Application</p>
    </footer>
    <script src="~/js/site.js"></script>
</body>
</html>

4. 使用 Razor Pages 與 MVC 控制器互動
您可以在 Razor Page 中使用 MVC 控制器中的數據。例如，您可以從 Razor Page 中調用 MVC 控制器的 API 並顯示數據。

創建 API 控制器
首先，創建一個簡單的 API 控制器：

Controllers/MyApiController.cs
csharp

using Microsoft.AspNetCore.Mvc;

namespace MyApp.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class MyApiController : ControllerBase
    {
        [HttpGet]
        public IActionResult Get()
        {
            return Ok(new { message = "Hello from API Controller" });
        }
    }
}

在 Razor Page 中調用 API
然後，在 Razor Page 中調用這個 API：

Pages/MyPage.cshtml
html

@page
@model MyApp.Pages.MyPageModel
@{
    ViewData["Title"] = "My Page";
}

<h2>@ViewData["Title"]</h2>
<p>Welcome to my Razor Page!</p>

<div id="apiMessage"></div>

@section Scripts {
    <script>
        fetch('/api/myapi')
            .then(response => response.json())
            .then(data => {
                document.getElementById('apiMessage').innerText = data.message;
            });
    </script>
}

總結
在 ASP.NET Core MVC 應用程序中使用 Razor Pages，您可以通過以下步驟來整合和使用這兩種技術：

配置項目：在 Program.cs 中配置 Razor Pages 和 MVC。
創建 Razor Page：在 Pages 文件夾中創建 .cshtml 和對應的頁面模型文件。
設置導航：在 MVC 的佈局或視圖中添加導航連結。
互動使用：可以在 Razor Pages 中調用 MVC 控制器的 API。
這樣可以充分利用 Razor Pages 的簡單性和 MVC 的強大功能，實現靈活和可維護的應用程序架構。

Google Code Prettify

如何在 ASP.NET Core MVC 中使用 Razor pages