- Create HTTP GET endpoint in API Project.
- Consume The GET API In Blazor WebAssembly Application
Create A Service File And Implement Read Logic In API Project:
Let's create a folder like 'Services' in our API project.
Now add the 'ISuperHeroesService.cs' interface in the 'Services' folder.
API_Project/Services/ISuperHeroesService.cs:
using Dot7.Api.Data.Entities; namespace Dot7.Api.Services { public interface ISuperHeroesService { Task<List<SuperHeroes>> GetSuperHeroesAsync(); } }
- In the 'ISuperHeroesService' interface defined method definition like 'GetSuperHeroesAsync()'.
API_Project/Services/SuperHeroesService.cs:
using Dot7.Api.Data.Entities; using Microsoft.EntityFrameworkCore; namespace Dot7.Api.Services { public class SuperHeroesService: ISuperHeroesService { private readonly MyWorldDbContext _myWorldDbContext; public SuperHeroesService(MyWorldDbContext myWorldDbContext) { _myWorldDbContext = myWorldDbContext; } public async Task<List<SuperHeroes>> GetSuperHeroesAsync() { return await _myWorldDbContext.SuperHeroes.ToListAsync(); } } }
- (Line: 7-11) Injected the 'MyWorldDbContext'.
- (Line: 13-16) In 'GetSuperHeroesAsync' method we fetch the collection of records from the database.
API_Project/Program.cs:
builder.Services.AddScoped<ISuperHeroesService, SuperHeroesService>();
Create A 'SuperHeroesController' And Create A HTTP GET Endpoint:
Let's create a new controller like 'SuperHeroesController.cs'.
API_Project/Controllers/SuperHeroesController.cs:
using Dot7.Api.Services; using Microsoft.AspNetCore.Mvc; namespace Dot7.Api.Controllers { [Route("api/[controller]")] [ApiController] public class SuperHeroesController : ControllerBase { private readonly ISuperHeroesService _superHeroesService; public SuperHeroesController(ISuperHeroesService superHeroesService) { _superHeroesService = superHeroesService; } [HttpGet] public async Task<IActionResult> GetAsync() { var results = await _superHeroesService.GetSuperHeroesAsync(); return Ok(results); } } }
- (Line: 10-14) Injected the 'ISuperHeroesService'.
- (Line: 16-21) The 'HttpGet' endpoint fetches the collection of data from the database.
Create 'SuperHeroesVm' In Blazor WebAssemply App:
First, let's create a folder like 'ViewModels' in Blazor App.
Now add the 'SuperHeroesVm.cs' in 'ViewModels' folder. Here 'SuperHeroesVm.cs' is our API response model.
BlazorWasm_Project/ViewModels/SuperHeroesVM.cs:
namespace Dot7.BlazorCrud.UI.ViewModels { public class SuperHeroesVM { public int Id { get; set; } public string? Name { get; set; } public string? Franchise { get; set; } public string? Gender { get; set; } public string? ImageURL { get; set; } } }Now add the namespace in '_Import.razor'
BlazorWasm_Project/_Import.razor:
@using Dot7.BlazorCrud.UI.ViewModels
Register API Domain In Blazor WebAssembly App:
Now register the API domain in 'Program.cs'.
BlazorWasm_Project/Program.cs:
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:7282") });
Create A 'AllSuperHeroes.razor' Component:
First, let's create a new folder like 'SuperHeroes' in 'Pages' folder.
Now add a new component like 'AllSuperHeroes.razor' in the 'SuperHeroes' folder.
BlazorWasm_Projects/Pages/SuperHeroes/AllSuperHeroes.razor:(HTML Part)
@page "/superheroes/home" @inject HttpClient Http <MudContainer Class="ma-4 d-flex"> @foreach (var item in allHeroes) { <MudCard Width="250px;" Class="mr-2"> <MudCardHeader> <CardHeaderAvatar> <MudAvatar Color="Color.Secondary">@item.Id</MudAvatar> </CardHeaderAvatar> <CardHeaderContent> <MudText Typo="Typo.body1">@item.Name</MudText> </CardHeaderContent> </MudCardHeader> <MudCardMedia Image="@(item.ImageURL)" Height="250" /> <MudCardContent> <MudText Typo="Typo.body2">Franchise - @item.Franchise</MudText> <MudText Typo="Typo.body2">Gender - @item.Gender</MudText> </MudCardContent> </MudCard> } </MudContainer>
- (Line: 2) The '@page' directive to configure route for blazor component.
- (Line: 3) Injected the 'HttpClient' instance.
- (Line: 5-26) Looping our API response to the MudBlazor card component.
@code { private List<SuperHeroesVM> allHeroes = new List<SuperHeroesVM>(); protected override async Task OnInitializedAsync() { await GetAllSuperHeroesAsync(); } private async Task GetAllSuperHeroesAsync() { allHeroes = await Http.GetFromJsonAsync<List<SuperHeroesVM>>("/api/superheroes"); } }
- (Line: 2) Here initialized the instance of 'SuperHeroesVm' collection.
- (Line: 4-7) The 'OnInitializedAsync' method is the blazor life cycle method.
- (Line: 9-12) The 'GetAllSuperHeroesAsync' method contains logic to invoke the HTTP GET endpoint.
Enable CORS In API Project:
Let's enable CORS in API project that allows our Blazor App to consume the API endpoint.
Program.cs:
In the next article, we will implement the Create Operation.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the.NET7 Blazor WebAssembly CRUD sample. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-2 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create API Project
Part-4 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Create Operation
Part-4 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Create Operation
Part-5 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Update Operation
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-6 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Delete Operation
Part-7 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Sorting
Part-8 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Search
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Part-9 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Implement Pagination
Comments
Post a Comment