Blazor-重新加载栅格组件

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

这是我的密码：

Grid.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);
    } } 

@typeparam TableItem
@网格头
@foreach（ItemList中的变量项）
{
@网格行（项目）}
SetPagerSize（“back”））>«；
导航网页（“上一页”）>Prev
@对于（int i=起始页；i
@当前页
}
导航网页（“下一页”））>next
SetPagerSize（“转发”））>»；
第@curPage页，共@totalPages页
@函数{int totalPages；
int curPage；
int pagerSize；
国际起始页；
内尾页；
/// 
///BlazorGrid的标题。
/// 
[参数]
公共RenderFragment GridHeader{get；set；}
/// 
///BlazorGrid的行。
/// 
[参数]
公共呈现片段网格行{get；set；}
/// 
///提供给BlazorGrid的项目列表。
/// 
[参数]
公共IEnumerable项{get；set；}
/// 
///BlazorGrid每页的大小。这是必填字段。
/// 
[参数]
公共int PageSize{get；set；}
公共IEnumerable项列表{get；set；}
受保护的重写异步任务OnInitializedAsync（）
{
pagerSize=5；
curPage=1；
ItemList=Items.Skip（（curPage-1）*PageSize）。Take（PageSize）；
totalPages=（int）Math.天花（Items.Count（）/（decimal）PageSize）；
设置页面大小（“转发”）；
}
公共无效更新列表（int currentPage）
{
ItemList=Items.Skip（（当前页-1）*页面大小）。Take（页面大小）；
curPage=currentPage；
此.StateHasChanged（）；
}
公共void SetPagerSize（字符串方向）
{
如果（方向==“前进”&&endPage<总页数）
{
起始页=结束页+1；
如果（endPage+pagerSize1）
{
endPage=起始页-1；
开始页面=开始页面-页面化；
}
}
公共无效导航页（字符串方向）
{
如果（方向=“下一步”）
{
如果（当前页面<总页面）
{
如果（curPage==endPage）
{
设置页面大小（“转发”）；
}
curPage+=1；
}
}
否则如果（方向=“上一个”）
{
如果（当前页面>1）
{
如果（curPage==起始页）
{
设置页面大小（“返回”）；
}
curPage-=1；
}
}
更新列表（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();
    }
}

@page/“
@继承PlantMasterBase
植物
成功
@如果（AlertMode==“添加”）
{
植物已成功添加。。。
}
其他的
{
工厂已成功更新。。。
}
工厂名称：
地址:
添加
@if（Plants==null）
{
}
其他的
{
植物名
地址
行动
@context.PlantName
@上下文地址
编辑
}
@代码{
公共IEnumerable植物{get；set；}
受保护的重写异步任务OnInitializedAsync（）
{
植物=等待获取植物（）；
}
受保护的异步任务添加\单击（）
{
等待植物库。添加植物（植物）；
植物=等待获取植物（）；
AlertMessage.Show（）；
AlertMode=“添加”；
StateHasChanged（）；
}
}

---

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

第三次尝试时，请将此添加到网格的@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>
}

与

---

看看它是如何工作的。

第三次尝试时，将此添加到网格的@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>
}

与

看看它是如何工作的。

使用“this.StateHasChanged（）；”要重新加载Blazor UI

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

使用“this.StateHasChanged（）；”要重新加载Blazor UI

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

只是个主意

---

只是一个想法。

Task.Run（）和InvokeAsyn（）相互抵消，并始终避免

async void

。第二部分不是很好的建议。它不是重新加载。我们使用它手动刷新用户界面。你是正确的。如果我们在同一个页面中使用相同的组件，它就可以正常工作。但我的场景是，我创建了Grid.razor作为单独的组件，并在Blazor UI.Task.Run（）和InvokeAsyn（）中使用该组件，以相互抵消，并始终避免

async void

。第二部分不是很好的建议。它不是重新加载。我们使用它手动刷新用户界面。你是正确的。如果我们在同一个页面中使用相同的组件，它就可以正常工作。但我的情况是，我创建了Grid.razor作为单独的组件，并在Blazor UI中使用了该组件。好吧，不管怎样，保留更改。感谢您的快速响应Henk Holterman。但这也不起作用@key我希望你使用了一个小的

k

，如果我们同时使用，而不是重新加载伟大的Henk Holterman。OnParametersset工作正常。因为页面大小是

showGrid = false;
showGrid = true;