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

Question

I have a React app with ASP.NET Web API, I want to get page number from query string and make some logic but when I go to next page, the page variable in my controller is always 0 no matter that I have FromQuery attribute.

This is my controller:

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

Here I navigate to page, this function is in Contact component which is described how I route to him in App.js:

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

Here is implementation of getContacts function:

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

    const response = await request.json();

    setContacts(response);
};

This is my App.js:

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

And this is the 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)}
            />

Please help me, I'll be grateful.

Please share the implementation of the getContacts function. — Riwen
– Riwen, Commented May 11, 2022 at 8:17

Riwen · Accepted Answer · 2022-05-11 08:52:23Z

1

Your request to the API doesn't actually have a page query parameter, thus, the value of the identically-named page argument of controller method will always have the default value ie. 0 in this case.

answered May 11, 2022 at 8:52

Riwen

5,2702 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Данаил Добрев Over a year ago

Thanks you a lot! Would you tell me how to construct my url in getContacts?

Riwen Over a year ago

You'd need to pass the page number as an argument to getContacts, say as page, then like https://localhost:7082/api/contacts?page=${page}. Make sure you use a backtick (`) for template literals to work.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related