Skip to main content

Posts

Showing posts with the label Blazor

Different HttpClient Techniques To Consume API Call's In Blazor WebAssembly

  In .Net Core applications, HttpClient instance should be managed by HttpClienFactory with the support of Dependency Injection(DI). Blazor Assembly applications also have those capabilities to use the  HttpClient object in an efficient manner. The techniques provided by the .Net  framework are: Register HttpClient Object Explicitly In DI(Dependency Injection Service) Named Client Type Client HttpRequestMessage Object In this article, we are going to implement Get API call with the above techniques mentioned using a sample Blazor WebAssembly application. Create Blazor WebAssembly Sample App: To follow up on the steps let's begin by creating a sample Blazor WebAssembly application. Use any of the editors of your choice most recommended are like VisualStudio 2019(Support .Net 3.0 plus) or  Visual Studio Code . Third-Party Rest API: To show sample implementation of the Blazor WebAssembly application here I'm going to use external free Rest API for our demos - "https://jsonpl

Split HTML And C# Code In Blazor Using Either Partial Class Or ComponentBase Class

By default Blazor component file consists of HTML code and C# code under the single file. For better coding standards we can split HTML code and C# code to separate files using concepts like: Partial Class ComponentBase Class Create Sample Blazor Server Application: Blazor Single Page Application comes with two types of templates like  (1) Blazor Server,  (2) Blazor Web Assembly . Let's create a Blazor Server templated sample application to understand to split the *.razor(Blazor file extension) files.  Using Visual Studio 2019 using a rich user interface we can create Blazor Templated application very easily. But for this sample, I'm using .Net Core CLI(Command Line Interface) with Visual Studio Code IDE.   Click to know how to use Visual Studio Code Editor for .Net Core applications . .Net Core Blazor Server CLI Command:- dotnet new BlazorServer -n Your_Application_Name Blazor project preview:- Open a command prompt whose path needs to be pointed to the  Startup.cs file

Blazor Server Form Validation

Introduction: Blazor Server Form validation can be achieved by using the 'System.ComponentModel.DataAnnotations' . Blazor Sever is a component-based application, and it provides some default key components for validation like 'EditForm' , 'DataAnnotationsValidator' , 'ValidationSummary' , etc. Overview On Validation Process: Blazor Server opts for two kinds of validation like: Validation Type 1 - Field Validation, like when the user focuses out of a particular field of a form(eg like user types something and then clicks cursor out of text box), then 'DataAnnotationValidator' component report the validation error message for the particular field by sending the field data to the server for validation. Validation Type 2 - On Submitting the form, the form gets validated by the Model level where the 'DataAnnotationValidator' helps to show error messages report from server to the respective fields on UI. Create Blazor Se

Blazor Server CRUD Operations

Introduction: Blazor Server is a web framework to develop server-side single-page applications. Blazor is made up of components with the combinations on C#, Html, CSS.  Blazor Server is production-ready from the .Net Core 3.0.  Blazor Server Working Mechanism: Blazor Server is a very light-weight web development framework.  In Blazor Server, not all code gets downloaded to the client browsers. Blazor Server made of components these components can be a block of code or page with respective navigation.  Blazor server application communicates with the server with a SignalR background connection which is inbuilt functionality. Application click,  form submission, change events, application page navigation every operation is carried out by the SignalR connection by communicating with the server.  Blazor updates the Html DOM very gently on every data update without any overhead. Blazor Server application maintains a nice intelligent tree structure to update the required inform