Tech Seeker

The main objectives of this article are: Generating JWT Access Token  Creating Login API Endpoint. Creating The Login Form In Blazor WebAssembly Application Create 'LoginVm' As A Form Model In The BlazorWasm Application: Let's create a 'LoginVm' as a form model in the Blazor WebAssembly application. BlazorWasm_Project/ViewModels/Accounts/LoginVm.cs: namespace JWT.Auth.BlazorUI.ViewModels.Account { public class LoginVm { public string Email { get; set; } public string Password { get; set; } } } Create 'LoginValidationVm' Validator For 'LoginVm': Let's create the validation model for 'LoginVm' like 'LoginValidationVm' in the Blazor application. BlazorWasm_Project/ViewModels/Accounts/LoginValidationVm: using FluentValidation; namespace JWT.Auth.BlazorUI.ViewModels.Account { public class LoginValidationVm:AbstractValidator<LoginVm> { public LoginValidationVm() {

The main objectives of this article are: In The API Project, We Will Create A User Registration Endpoint. In Blazor WebAssembly Application We Will Create A User Registration Form. User Table SQL Script: Run the below script to create the 'User' table. CREATE TABLE [dbo].[User]( [Id] INT IDENTITY(1000,1) NOT NULL, [FirstName] VARCHAR(300) NULL, [LastName] VARCHAR(300) NULL, [Email] VARCHAR(300) NULL, [Password] VARCHAR(500) NULL CONSTRAINT PK_User PRIMARY KEY (Id) ) Create A .NET7 Blazor WebAssembly Application: Let's create a Blazor WebAssembly application using Visual Studio 2022. (Step 1) (Step 2) (Step 3) Setup MudBlazor: Install the MudBlazor library. Add the MudBlazor namespace in '_Import.razor'. @using MudBlazor Add the below CSS into the closing head tag in 'wwwroot/index.html'. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="

The main objective of the article is: Implements Pagination. Implement Pagination In API Project: Let's change our HTTP GET Endpoint where we have to fetch the total number of records in the API response. Let's create a new API response like 'SuperHeroesContainerDto'. API_Project/Dtos/SuperHeroesContainerDto.cs: namespace Dot7.Api.Dtos { public class SuperHeroesContainerDto { public int TotalCount { get; set; } public List<SuperHeroesDto> SuperHeroes { get; set; } } public class SuperHeroesDto { 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; } } } Here we have properties like 'TotalCount'  and a collection of  'SuperHeroesDto'. Install the Automapper NuGet package. Now create an auto mapper profiler class like 'AppMapperProfile.cs' in

The main objective of this article is: Implement Search Implement Search Logic In API Project: Let's add a new query property in 'SuperHeroFilterDto'. API_Project/Dtos/SuperHeroFilterDto.cs: public class SuperHeroFiltersDto { public string? Sort { get; set; } public string? OrderBy { get; set; } public string? Search { get; set; } } In 'SuperHeroesService' let's add the filter logic. API_Project/Services/SuperHeroesService.cs: public async Task<List<SuperHeroes>> GetSuperHeroesAsync(SuperHeroFiltersDto filters) { var superHereos = _myWorldDbContext.SuperHeroes.AsQueryable(); if(!string.IsNullOrEmpty(filters.Sort) && !string.IsNullOrEmpty(filters.OrderBy)) { if(filters.Sort.ToLower() == "id" && filters.OrderBy.ToLower() == "asc") { superHereos = superHereos.OrderBy(_ => _.Id); } else if (filters.Sort.ToLower() == "id" && filters.OrderBy.ToLower() == "desc") {