Blazor父子组件分页问题求助：点击Next按钮无响应

问题根源分析 #

1. 页面未监听分页变更事件：AdminToolTable组件的OnCurrentPageValueChanged事件未在页面中绑定，导致分页切换时页面不会触发API请求。
2. 错误使用[Parameter]属性：页面中的CurrentPage、PageSize、TotalPages并非路由参数，却标记为[Parameter]，会导致Blazor框架对这些值的绑定逻辑异常，无法正常更新。
3. 组件间状态同步缺失：分页变更时，页面未更新自身的CurrentPage值并触发数据重新加载。

分步修复代码 #

1. 修复页面逻辑代码（Index.razor.cs） #

移除不必要的[Parameter]标记，新增分页变更处理方法：

using Microsoft.AspNetCore.Components;
using SFA.AdminTool.BlazorUI.Shared.Models.ApiRequestObjects.ImageRecognition.NplProducts;
using SFA.AdminTool.BlazorUI.Shared.Models.ViewModels.ImageRecognition.NplProducts;
using System.Net.Http.Json;

namespace SFA.AdminTool.BlazorUI.Client.Pages.ImageRecognition.NplProducts
{
    public partial class Index
    {
        public List<NplProductVM> NplProducts { get; set; } = new();

        [Inject]
        public HttpClient HttpClient { get; set; }

        // 移除[Parameter]，改为页面内部维护的状态字段
        public int CurrentPage { get; set; } = 1;
        public int PageSize { get; set; } = 1;
        public int TotalPages { get; set; } = 1;


        protected override async Task OnInitializedAsync()
        {
            await LoadData();
        }

        // 新增分页变更处理方法，触发数据重新加载
        private async Task HandlePageChange(int newPage)
        {
            CurrentPage = newPage;
            await LoadData();
        }

        // 封装数据加载逻辑，复用性更高
        private async Task LoadData()
        {
            var result = await GetData(this.CurrentPage, this.PageSize);

            this.NplProducts = result.Data;
            this.CurrentPage = result.CurrentPage;
            this.PageSize = result.PageSize;
            this.TotalPages = result.TotalPages;
        }

        private async Task<PaginatedResponse<List<NplProductVM>>> GetData(int currentPage, int pageSize)
        {
            var request = new NplProductsRequestPaginated(currentPage, pageSize);
            // 移除URL中多余的?request参数，Post请求参数通过请求体传递
            var response = await this.HttpClient.PostAsJsonAsync($"https://localhost:7109/api/imageRecognition/nplProducts/GetNplProducts", request);
            var data = await response.Content.ReadFromJsonAsync<PaginatedResponse<List<NplProductVM>>>();

            return data;
        }
    }
} 

2. 修复页面Razor代码（Index.razor） #

绑定AdminToolTable的分页变更事件到页面处理方法：

@page "/nplProducts"

@if (NplProducts.Count > 0)
{
    <AdminToolTable 
        Items="NplProducts" 
        CurrentPage="CurrentPage"
        PageSize="PageSize"
        TotalPages="TotalPages"
        OnCurrentPageValueChanged="HandlePageChange"> <!-- 添加事件绑定 -->
    </AdminToolTable>
}

3. 可选优化：组件双向绑定支持 #

如果希望组件使用更简洁的双向绑定语法，可修改AdminToolTable组件：

// AdminToolTable<TItem>类中修改参数定义
[Parameter]
public int CurrentPage { get; set; } = 1;

// 替换原OnCurrentPageValueChanged，使用Blazor标准双向绑定回调
[Parameter]
public EventCallback<int> CurrentPageChanged { get; set; }

private async Task HandlePageChange(int newPage)
{
    await CurrentPageChanged.InvokeAsync(newPage);
}

对应的Razor页面可简化为双向绑定：

<AdminToolTable 
    Items="NplProducts" 
    @bind-CurrentPage="CurrentPage"
    PageSize="PageSize"
    TotalPages="TotalPages">
</AdminToolTable>

额外注意事项 #

• 确保API接口能正确接收分页参数，并返回准确的TotalPages值，否则分页按钮会出现错误禁用的情况。
• 检查API请求的HTTP方法和参数传递方式是否与后端接口匹配，避免因请求格式错误导致数据无法加载。

内容的提问来源于stack exchange，提问作者Boyan Mihnev