Tech Seeker

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 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

InputRadioGroup built-in razor component was introduced from .Net5. This built-in component can be used either in the Blazor Server application or the Blazor WebAssembly application. Create A Blazor WebAssembly Sample Application: Let's create a sample Blazor WebAssembly application in which we are going to implement some samples to understand the InputRadioGroup component. For application development can begin with any type of IDE but the most recommended are Visual Studio 2019(Version 16.8.* only latest can build the .net5 application) or  Visual Studio Code . InputRadioGroup Implementation: Now let's implement a sample to understand the InputRadioGroup. Let's create a form model for binding values. Models/Vehicle.cs: namespace Radio_Group_Sample.Models { public class Vehicle { public string Name { get; set; } } } Here we created a simple model that will be used by the blazor form component 'EditForm'. The property 'Name' will be used by the I

In this article, we are going to implement Localization in the Blazor WebAssembly sample application. The translation to a specific region or country or culture or local can be called as Localization. The websites with Localization can reach a wider range of audiences. Create A Sample Blazor WebAssembly App: Let's start coding by creating a sample blazor webassembly application(I'm using .Net5 Blazor). For development, IDE can be chosen based on own preferences but the most recommended IDE's are Visual Studio 2019(The latest version that supports .Net5) and  Visual Studio Code . Install Supporting Package: Package Manager: Install-Package Microsoft.Extensions.Localization .Net CLI: dotnet add package Microsoft.Extensions.Localization Register AddLocalization Services: To get the full support of Localization we need to register the 'AddLocalization' service. Program.cs: builder.Services.AddLocalization(options => { options.ResourcesPath = "Resources&

The 'Virtualize' pre-build Blazor component was shipped from .Net5 framework.  The concept behind making a virtualization component is to render the HTML content within the are of the viewport(i.e, visible area on a page).  The most useful case to use this 'Virtualize' component is to display huge table content of data, by using this component renders the huge data as parts of data based on visible area dynamically.  This dynamic loading data rendering will happen on scroll-up and scroll-down event implicitly nothing to worry about by us.  This makes our website UI more user-friendly to render huge data without any UI delay. Create A Sample WebAssembly Application: The virtualization component can be used either in Blazor Server or Blazor WebAssembly applications. Here we are going to create a sample application using the Blazor WebAssembly template. For developing our sample application we can use any IDE of your choice but the most recommended are Visual Studio 2019(S