Blazor Server + Ant Design Card组件的问题

Question

使用Blazor Server + Ant Design的Card组件实现
实现卡片显示统计Table的数据，

可点击方框内时 Table需要更新数据。
razor 组件的代码如何进行撰写？
统计自定义实体
public int RunningCount { get; set; } = 0;
public int IdleCount { get; set; } = 0;
public int ExceptionCount { get; set; } = 0;
public int WarningCount { get; set; } = 0;
public int TotalCount { get; set; }= 0;

Answer 1

引自免费微信小程序：皆我百晓生

在Blazor Server应用程序中，我们可以使用Ant Design for Blazor库来创建一个具有可点击方框的Card组件，并且当用户点击这些方框时更新表格数据。首先，确保已经安装了Blazored.Modal和AntDesign.Blazor两个NuGet包。

下面是一个简单的步骤指南以及代码示例：

1. 安装必要的依赖项：

   • 添加Blazored.Modal：dotnet add package Blazored.Modal
   • 添加AntDesign.Blazor：dotnet add package AntDesign.Blazor

2. 创建一个新的Razor组件，例如StatisticsCard.razor:

@page "/statisticscard"
@using System.Collections.Generic
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using AntDesign
@using YourNamespace.Models // 替换为你的命名空间

<h3>群组状邮债表板</h3>
<Row>
    <Col Span="8">
        <Statistic title="银行制" value="@RunningCount" />
    </Col>
    <Col Span="8">
        <Statistic title="警告粒" value="@WarningCount" />
    </Col>
</Row>
<Row>
    <Col Span="8">
        <Statistic title="Noise" value="@IdleCount" />
    </Col>
    <Col Span="8">
        <Statistic title="搜索24" value="@SearchCount" />
    </Col>
</Row>
<Row>
    <Col Span="8">
        <Statistic title="3" value="@ExceptionCount" />
    </Col>
    <Col Span="8">
        <Statistic title="0" value="@TotalCount" />
    </Col>
</Row>

@code {
    [Parameter]
    public List<YourCustomEntityModel> Data { get; set; } = new List<YourCustomEntityModel>();

    private YourCustomEntityModel selectedEntity;
    private bool isModalVisible = false;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        UpdateCounts(Data);
    }

    private void UpdateCounts(List<YourCustomEntityModel> data)
    {
        RunningCount = data.Count(e => e.Running);
        IdleCount = data.Count(e => !e.Running && !e.Warning);
        ExceptionCount = data.Count(e => e.Exception);
        WarningCount = data.Count(e => e.Warning);
        TotalCount = data.Sum(e => e.Total);
    }

    private async Task HandleClick(YourCustomEntityModel entity)
    {
        selectedEntity = entity;
        isModalVisible = true;
        await InvokeAsync(() => StateHasChanged());
    }

    private async Task CloseModal()
    {
        isModalVisible = false;
        await InvokeAsync(() => StateHasChanged());
    }
}

1. 在上述代码中，我们使用了Ant Design的Statistic组件来展示统计数据。每个Statistic都有一个与之关联的事件处理程序HandleClick，用于在单击时打开模态框。模态框的内容可以根据需求定制，这里省略了模态框部分的代码，因为这取决于您想在模态框中显示和编辑哪些信息。

2. 实现YourCustomEntityModel类，包含您的统计实体属性：

public class YourCustomEntityModel
{
    public int RunningCount { get; set; }
    public int IdleCount { get; set; }
    public int ExceptionCount { get; set; }
    public int WarningCount { get; set; }
    public int TotalCount { get; set; }
    
    public bool Running => RunningCount > 0;
    public bool Warning => WarningCount > 0;
    public bool Exception => ExceptionCount > 0;
}

1. 最后，在主页面或其他任何地方引用这个新组件：

@page "/"
@inject HttpClient Http

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <DynamicComponent RouteData="@routeData" Parameters="@routeData.Parameters" />
        </RouteView>
    </Found>
    <NotFound>
        <PageTitle>404: Not found</PageTitle>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

@code {
    protected override async Task OnInitializedAsync()
    {
        var response = await Http.GetAsync("api/statistics");
        if (response.IsSuccessStatusCode)
        {
            var data = await response.Content.ReadFromJsonAsync<List<YourCustomEntityModel>>();
            NavigationManager.NavigateTo("/statisticscard", forceReload: true, state: new Dictionary<string, object> { { "data", data } });
        }
    }
}

在这个例子中，我们在主页面上从API获取数据并将其传递给StatisticsCard组件。注意替换api/statistics为实际的API端点，并根据需要调整模型和API响应格式。

这样，你就有了一个带有可点击方框的Ant Design Card组件，点击后可以更新数据显示在表格中。如果你需要在模态框中修改数据并保存，请按照Ant Design的文档添加相应的功能。