Blazor RadzenDataGrid 未显示漂亮的网格

Question

希望有人能帮我找到问题。我对 blazor 真的很陌生，所以如果这是一个明显的错误，请不要对我大喊大叫 :D

我正在制作一个基本的数据网格，它从数据库中提取数据并使用 RadzenDataGrid 显示它。

我已经制作了网格，但由于某种原因它只在页面上显示一个基本表格，它没有很好的排序和过滤选项或通常的数据网格外观。

数据网格的代码：

@page "/assessmentresults"
@using NotificationGUI.Web.Components.Interfaces
@using Radzen.Blazor
@using NotificationGUI.Web.Components.DataModel.Schemas.Calc
@using Microsoft.EntityFrameworkCore
@using System.Linq
@using Microsoft.AspNetCore.Mvc;
@using BlazorDownloadFile;

@attribute [StreamRendering]
@inject EMIRAssessmentResultsDbContext dbContext

<PageTitle>Assessment Results</PageTitle>

<h1>Assessment Results</h1>


<RadzenDataGrid TItem="EMIR_AssementResults" Data="@notificationData" AllowFiltering="true" PageSize="100" AllowSorting="true" AllowColumnResize ="true">
    <Columns>
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AssessmentDateTime" Title="AssessmentDateTime" MinWidth="200px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="RBLKey" Title="RBL " MinWidth="100px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="" Title="Notify NCA" MinWidth= "100px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="Notify ERR" MinWidth="230px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports" Title="NumOfAffReports" MinWidth="150px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThresholdConstantX" Title="ThresholdConstantX" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="ThersholdConstantY" Title="ThresholdConstantY" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="AverageMontlyNum" Title="AverageMontlyNum" MinWidth="170px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="NumOfAffReports_AverageMontlyNum" Title="Calculated percentage" MinWidth="180px" />
        <RadzenDataGridColumn TItem="EMIR_AssementResults" Property="EntityResponsibleForReportingLEI" Title="ERRs" MinWidth="100px" />
    </Columns>
</RadzenDataGrid>

@code {

    List<EMIR_AssementResults> notificationData;

    protected override async Task OnInitializedAsync()
    {
        // Retrieve data for RadzenDataGrid
        notificationData = await dbContext.EMIR_AssessmentResultsData.ToListAsync();
    }

}

当我启动它时，它看起来就像垃圾：

有什么建议可能是错误的吗？我认为它应该自动使桌子和所有东西变得漂亮。 更像这样的东西：

Answer 1

确保您在

wwwroot/index.html

或

_Host.cshtml

中使用必要的 JS 和 CSS 参考

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">

<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

脚本标签应该在结束之前

</body>

我注意到您的其中一列有一个

Property=""

，它是空的。这可能会导致问题。每列需要绑定到

EMIR_AssementResults

的属性

请参阅 自述文件 Radzen Blazor 组件入门部分