主页 / coding / 问题 / 79367996
Accepted
John D
Asked: 2025-01-19 05:30:22 +0800 CST

我们如何引用 HeaderTemplate 来使用 RenderFragment 为 QuickGrid 指定 HTML？

  • 772

我们在 VS 2022 中有一个 .NET 8 和 C# Blazor 项目，其中包含许多 QuickGrids。

我想使用 来放置PropertyColumn的标题文本的 HTML 和样式HeaderTemplate，这将覆盖该Title字段。但我不知道如何使用HeaderTemplate。

我的 QuickGrid 标记如下所示：

<PropertyColumn 
         Property="f => f.TXT_NAME"              
         HeaderTemplate="<TemplateHeader>Missouri</TemplateHeader>" 
         Sortable="false" Class="itemName" />

我已在 Google 上搜索了指定/利用该HeaderTemplate功能的正确方法的示例，但找不到任何示例。您在上面的代码中看到的是关于如何使用的无效猜测HeaderTemplate。

当我输入代码时HeaderTemplate，VS 2022 会立即跟进=""-- 暗示应该输入一些文本。但是……我尝试了各种方法，你可以看到我尝试提供一个包含渲染片段的组件 -- 但编译时不会出现错误

无效的表达式术语“<”

我陷入困境。

渲染片段组件标记和代码如下：

<div class="text-danger fst-italic fw-bold">
   @ChildContent
</div>

@code {
#pragma warning disable CS8618
   [Parameter] public RenderFragment? ChildContent { get; set; }
#pragma warning restore CS8618
}

欢迎您提出解决方案、评论和问题。

谢谢。

blazor

2 个回答

  1. 您需要使用 aTemplateColumn而不是PropertyColumn。

    以下是天气页面的示例：

    <QuickGrid TGridItem="WeatherForecast" ItemsProvider="this.GridItemsProvider">
    <PropertyColumn Property="(r) => r.Date" Title="Date" />
    <TemplateColumn>
        <HeaderTemplate>
            <h6>Temp &degf</h6>
        </HeaderTemplate>
        <ChildContent>
            @context.TemperatureC
        </ChildContent>
    </TemplateColumn>
    <PropertyColumn Property="(r) => r.TemperatureF" Title="Temp &degf" />
    <PropertyColumn Property="(r) => r.Summary" Title="Summary" />
</QuickGrid>
    • 3
  2. Best Answer

    您可以在 PropertyColumn 上使用 HeaderTemplate

    <PropertyColumn Title="Date" Property="p => p.Date"> 
    <HeaderTemplate>
        Test
    </HeaderTemplate>
</PropertyColumn>

    你也可以使用 css 通过隔离来定位标题 Weather.razor.css

    ::deep div.col-title-text {
    color: orangered;
}

    然而，如果QuickGrid是根组件，则::deep操作员将无法工作。

    <enable-deep>
    <QuickGrid Items="forecasts.AsQueryable()">
        <PropertyColumn Title="Date" Property="p => p.Date" />
        <PropertyColumn Title="Temp. (C)" Property="p => p.TemperatureC" />
        <PropertyColumn Title="Temp. (F)" Property="p => p.TemperatureF" />
        <PropertyColumn Title="Summary" Property="p => p.Summary" />
    </QuickGrid>
</enable-deep>

    这里我使用自定义 HTML 元素来启用::deep选择器。浏览器会忽略该元素。

    在此处输入图片描述

    仅供参考：PropertyColumn继承了ColumnBase，它具有 RenderFragment 参数HeaderTemplate

    关于RenderFragment使用的官方文档。

    • 3

相关问题