如何在.NET 7 Blazor Server中通过Razor页面渲染Partial Views

先明确概念：Blazor中没有Partial View，用Razor组件替代 #

Blazor Server里没有MVC中的Partial View概念，对应的是独立Razor组件，逻辑类似但实现方式不同，别混淆两者用法。

方案1：在当前页面内展示详情组件 #

点击按钮后在当前页面指定区域显示选中行的详情，无需跳转页面。

步骤1：创建详情展示组件（SiteDetail.razor） #

@if (Site != null)
{
    <div class="p-4 border rounded mt-4">
        <h3 class="text-lg font-semibold">站点详情</h3>
        <div class="mt-2">
            <p><strong>ID:</strong> @Site.Id</p>
            <p><strong>站点名称:</strong> @Site.Name</p>
            <!-- 根据你的SiteModel添加其他业务字段 -->
        </div>
    </div>
}

@code {
    // 接收父组件传递的SiteModel参数
    [Parameter]
    public SiteModel? Site { get; set; }
}

步骤2：主页面配置Syncfusion网格并处理点击事件 #

@page "/"
@using Syncfusion.Blazor.Grids

<!-- Syncfusion数据网格 -->
<SfGrid DataSource="@SiteList" AllowPaging="true" Height="400">
    <GridColumns>
        <GridColumn Field="@nameof(SiteModel.Id)" HeaderText="ID" Width="100"></GridColumn>
        <GridColumn Field="@nameof(SiteModel.Name)" HeaderText="站点名称" Width="200"></GridColumn>
        <GridColumn HeaderText="操作" Width="120">
            <Template>
                <!-- 绑定当前行数据到点击事件 -->
                <SfButton OnClick="@(() => SelectSite(context as SiteModel))" Variant="Variant.Outlined">
                    查看详情
                </SfButton>
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>

<!-- 条件渲染详情组件 -->
@if (SelectedSite != null)
{
    <SiteDetail Site="@SelectedSite" />
}

@code {
    private List<SiteModel> SiteList { get; set; } = new();
    private SiteModel? SelectedSite { get; set; }

    protected override void OnInitialized()
    {
        // 模拟数据源，实际项目替换为数据库查询
        SiteList = new List<SiteModel>
        {
            new() { Id = 1, Name = "总部站点" },
            new() { Id = 2, Name = "分部站点A" },
            new() { Id = 3, Name = "分部站点B" }
        };
    }

    // 处理按钮点击，赋值选中的站点
    private void SelectSite(SiteModel? site)
    {
        SelectedSite = site;
    }

    // 你的SiteModel实体类
    public class SiteModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        // 添加其他业务字段
    }
}

方案2：跳转到独立页面展示详情 #

如果需要单独页面显示详情，通过路由参数传递ID后查询数据渲染。

步骤1：创建详情页面组件（SiteDetailPage.razor） #

@page "/site-detail/{SiteId:int}"
@inject NavigationManager NavManager

@if (CurrentSite != null)
{
    <div class="container mt-4">
        <h2>站点详情</h2>
        <div class="mt-3">
            <p><strong>ID:</strong> @CurrentSite.Id</p>
            <p><strong>名称:</strong> @CurrentSite.Name</p>
            <!-- 其他业务字段 -->
        </div>
        <button @onclick="ReturnToList" class="mt-3 btn btn-secondary">返回列表</button>
    </div>
}
else
{
    <p class="container mt-4">加载中...</p>
}

@code {
    [Parameter]
    public int SiteId { get; set; }
    private SiteModel? CurrentSite { get; set; }

    protected override void OnInitialized()
    {
        // 根据ID从数据源获取数据，实际替换为数据库查询
        CurrentSite = new SiteModel { Id = SiteId, Name = $"站点{SiteId}" };
    }

    private void ReturnToList()
    {
        NavManager.NavigateTo("/");
    }

    public class SiteModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

步骤2：修改主页面的按钮点击逻辑 #

在主页面注入NavigationManager并更新点击事件：

@inject NavigationManager NavManager

// ... 其他代码 ...

private void SelectSite(SiteModel site)
{
    // 跳转到详情页面，传递站点ID
    NavManager.NavigateTo($"/site-detail/{site.Id}");
}

常见问题排查 #

• 确保SiteModel类的属性为公共可访问，否则组件无法读取数据
• 检查Syncfusion网格的Template模板中，context是否正确转换为SiteModel类型
• 路由跳转场景下，确保路由参数配置正确（比如{SiteId:int}限制为整数类型）

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