Blazor-重新加载网格组件

Question

我创建了一个剃刀页面，在同一页面的网格中添加和显示值。添加记录时，它正在数据库中保存，但保存后不会刷新记录网格。我只需要重新加载网格组件，因为我需要在同一页面中显示成功消息。

这是我的代码：

网格.razor:

@typeparam TableItem
<table>
<thead>
<tr class="blazor-grid-header">@GridHeader</tr>
</thead>
<tbody>
@foreach (var item in ItemList)
{
<tr class="blazor-row-item">@GridRow(item)</tr>}
</tbody>
</table>
<div class="pagination">
<button class="btn pagebutton btn-info" onclick=@(new Action(async () => SetPagerSize("back")))>&laquo;</button>
<button class="btn pagebutton btn-secondary" onclick=@(new Action(async () => NavigateToPage("previous")))>Prev</button>
@for (int i = startPage; i <= endPage; i++)
{
var currentPage = i;
<button class="btn pagebutton @(currentPage==curPage?"currentpage":"")" onclick=@(new Action(async () => updateList(currentPage)))>
@currentPage
</button>}
<button class="btn pagebutton btn-secondary" onclick=@(new Action(async () => NavigateToPage("next")))>Next</button>
<button class="btn pagebutton btn-info" onclick=@(new Action(async () => SetPagerSize("forward")))>&raquo;</button>
<span class="pagebutton btn btn-link disabled">Page @curPage of @totalPages</span>
</div>
@functions { int totalPages;
int curPage;
int pagerSize;
int startPage;
int endPage;
/// <summary>
/// Header for BlazorGrid.
/// </summary>
[Parameter]
public RenderFragment GridHeader { get; set; }
/// <summary>
/// Rows for BlazorGrid.
/// </summary>
[Parameter]
public RenderFragment<TableItem> GridRow { get; set; }
/// <summary>
/// The list of item supplied to the BlazorGrid.
/// </summary>
[Parameter]
public IEnumerable<TableItem> Items { get; set; }
/// <summary>
/// Size of each page of BlazorGrid. This is a required field.
/// </summary>
[Parameter]
public int PageSize { get; set; }
public IEnumerable<TableItem> ItemList { get; set; }

protected override async Task OnInitializedAsync()
{
pagerSize = 5;
curPage = 1;
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);
SetPagerSize("forward");
}
public void updateList(int currentPage)
{
ItemList = Items.Skip((currentPage - 1) * PageSize).Take(PageSize);
curPage = currentPage;
this.StateHasChanged();
}
public void SetPagerSize(string direction)
{
if (direction == "forward" && endPage < totalPages)
{
startPage = endPage + 1;
if (endPage + pagerSize < totalPages)
{
endPage = startPage + pagerSize - 1;
}
else
{
endPage = totalPages;
}
this.StateHasChanged();
}
else if (direction == "back" && startPage > 1)
{
endPage = startPage - 1;
startPage = startPage - pagerSize;
}
}
public void NavigateToPage(string direction)
{
if (direction == "next")
{
if (curPage < totalPages)
{
if (curPage == endPage)
{
SetPagerSize("forward");
}
curPage += 1;
}
}
else if (direction == "previous")
{
if (curPage > 1)
{
if (curPage == startPage)
{
SetPagerSize("back");
}
curPage -= 1;
}
}
updateList(curPage);
} } 

PlantMaster.razor:

@page "/"
@inherits PlantMasterBase

<h3>Plants</h3>
<Alert @ref="AlertMessage" Color="Color.Success">
<Heading>
Success
<CloseButton @onclick="AlertMessage.Hide" />
</Heading>
@if (AlertMode == "Add")
{
<Paragraph>
Plant has been added successfully...
</Paragraph>
}
else
{
<Paragraph>
Plant has been updated successfully...
</Paragraph>
}
</Alert>
<EditForm Model="@Plant">
<div class="form-group row">
<label for="plantName" class="col-sm-2 col-form-label">
Plant Name:
</label>
<div class="col-sm-10">
<InputText id="plantName" class="form-control" placeholder="Plant Name" @bind-Value="Plant.PlantName"></InputText>
</div>
</div>
<div class="form-group row">
<label for="address" class="col-sm-2 col-form-label">
Address:
</label>
<div class="col-sm-10">
<InputText id="address" class="form-control" placeholder="Address" @bind-Value="Plant.Address"></InputText>
</div>
</div>
<button class="btn btn-primary" type="button" id="AddClick" @onclick="Add_Click">Add</button>
</EditForm>
@if (Plants == null)
{
<div class="spinner"></div>
}
else
{
<Grid Items="@Plants" PageSize="5">
<GridHeader>
<th>PlantName</th>
<th>Address</th>
<th>Action</th>
</GridHeader>
<GridRow>
<td>@context.PlantName</td>
<td>@context.Address</td>
<td>
<button class="btn btn-primary" type="button" @onclick="(() => ShowModal(context.PlantId))">Edit</button>
</td>
</GridRow>
</Grid>
}
@code{
public IEnumerable<Plant> Plants { get; set; }
protected override async Task OnInitializedAsync()
{
Plants = await GetPlants();
}
protected async Task Add_Click()
{
await PlantRepository.AddPlant(Plant);
Plants = await GetPlants();
AlertMessage.Show();
AlertMode = "Add";
StateHasChanged();
}
}

请帮助我解决此重新加载问题？

Answer 1

使用'this.StateHasChanged((；`重新加载Blazor UI

void RefreshMe()
{
this.StateHasChanged();
}

Answer 2

第三次尝试，将其添加到您的网格的@functions:中

protected override void OnParamtersSet()
{
// from OnInit, refactor it
ItemList = Items.Skip((curPage - 1) * PageSize).Take(PageSize);
totalPages = (int)Math.Ceiling(Items.Count() / (decimal)PageSize);
}

当它起作用时，您可以删除所有StateHasChanged((调用。

---

再看一眼，您可能会遇到不同的问题。尝试使用@key:

@foreach (var item in ItemList)
{
<tr @key="item" class="blazor-row-item">@GridRow(item)</tr>
}

---

解码有点困难，但new Action(...)的使用很奇怪，我无法想象这有什么好处。当然不能与async结合使用。

我注意到您的Grid仍然使用@functions，这表明它非常旧，因此值得怀疑。

所以，更换

onclick=@(new Action(async () => updateList(currentPage)))

带有

onclick="@() => updateList(currentPage)"

看看这是怎么回事。

Answer 3

bool showGrid=true;
if(showGrid)
{
<Grid Items="@Plants" PageSize="5">
<GridHeader>
<th>PlantName</th>
<th>Address</th>
<th>Action</th>
</GridHeader>
<GridRow>
<td>@context.PlantName</td>
<td>@context.Address</td>
<td>
<button class="btn btn-primary" type="button" @onclick="(() => ShowModal(context.PlantId))">Edit</button>
</td>
</GridRow>
</Grid>
}

当你想在某个地方刷新你的网格时；

showGrid = false;
showGrid = true;

只是个主意。