Tech Seeker

The main objectives of this article are: Implement HTTP Post Endpoint. In Blazor WebAssembly Create A Form Implement Insert Logic In Service Files In API Project: Let's add a method definition like 'CreateSuperHeroesAsync()' in 'ISuperHeroesService.cs' API_Project/Services/ISuperHeroesService.cs: Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes); Let's implement the 'CreateSuperHeroesAsync()' in 'SuperHeroesService.cs' API_Project/Services/SuperHeroesService.cs: public async Task<SuperHeroes> CreateSuperHeroesAsync(SuperHeroes newSuperHeroes) { _myWorldDbContext.SuperHeroes.Add(newSuperHeroes); await _myWorldDbContext.SaveChangesAsync(); return newSuperHeroes; } Here we save the new item into the database. Create HTTP Post Endpoint In API Project: Let's add a new action method i.e HTTP Post endpoint in our 'SuperHeroesController.cs' API_Project/Controllers/SuperHeroesController.cs: [HttpPos

In this article, we are to implement CRUD operation in Blazor WebAssembly(.NET6) by consuming GraphQL endpoint with help of  'Strawberry Shake'(Graphql Client Library). GraphQL Endpoint: In this demo, we have to consume the GraphQL endpoint from our Blazor WebAssembly application. Source code for .Net6 GraphQL CRUD operations. The article explains about creating .NET 6 GraphQL CRUD operations The video explains about creating .NET6 GraphQL CRUD operations Strawberry Shake: Strawberry shake is an open-source GraphQL client that is compliant with the newest GraphQL draft spec, which makes Strawberry Shake compatible with all GraphQL compliant servers like Hot Chocolate, Apollo Server, GraphQL Java, and various other servers out there. Strawberry Shake will generate the schema of GraphQL Server which will help to invoke the GraphQL endpoint very easily. Strawberry Shake CLI Tool: Strawberry shake CLI needs to be configured because CLI will help us to generate the GraphQL clie

In this article, we are going to implement pagination in the Blazor WebAssembly application using the MudBlazor UI table component. Pagination API: To accomplish our demo we need an API endpoint that contains a payload to support the pagination. If you have good knowledge of API pagination you can create your own API or else I have already created a blog on API pagination, so  click here  to know more. Create A Blazor WebAssembly Project: Let's begin our coding by creating a sample Blazor WebAssembly project. Steps To Configure MudBlazor: Let's install the 'MudBlazor' NuGet into our sample project. Now add the MudBlazor namespace into the '_Import.razor' file. _Import.razor: @using MudBlazor Add the below CSS files inside of the head tag of the 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content

In this article, using the MudBlazor UI component we will implement a CRUD sample in Blazor WebAssembly. Create A Blazor WebAssembly Sample Application: To accomplish our goal let's create a sample Blazor WebAssembly application. Install MudBlazor Package: Package Manager: Install-Package MudBlazor -Version 5.0.7 .Net CLI dotnet add package MudBlazor --version 5.0.7 MudBlazor Setup: Add Mudblazor namespace into the '_Imports.razor' _Imports.razor: @using MudBlazor Add the below CSS files inside of the head tag in 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> Remove the CSS files like 'bootstrap.min.css' and '{your_applicationname}.style.css'. Add MudBlazor javascript file in 'index.html' just above the closing bod