REST API Integration

Learning objectives#

• Share DTOs between client and API
• Configure CORS for a separate client
• Consume paged results
• Read ProblemDetails validation errors

Explanation#

Put DTOs in a shared class library referenced by both projects, so a renamed property breaks the build instead of production.

If the client is hosted on a different origin, the API must allow it with CORS.

Return paged results (items + total count) instead of whole tables.

ASP.NET Core returns validation errors as ProblemDetails JSON; read it to show field messages in the UI.

Code example: Paged products from the API#

1// Shared project
2public record PagedResult<T>(IReadOnlyList<T> Items, int Total, int Page, int PageSize)
3{
4    public int TotalPages => (int)Math.Ceiling(Total / (double)PageSize);
5}
6

7// API endpoint
8app.MapGet("/api/products", async (ShopDb db, int page = 1, int pageSize = 20) =>
9{
10    var query = db.Products.AsNoTracking().OrderBy(p => p.Name);
11    var items = await query.Skip((page - 1) * pageSize).Take(pageSize)
12        .Select(p => new ProductDto(p.Id, p.Name, p.Price)).ToListAsync();
13    return new PagedResult<ProductDto>(items, await query.CountAsync(), page, pageSize);
14});
15

16// Blazor client
17var result = await http.GetFromJsonAsync<PagedResult<ProductDto>>(
quot;api/products?page={page}");

The client receives 20 products plus Total = 412, so it can render “Page 1 of 21” with next/previous buttons.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. The shared record defines the contract once.
2. The API pages in SQL with Skip/Take and returns the total.
3. The client deserialises straight into the shared type.
4. TotalPages drives the pager UI.

Real-world use case#

Common mistakes#

Best practices#

• Shared DTO library
• Page and filter on the server
• Return ProblemDetails for errors
• Version the API when contracts change

Remember this#

Practice exercise#

1var query = db.Products.AsNoTracking()
2    .Where(p => q == null || p.Name.Contains(q))
3    .OrderBy(p => p.Name);

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.