ASP.NET 使用 ReactJS 的 Web API 无法从查询中获取页面

Question

我有一个带有 ASP.NET Web API 的 React 应用程序，我想从查询字符串中获取页码并进行一些逻辑处理，但是当我转到下一页时，控制器中的 page 变量始终为 0，无论我是否具有 FromQuery 属性。

这是我的控制器：

[HttpGet]
public async Task<JsonResult> AllContacts([FromQuery(Name = "page")] int page)
{
    var result = await _contactsService.GetAllContactsAsync(page);
    return new JsonResult(result);
}

这里我导航到页面，这个功能在联系人组件中，它描述了我如何在 App.js:

中路由到他

const handlePaging = (params) => {
    navigate(`/contacts?page=${params + 1}`);
    getContacts();
};

这里是 getContacts 函数的实现：

const getContacts = async () => {
    const request = await requester('https://localhost:7082/api/contacts', methods.get);

    const response = await request.json();

    setContacts(response);
};

这是我的 App.js:

function App() {
return (
<BrowserRouter>
  <div className="app">
    <Routes>
      <Route path='/' element={<Contact />} />
      <Route path='/details/:id' element={<Details />} />
    </Routes>
  </div>
</BrowserRouter>
);
}

这是 DataGrid：

<DataGrid
                id={() => searchTerm === '' ? array.map((contact) => contact.id) : searchedContacts.map((contact) => contact.id)}
                rows={searchTerm === '' ? array : searchedContacts}
                sx={{
                    '.MuiDataGrid-columnHeaderTitle': {
                        fontWeight: 'bold',
                    },
                    '.MuiDataGrid-columnHeaders': {
                        backgroundColor: '#d3d3d3'
                    },
                    '.MuiDataGrid-row': {
                        maxHeight: '51px !important',
                        minHeight: '51px !important'
                    },
                    '.MuiDataGrid-virtualScroller': {
                        overflow: 'hidden'
                    }
                }}
                onPageChange={handlePaging}
                columns={columns}
                pageSize={10}
                rowsPerPageOptions={[10]}
                checkboxSelection
                onRowDoubleClick={e => navigateToDetails(e)}
                onSelectionModelChange={e => setEntry(e)}
            />

请帮助我，我将不胜感激。

Answer 1

您对 API 的请求实际上没有 page 查询参数，因此，控制器方法的 identically-named page 参数的值将始终具有默认值即。在这种情况下为 0。

ASP.NET 使用 ReactJS 的 Web API 无法从查询中获取页面

ASP.NET Web API with ReactJS can't get page from query

asp.net-web-api

reactjs