Tech Seeker

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

In this article, we are going to explore and implement the usage of a refresh token in our Blazor WebAssembly. In Part 1 we have explored complete guidance for implementing authentication in the Blazor WebAssembly application from scratch. Store Refresh Token In-Browser LocalStorage: If we recall  Part1 , we have stored our access token in the browser localStorage, similarly, we need to store our refresh token in the browser localStorage. Now update the 'LoginAsync' method in the AccountService file to save the refresh token. Services/AccountService: public async Task<bool> LoginAsync(LoginModel model) { var response = await _httpClient.PostAsJsonAsync<LoginModel>("/account/login-token", model); if (!response.IsSuccessStatusCode) { return false; } AuthResponse authData = await response.Content.ReadFromJsonAsync<AuthResponse>(); await _localStorageService.SetItemAsync("token", authData.Token); await _localStorageService.SetIt

In this article, we are going to explore and implement custom authentication from the scratch. In this sample, we will use JWT authentication for user authentication. Main Building Blocks Of Blazor WebAssembly Authentication: The core concepts of blazor webassembly authentication are: AuthenticationStateProvider Service AuthorizeView Component Task<AuthenticationState> Cascading Property CascadingAuthenticationState Component AuthorizeRouteView Component AuthenticationStateProvider Service - this provider holds the authentication information about the login user. The 'GetAuthenticationStateAsync()' method in the Authentication state provider returns user AuthenticationState. The 'NotifyAuthenticationStateChaged()' to notify the latest user information within the components which using this AuthenticationStateProvider. AuthorizeView Component - displays different content depending on the user authorization state. This component uses the AuthenticationStateProvider

In this article, we are going to explore file uploading in the Blazor WebAssembly application. From .Net5 onwards Blazor Assembly comes with an inbuilt file rendering blazor component like 'InputFile' Component. Overview On InputFile Component: InputFile blazor component renders an input field of type 'file' which by default supports single file upload. To support multiple file selection we need to add an attribute 'multiple' to the Html tag of the InputFile blazor component. InputFile blazor component provides an event called 'OnChange'. This event gets invoked on every file selection. This 'OnChange' event has to be configured with a callback method in our blazor code block. The callback method receives an argument of type 'InputFileChangeEventsArgs'. This 'InputFileChangeEventsArgs' captures all images and it information. This argument helps to read the stream of files. Create A Sample Blazor WebAssembly: Let's understand t