Tech Seeker

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

In this article, we will explore CRUD operations in .Net5 Blazor WebAssembly application. This article targeting an audience like beginners of Blazor WebAssebly.  Create A .Net5 Blazor WebAssembly: Visual Studio users should have the latest version of 2019VS(Version 16.8.*) to build the .Net5 application. From Visual Studio it is pretty simple to create a Blazor WebAssebly application since VS provides users with a nice GUI for interaction. One other option to create an application is with .Net CLI commands. So one of the best IDE for .Net CLI developers is  Visual Studio Code Editor . .Net CLI Command To Create Blazor WebAssembly Project: dotnet new blazorwasm -n your_project_name Rest API: In the blazor webassembly application, displaying data, storing or updating data, or removing data is carried out by Rest API. So for in our demo application, we will consume a free rest API like 'https://jsonplaceholder.typicode.com/posts' . But there are limitations with these free r

In a form to validate values against data store or database in a blazor server application, we can achieve this by creating a custom blazor component that can be called a Custom Validator Component. Here our Validator Component is not a built component, here we make a plain class as a component by inheriting 'Microsoft.AspNetCore.Components.ComponentBase', and then we use built-in blazor form components and make it as Custom Validator Component. Our Custom Validator Components mainly built on form components like 'Microsoft.AspNetCore.Components.Forms.ValidationMessageStore' and 'Microsoft.AspNetCore.Components.Forms.EditContext'. Create A Blazor Server Application: Let's understand our topic more in-depth by making a sample on it, so let's create a Blazor Server sample application. Here my sample targeted framework is '.Net5'.Most recommended IDE's for development in Visual Studio 2019(Version 16.8.* that supports .Net5) or  Visual Studio Co

In this article, we are going to understand the authorization flow using user roles and claims in the blazor webassembly application. Create A Sample Blazor WebAssembly Application: Let's create a sample blazor webassembly application for our demo. We can use any IDE for the application development but the most recommended is Visual Studio 2019(version 16.8.*) and  Visual Studio Code . Authentication Setup: To implement authorization first user need to be authenticated. So here we will implement some fake user authentication with some roles and claims. For complete authentication, implementation checks my blogs like  Access Token  and  Refresh Token . Package Manager Install-Package Microsoft.AspNetCore.Components.Authorization -Version 5.0.1 .Net CLI dotnet add package Microsoft.AspNetCore.Components.Authorization --Version 5.0.1 A core component of blazor authentication is 'Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider', here we going to

In this article, we are going to fetch user public IP Addresses and Geolocation in the blazor webassembly application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create A Sample Blazor WebAssembly: Let's begin our demo by creating a sample Blazor WebAssembly application. For development, any type of IDE can be used but more recommended are Visual Studio 2019(Version 16.8.* latest that builds .Net5) or  Visual Studio Code . Fetch User IP Address: Now let's create a model that represents the IP Address payload. Models/IPAddress.cs: using System.Text.Json.Serialization; namespace Blwa