如何为MudBlazor DataGrid的NoRecordsContent参数传参并设置样式文本

直接写样式化静态文本 #

如果只需要固定的样式化提示，直接定义一个RenderFragment返回HTML结构即可，用MudBlazor内置样式类或自定义CSS排版：

<MudDataGrid T="YourModel" Items="@yourData" NoRecordsContent="RenderNoRecords">
    <!-- 你的列定义写在这里 -->
</MudDataGrid>

@code {
    private List<YourModel> yourData = new();

    private RenderFragment RenderNoRecords => __builder =>
    {
        <div class="d-flex flex-column align-items-center py-8">
            <MudIcon Icon="@Icons.Material.Filled.Info" Size="Size.Large" Color="Color.Info" />
            <h5 class="mt-3 text-muted">暂无数据</h5>
            <p class="text-secondary mt-1">试试调整筛选条件或者添加新数据吧</p>
        </div>
    };
}

动态传递参数的情况 #

如果要根据外部状态（比如筛选关键词）动态改变提示内容，直接在RenderFragment里引用变量就行：

<MudDataGrid T="YourModel" Items="@yourData" NoRecordsContent="RenderNoRecords">
    <!-- 列定义 -->
</MudDataGrid>

<MudTextField @bind-Value="@filterText" Label="输入关键词筛选" />

@code {
    private List<YourModel> yourData = new();
    private string filterText = string.Empty;

    private RenderFragment RenderNoRecords => __builder =>
    {
        var tip = string.IsNullOrEmpty(filterText) 
            ? "还没有任何数据，赶紧添加吧" 
            : $"没找到和「{filterText}」匹配的数据哦";

        <div class="text-center py-6">
            <p class="text-lg text-gray-500">@tip</p>
            <MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="ResetFilter">重置筛选</MudButton>
        </div>
    };

    private void ResetFilter()
    {
        filterText = string.Empty;
        // 这里可以写重置筛选后的数据加载逻辑
    }
}

封装成可复用组件（适合多场景使用） #

如果多个DataGrid都要用到类似的无数据提示，把它封装成独立组件，方便传参数复用：

<!-- NoRecordsTip.razor -->
<div class="custom-no-records-container">
    <MudIcon Icon="@Icon" Size="@IconSize" Color="@IconColor" />
    <h3 class="mt-3">@Title</h3>
    <p class="text-secondary mt-1">@Description</p>
    @if (ActionBtn != null)
    {
        @ActionBtn
    }
</div>

@code {
    [Parameter] public string Title { get; set; } = "暂无数据";
    [Parameter] public string Description { get; set; } = "请稍后再试";
    [Parameter] public Icon? Icon { get; set; } = Icons.Material.Filled.Info;
    [Parameter] public Size IconSize { get; set; } = Size.Large;
    [Parameter] public Color IconColor { get; set; } = Color.Info;
    [Parameter] public RenderFragment? ActionBtn { get; set; }
}

然后在DataGrid里调用：

<MudDataGrid T="YourModel" Items="@yourData">
    <NoRecordsContent>
        <NoRecordsTip 
            Title="没有找到用户信息" 
            Description="检查搜索条件，或者点击下方按钮添加新用户"
            ActionBtn="
                <MudButton Color='Color.Secondary' OnClick='OpenAddUserModal'>添加用户</MudButton>
            " />
    </NoRecordsContent>
    <!-- 列定义 -->
</MudDataGrid>

@code {
    private List<YourModel> yourData = new();

    private void OpenAddUserModal()
    {
        // 打开添加用户的弹窗逻辑
    }
}

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