如何将Razor Page（PageModel）渲染为HTML？实现Razor Pages嵌套

可以实现这种嵌套需求，核心是手动实例化子PageModel并渲染其视图，同时让子页面的表单直接提交到自身的处理路径，以此保留独立的POST动作，不用依赖Partial View或ViewComponent。

具体实现步骤 #

1. 手动初始化子PageModel
   在父页面中，直接创建子PageModel的实例，手动执行它的GET初始化方法（比如OnGetAsync），确保子页面的初始数据正确加载。如果子Model有依赖注入的服务，需要从请求服务容器中获取后再构造实例。

2. 渲染子页面视图
   使用Html.PartialAsync渲染子页面的视图，并将初始化好的子Model传递过去，这样子页面就能正确绑定自身的Model。

3. 子页面表单指定独立提交路径
   子页面的表单必须通过asp-page属性明确指向自身的页面路径，这样提交时请求会直接发送到子PageModel的POST方法，和父页面完全分离。

代码示例 #

父页面 Parent.cshtml

@page
@model ParentModel

<h1>父页面</h1>

<!-- 嵌入子页面 -->
@{
    // 如果子Model有依赖，从服务容器获取后构造
    // var childService = HttpContext.RequestServices.GetRequiredService<IChildService>();
    var childModel = new ChildModel();
    await childModel.OnGetAsync(); // 执行子页面的GET逻辑
}
@await Html.PartialAsync("./Child.cshtml", childModel)

<!-- 父页面自身的表单 -->
<form method="post">
    <input type="text" asp-for="ParentInput" />
    <input type="submit" value="提交父页面" asp-page-handler="ParentSubmit" />
</form>

子页面 Child.cshtml

@model ChildModel

<div style="border:1px solid #ccc; padding:1rem; margin:1rem 0;">
    <h2>子页面</h2>
    <!-- 表单明确指向子页面自身 -->
    <form method="post" asp-page="./Child">
        <input type="text" asp-for="ChildInput" />
        <span asp-validation-for="ChildInput" class="text-danger"></span>
        <input type="submit" value="提交子页面" asp-page-handler="ChildSubmit" />
    </form>
</div>

子PageModel Child.cshtml.cs

public class ChildModel : PageModel
{
    [BindProperty]
    public string ChildInput { get; set; }

    public async Task OnGetAsync()
    {
        // 子页面的GET初始化逻辑，比如加载默认数据
    }

    public async Task<IActionResult> OnPostChildSubmitAsync()
    {
        if (!ModelState.IsValid)
        {
            // 验证失败时返回子页面自身，保留输入数据
            return Page();
        }

        // 子页面独立的POST处理逻辑，比如保存数据
        // _dbContext.ChildData.Add(new ChildData { Input = ChildInput });
        // await _dbContext.SaveChangesAsync();

        // 处理完成后可以跳回父页面
        return RedirectToPage("./Parent");
    }
}

注意事项 #

• 子页面的表单必须设置asp-page="./Child"，否则会默认提交到父页面的路径，导致父Model处理请求。
• 如果子Model需要使用ViewData，可以在父页面中手动将父页面的ViewData传递给子视图，或者在子Model中单独设置。
• 若子Model有依赖注入需求，务必通过HttpContext.RequestServices获取服务实例后再构造子Model，避免依赖缺失。

内容的提问来源于stack exchange，提问作者WriteEatSleepRepeat