Blazor通用子页面路径扩展咨询：添加/Edit后缀并保留基URL

一、通用子页面后缀（/Edit、/Report）实现 #

1. 嵌套路由模板复用 #

直接在现有页面组件上添加多路由模板，完全保留原基URL结构：

@page "/counter"
@page "/counter/Edit"
@page "/counter/Report"

@* 根据当前路由切换显示内容 *@
@if (IsEditMode)
{
    <CounterEdit />
}
else if (IsReportMode)
{
    <CounterReport />
}
else
{
    @* 原Counter页面的展示代码 *@
}

@code {
    [Inject]
    private NavigationManager NavManager { get; set; } = default!;

    private bool IsEditMode => NavManager.Uri.EndsWith("/Edit", StringComparison.OrdinalIgnoreCase);
    private bool IsReportMode => NavManager.Uri.EndsWith("/Report", StringComparison.OrdinalIgnoreCase);
}

带参数的页面（如products/{itemId:int}）同理，扩展路由模板即可：

@page "/products/{itemId:int}"
@page "/products/{itemId:int}/Edit"
@page "/products/{itemId:int}/Report"

2. 封装路由检查逻辑避免重复代码 #

把判断编辑/报告模式的逻辑抽成基类组件，所有需要的页面直接继承：
创建RouteModeBase.razor：

@inherits ComponentBase

[Inject]
protected NavigationManager NavManager { get; set; } = default!;

protected bool IsEditMode => NavManager.Uri.EndsWith("/Edit", StringComparison.OrdinalIgnoreCase);
protected bool IsReportMode => NavManager.Uri.EndsWith("/Report", StringComparison.OrdinalIgnoreCase);

然后在页面里直接复用：

@page "/counter"
@page "/counter/Edit"
@inherits RouteModeBase

@if (IsEditMode)
{
    <CounterEdit />
}
else
{
    @* 原页面内容 *@
}

也可以用路由参数的方式更精准，给路由模板加可选的模式参数：

@page "/products/{itemId:int}/{mode:regex(Edit|Report)?}"

[Parameter]
public int ItemId { get; set; }
[Parameter]
public string? Mode { get; set; }

private bool IsEditMode => Mode?.Equals("Edit", StringComparison.OrdinalIgnoreCase) ?? false;

这种方式不需要依赖Uri判断，路由系统会自动解析Mode参数。

二、文件管理器编辑模式处理 #

1. 路由扩展与状态识别 #

给Folder页面添加编辑路由：

@page "/Folder/{path:string}"
@page "/Folder/{path:string}/edit"

[Parameter]
public string Path { get; set; } = string.Empty;

@* 通过Uri判断是否为编辑模式 *@
private bool IsEditMode => NavManager.Uri.EndsWith("/edit", StringComparison.OrdinalIgnoreCase);

2. 组件切换与保存逻辑 #

根据编辑模式切换显示组件，保存后跳转回查看模式：

@if (IsEditMode)
{
    <FolderEditor FolderPath="@Path" OnSave="SaveFolderContent" />
}
else
{
    <FolderViewer FolderPath="@Path" />
}

@code {
    [Inject]
    private NavigationManager NavManager { get; set; } = default!;
    [Inject]
    private FolderDbService DbService { get; set; } = default!;

    private async Task SaveFolderContent(FolderContent content)
    {
        await DbService.SaveContentAsync(Path, content);
        // 跳转回查看模式
        NavManager.NavigateTo($"/Folder/{Path}");
    }
}

3. HTML/Blazor标签转带ID的输入控件 #

静态HTML内容处理

用DOM解析库遍历原始HTML，将可编辑元素（如<p>、<div>）替换为绑定了数据的输入控件，同时给每个控件分配唯一ID（可通过路径+元素位置生成）：

• 解析HTML生成数据模型，每个字段对应可编辑元素的内容和ID；
• 编辑模式下渲染输入控件绑定模型；
• 保存时将模型数据转回HTML，连同ID一起存入数据库。

Blazor组件内容处理

设计一套可编辑组件库，比如EditableParagraph、EditableImage，这类组件内置查看/编辑状态切换：

<div @key="ElementId">
    @if (IsEditing)
    {
        <InputText @bind-Value="Content" />
    }
    else
    {
        <p>@Content</p>
    }
</div>

@code {
    [Parameter]
    public string ElementId { get; set; } = Guid.NewGuid().ToString();
    [Parameter]
    public string Content { get; set; } = string.Empty;
    [Parameter]
    public bool IsEditing { get; set; }
}

使用时直接替换原有的Blazor标签，保存时收集所有组件的ElementId和Content，批量存入数据库。

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