Tech Seeker

Posts

Showing posts with the label Blazor WebAssembly

Part-2 Blazor Server Cookie Authentication

In this article, we are going to implement User Registration logic in the Blazor Server application. In this part of the article, we have to accomplish our targets like: User Registration Form. Password Hashing User Registration Logic. Click here for part-1 Create Asp.Net Core Areas Folder: We are going to create Razor Pages for our User Registration, so let store them in the 'Areas' folder. So let's create 'Areas' folders and also add the 'Layout' template and a few other additional configurations. Now let's create folders into our application like 'Areas\Identity\Pages\Account' , 'Areas\Identity\Pages\Shared' . Let's create a new layout for the pages inside of the 'Areas' folder. Let's create the layout file '_Layout.cshtml'. Areas/Identity/Pages/Shared/_Layout.cshtml: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="vie

A Demo On File Downloading In Blazor WebAssembly Application[.NET 6]

In this article, we are going to do a demo on file downloading in the blazor webassembly application. Create A .Net6 Blazor WebAssembly Application: Let's create a .Net6 Blazor WebAssembly sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor. CLI command dotnet new blazorwasm -o Your_Project_Name Install And Configure HttpClient Instance: Install the 'Microsoft.Extensions.Http' NuGet. Package Manager Install-Package Microsoft.Extensions.Http -Version 6.0.0 CLI command dotnet add package Microsoft.Extensions.Http --version 6.0.0 Now register the 'AddHttpClient' in the 'Program.cs'. Program.cs: builder.Services.AddHttpClient(); Implement File Downloading Logic: Let's implement our sample in the 'Index.razor' page component. First, let&

Built-in DynamicComponent Blazor Component[.NET6 Feature]

In this article, we will understand about a .NET6 feature that is built-in 'DynamicComponent' in the Blazor application. DynamicComponent: In Blazor from .NET6 introduced a built-in component that is 'DynamicComponent' for dynamic rendering of the razor components. So using DynamicComponent we can render different types of components very easily without using any conditional logic. Also can pass appropriate parameters to their respective components on rendering dynamically. Create A .NET6 Blazor WebAssembly Application: Let's create a .Net6 Blazor WebAssembly sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor. CLI command dotnet new blazorwasm -o Your_Project_Name Example Using DynicComponent: By default on creating project we have 3 components like

SupplyParameterFromQuery Attribute To Read Query Parameters In Blazor Application[.NET6 Feature]

In this article, we will know about .NET6 feature like 'SupplyParameterFromQuery' attribute to access the query parameters in the blazor application. SupplyParameterFromQuery Attribute: A routable component to capture the query parameter values into the component parameter, then we have to decorate the 'SupplyParameterFromQuery' attribute along with the 'Parameter' attribute on top of the component parameter. On decorating 'SupplyParameterFromQuery', then the component parameters can read the query parameters of type 'bool', 'datetime', 'decimal', 'float', 'guid', 'int', 'long', 'string'. It also read the array type of query parameters as well. If component parameter name and query parameter name then there is no need for explicit mapping to read the values. If the component parameter name and query parameter name are different then we have to specify the query parameter in an attribute lik

Blazor App Handling Errors Using Error Boundaries Component[.NET6 Feature]

In this article, we will know about .NET6 feature that is in Blazor application handling error using the Error Boundaries. ErrorBoundary Component: ErrorBoundary component is an in-built blazor component, that will handle the unhandled error at the UI level. So with the ErrorBoundary component, we can handle the errors at a particular section or area of the page so that the remaining page of the application runs smoothly without any issue. ErrorBoundary is a wrapper component so we can use like: ErrorBoundary can be wrapped around any Blazor component, so it will display content if no error, but if any child component throws an error then it will show the error message. ErrorBoundary can be wrapped around '@Body' element in 'shared/MainLaout.razor', so it means its scope is global(means page-level error handling), so any error occurs inside of any component of the page then the entire page will show an error message. Use ErrorBoundary At Components Level: Let's

Blazor Binding Support Multiple Options For - 'Select' HTML Element Or 'InpuSelect' Blazor Component[.NET 6.0 Feature]

In this article, we will explore the blazor application binding support multiple options for the 'Select' or 'InputSelect' which is .NET 6.0 feature. Create A .Net6 Blazor WebAssembly Application: To implement our demo let's create a .NET6 Blazor WebAssembly application. To work with .Net6 application's most recommended editors are 'Visual Studio 2022', 'Visual Studio Editor(.NET CLI commands)'. For this demo, I'm using Visual Studio Editor(Using .NET CLI command). CLI command For Minimal API Project dotnet new blazorwasm -o Your_Project_Name Multiple Option Selection For HTML Select Element: Now let's develop a small sample for the multiple option selection of the HTML 'Select' element. To enable multiple options selection for the 'Select' element key configurations are like 'Select' element should be decorated with the 'multiple' HTML attribute and its binding property should be an array type. L

Blazor WebAssembly File Upload Using MudBlazor UI Components

In this article, we are going to implement a Blazor WebAssembly application file upload using MudBlazor UI components. Create A Sample Blazor WebAssembly Application: Let's create a sample Blazor WebAssembly application to accomplish our demo on file uploading. Initial MudBlazor Setup: Install the 'MudBlazor' library package. 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" /> Now comment the 'bootstrap.min.css' and '{your_applicationname}.styles.css' links in the head tag. Add MudBlazor javascript file in 'index.html' just above the closing body tag. wwwroot/index.html: <script

A Demo On MudBlazor Table Pagination In Blazor WebAssembly

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