Posts

Blazor WebAssembly: Using C3.js to Create Charts in Blazor WebAssembly Application

Image
In this tutorial, we will see the way of creating Charts in Blazor WebAssembly by integrating with C3.js in it. Please note that, the implementation is completely my thought which I have suggested to one of my client. In this tutorial, the implementation is done g JavaScript interoperability. One of the great features of the Blazor Application is that, it has an interoperability with JavaScript. I have already written an article on JavaScript interoperability on my blog. You can read steps of JavaScript interoperability from  here .  In Blazor Application, there is no default support for Charts are available. So to provide charts in Blazor some other alternatives must be planned. Recently, when I was  discussing about the Blazor WebAssembly to one of my customer, he raised query on creating Charts. I demoed him and then I thought to write a small tutorial on it.  C3.js C3.js is JavaScript library based on D3.js. This enables deeper integration of charts into the application. This is a

ASP.NET Core 5 and Blazor Web Assembly Apps: Token Based Authentication in ASP.NET Core 5 APIs and Authenticating it using Blazor WebAssembly Apps

Image
     Recently, while conducting training in .NET 5 and Blazor, my students have asked me to show the implementation of JSON Web Token based Authentication for ASP.NET Core 5 API and accessing this secure API using Blazor WebAssembly client apps. After the explanation and demo, I thought to write a tutorial on it. I have already posted an article on the ASP.NET Core 3.1 JSON Web Token with concept of JSON Web Token and implementation. You can read the article form this post . For all the new readers, I have provided all steps of implementation Token based authentication in ASP.NET Core 5 API and accessing the API in Blazor WebAssembly application. The figure 1 explains all steps of the implementation Figure 1: The Blazor WebAssembly Application accessing Token Based Secure API developed using ASP.NET Core 5     As shown in the figure 1, we will be having Identity database which will store Identity Users, Roles, etc. The application database will store application data e.g. Products Info

Blazor WebAssembly: Uploading Image to ASP.NET Core 5 API from Blazor WebAssembly Project

Image
In this tutorial, we will see the mechanism of uploading an image from Blazor WebAssembly client application to ASP.NET Core 5 API. The file uploading is one of the most demanded features by the developer community. In the software applications, e.g. data collection application, social media types applications, etc. the image uploading is required frequently. In the modern web applications developed using ASP.NET Core 5, we can implement this using  the  IFormFile interface.   This interface   can be used to upload the file using HTTP Request. This interface represents a file sent with the HttpRequest. This interface is available in the Microsoft.AspNetCore.Http.Features assembly and its Microsoft.AspNetCore.Http namespace. The IFromFile supports Buffering that reads the entire file. This file is further processed and saved on the server.  The client application will be used as the Blazor WebAssembly application. This executes in browser by having the .NET runtime and project dependenc

ASP.NET Core 5.0: Create API with Swagger(OpenAPI) Specifications and Consuming it in Blazor Web Assembly Project using Connected Service

Image
In this tutorial, we will see implementation of ASP.NET Core 5.0 API creation using Swagger/OpenAPI specifications. We will also see the mechanism of consuming the API using Managed Proxy class in Blazor WebAssembly client application with the help of Visual Studio Connected Services. ASP.NET Core 5.0, have come up with the support for OpenAPI specifications for APIs. This is a language-agnostic specification for describing REST APIs. This description helps client applications to understand the capabilities of REST APIs. Main advantage of the OpenAPI is to  Minimize the amount of work needed to connect the REST APIs in decoupled way and to  Reduce the time required to document the service. The OpenAPI makes sure that action methods from the APIs are exposed in developer friendly manner.  The Connected Service is used to generate HTTP API clients so that the API can be easily consumed (remember WCF Service Proxy classes). This makes it easy to access APIs using the managed client applic