提问人:aer 提问时间:11/9/2023 更新时间:11/14/2023 访问量:34
Blazor Syncfusion SfDashboardLayout - 如何在不刷新页面的情况下进行更新
Blazor Syncfusion SfDashboardLayout - How can i update without refreshing the page
问:
<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();
}
}
我创建了按钮,为进入布局的面板提供现成的主题。该方法有效,数据库中的数据已更新,但我需要刷新页面才能看到这一点。按下按钮时如何改变外观?
答:
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
评论