Blazor Syncfusion SfDashboardLayout - 如何在不刷新页面的情况下进行更新

Blazor Syncfusion SfDashboardLayout - How can i update without refreshing the page

提问人:aer 提问时间:11/9/2023 更新时间:11/14/2023 访问量:34

问:

<div class="d-flex flex-row-reverse align-items-center">
    <div class="mb-1">
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-one" @onclick="@(async () => { await UpdatePanelData(1); await dashboardLayout.RefreshAsync(); })" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-two" @onclick="@(() => UpdatePanelData(2) )" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-right" @onclick="@(() => UpdatePanelData(3))" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-left" @onclick="@(() => UpdatePanelData(4))"></Syncfusion.Blazor.Buttons.SfButton>
    </div>
</div>

这是我的按钮,我想更新这个布局;

<Syncfusion.Blazor.Layouts.SfDashboardLayout CellSpacing="new double[] { 10, 10 }" AllowDragging AllowFloating AllowResizing @ref=dashboardLayout Columns="8" CellAspectRatio="@aspectRatio">
    <Syncfusion.Blazor.Layouts.DashboardLayoutEvents Changed="PanelsChanged"></Syncfusion.Blazor.Layouts.DashboardLayoutEvents>

这是我的方法:

async Task UpdatePanelData(int selectedId)
{
    using (var con = await ContextFactory.CreateDbContextAsync())
    {
        var panels = await dashboardLayout.Serialize();
        switch (selectedId)
        {
            case 1:
                int column1 = 2;
                foreach (var panel in panels)
                {
                    //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 2:
                int row2 = 0, count2 = 1;

                foreach (var panel in panels)
                {
                    //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 3:
                int row3 = 0, count3 = 1;

                foreach (var panel in panels)
                {
                   //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 4:
                int row4 = 0, count4 = 1;

                foreach (var panel in panels)
                {
                   //assignment
                }
                await con.SaveChangesAsync();
                break;
        }
        StateHasChanged();
        await dashboardLayout.RefreshAsync();
    }
}

我创建了按钮,为进入布局的面板提供现成的主题。该方法有效,数据库中的数据已更新,但我需要刷新页面才能看到这一点。按下按钮时如何改变外观?

异步 Blazor syncfusion-blazor

评论


答:

1赞 Suresh Rajan Alagarsamy 11/14/2023 #1

根据共享的详细信息,我们怀疑您正在向仪表板布局组件添加面板。我们建议您检查一次序列化面板;之后,无需使用“RefreshAsync”方法。我们已经实现了类似的场景,即使用预定义的值动态更改面板。

示例浏览器https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=fluent

此外,如果要在单击按钮时更改按钮外观,建议使用“IsToggle”属性,该属性有助于在单击按钮时更改按钮外观。

示例浏览器https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=fluent

示例浏览器https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IsToggle