One critical feature of modern web applications is their ability to store and retrieve data on the client side. This is where local storage comes into play.

In this article, we'll explore how to leverage the power of the Blazored LocalStorage NuGet package to seamlessly integrate local storage capabilities into your Blazor applications.

Table of Contents

• Prerequisites
• Understanding Local Storage
• Introducing Blazored.LocalStorage
• Advantages of Using Blazored.LocalStorage in Blazor Applications
• How to Install Blazored.LocalStorage
• Install Using Nuget Package Manager
• Install Using the .NET CLI
• How to Use Blazored.LocalStorage
• Advanced Features and Techniques
• Conclusion

Prerequisites

Make sure you have the necessary tools installed on your computer before continuing with this guide:

• To build and update Blazor projects, you'll need Visual Studio, a feature-rich Integrated Development Environment (IDE) which you can download from the official Microsoft website here.
• The .NET SDK (Software Development Kit) has everything you need to create and execute .NET apps, and it's required for Blazor projects. Make sure your computer has the .NET SDK installed.
• Basic knowledge of C# and Blazor.

With these installed, will be ready to follow along.

Understanding Local Storage

Local storage is a key-value pair storage mechanism supported by modern web browsers. It provides a simple way to store data persistently on the user's device. Unlike session storage, which is cleared when the browser session ends, local storage remains intact even after closing the browser window.

Blazored.LocalStorage is a powerful library that simplifies working with the browser's local storage API (Application Programming Interface) within Blazor applications. It provides a convenient API for storing, retrieving, and managing data in local storage.

By abstracting away the complexities of directly interacting with the localStorage API, this package provides an intuitive and type-safe interface. It lets you focus on building feature-rich Blazor applications without worrying about the underlying storage mechanisms.

Introducing Blazored.LocalStorage

Blazored.LocalStorage is an open-source library designed to provide easy and accessible local storage management in Blazor applications. This library is compatible with both Blazor WebAssembly and Blazor Server projects. This makes it a versatile choice for Blazor developers looking to enhance their applications with persistent, client-side storage capabilities.

At its core, Blazored.LocalStorage facilitates the storage and retrieval of data in the browser's local storage, allowing data to persist across browser sessions.

This is particularly useful for storing user preferences, application state, and other data that needs to persist between page reloads without the need for a database or backend storage solution.

Advantages of Using Blazored.LocalStorage in Blazor Applications

The inclusion of Blazored.LocalStorage in Blazor applications comes with a host of benefits, including:

• Simplified State Management: By leveraging local storage, applications can maintain state more effectively across user sessions, enhancing the user experience.
• Performance Improvements: Storing data locally reduces the need for frequent server requests, leading to faster application performance and reduced server load.
• Enhanced User Experience: Preferences and application states can be preserved, meaning users do not need to reconfigure settings or lose their place in the application upon returning.
• Easy Integration: The API provided by Blazored.LocalStorage is designed to be intuitive and straightforward, ensuring that developers can integrate local storage capabilities into their applications with minimal effort.
• Cross-Session Persistence: Unlike session storage or in-memory data storage, local storage ensures that data persists across browser sessions and tab closures, providing a more consistent user experience.

How to Install Blazored.LocalStorage

Integrating Blazored.LocalStorage into your Blazor project is straightforward, with support for installation via the NuGet Package Manager or the .NET CLI (Command Line Interpreter).

Install Using the NuGet Package Manager

Using Visual Studio, you can easily add Blazored.LocalStorage by following these steps:

• Open your Blazor project in Visual Studio.
• Navigate to the “Solution Explorer”, right-click on "Dependencies", and select “Manage NuGet Packages”.

• In the NuGet Package Manager, click on the “Browse” tab and search for “Blazored.LocalStorage”.

• Find the package in the list, select it, and click “Install”.

Visual Studio will handle the rest, adding the package to your project along with any dependencies.

Install Using the .NET CLI

For those who prefer using the command line or are working within a development environment other than Visual Studio, the .NET CLI provides a simple method to add Blazored.LocalStorage:

dotnet add package Blazored.LocalStorage

Run the command above in your terminal or command prompt from the root directory of your Blazor project. The CLI will download and install Blazored.LocalStorage along with any necessary dependencies.

How to Use Blazored.LocalStorage

Let's dive into some basic examples of using Blazored.LocalStorage in a Blazor application.

How to Register Blazored.LocalStorage in your Blazor Application

We will registerBlazored.LocalStorage into the root of the application, so that it will be available to use everywhere in the application.

In the program.cs file, which is our root file, we will register the Blazored.LocalStorage service by doing the following:

builder.Services.AddBlazoredLocalStorage();

The code snippet above registers the Blazored.LocalStorage into the application. For this to work, make sure you add the code below to the top of the program.cs file:

using Blazored.LocalStorage;

The code snippet above makes sure that the Blazored.LocalStorage is being imported to be used in the file. If you've added everything correctly, your program.cs file should look like this:

using BlazorApp9.Components;
using Blazored.LocalStorage;

namespace BlazorApp9;

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.Services.AddRazorComponents()
            .AddInteractiveServerComponents();

        builder.Services.AddBlazoredLocalStorage();

        var app = builder.Build();

        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        app.UseStaticFiles();
        app.UseAntiforgery();

        app.MapRazorComponents<App>()
            .AddInteractiveServerRenderMode();

        app.Run();
    }
}

The above is the full code that should be in your program.cs file. With this, you can now use Blazored.LocalStorage anywhere in the application to store and receive data.

How to Store and Retrieve Data in Blazored.LocalStorage

Let's consider a simple scenario where we want to store and retrieve a piece of data using local storage. We'll create a Blazor page with two buttons: one to store data and another to retrieve it.

@page "/"

@inject Blazored.LocalStorage.ILocalStorageService localStorage
@rendermode RenderMode.InteractiveServer

<h3>Local Storage Example</h3>

<input @bind-value="@inputData" />

<button @onclick="StoreData">Store Data</button>
<button @onclick="RetrieveData">Retrieve Data</button>

<p>The retrieved data from the LocalStorage: @storedData </p>

@code {
    private const string dataKey = "localStorageKey";

    private string? storedData;
    private string? inputData;

    private async Task StoreData()
    {
        if(!string.IsNullOrWhiteSpace(inputData))
        {
            await localStorage.SetItemAsync(dataKey, inputData);
            inputData = "";
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await RetrieveData();
        }
    }

    private async Task RetrieveData()
    {
        storedData = await localStorage.GetItemAsync<string>(dataKey);
    }
}

In the code snippet above, the @inject Blazored.LocalStorage.ILocalStorageService localStorage injects the local storage service to interact with the browser's local storage. The @rendermode RenderMode.InteractiveServer specifies that the page should be rendered as an interactive server-side component. Without the interactive server, the page will not be interactive.

The input field binds to inputData using the @bind-value attribute, allowing users to enter data they wish to store. The dataKey is a constant variable used to store and retrieve data from local storage. The storedData and inputData variables are used to hold the data to be stored and retrieved.

The StoreData method checks to see if inputData is not empty. If not, it stores it in local storage using dataKey, and clears the input field.

OnAfterRenderAsync is triggered after the component's first render. It retrieves data from local storage to ensure that data persists even after the page is reloaded.

RetrieveData retrieves data from local storage and assigns it to storedData for display.

The video above explains how to store and retrieve data stored in localstorage on the client-side.

Advanced Features and Techniques

In this section, we'll talk about how you can set an expiration date on your data, and how the stored data can be encrypted and decrypted for security.

How to Manage the Expiration of Stored Data

To manage the expiration of your stored data, you will create a helper class that stores data along with an expiration timestamp. Create a file called StorageItem.cs which will contain the code below:

public class StorageItem<T>
{
    public required T Data { get; set; }
    public DateTime Expiry { get; set; }
}

The code snippet above is a StorageItem<T> class, which is a generic class that can hold data of any type T and an expiry date DateTime. The Data property is required to be set when an instance of StorageItem is created or initialized, ensuring that it always has a valid value. The Expiry property represents the expiration date of the stored data.

Next, you'll create a file which will be a class that contains methods to set and get from the LocalStorage, with an expiration time. Create a file called LocalStorageHelper.cs:

using Blazored.LocalStorage;

namespace BlazorApp9.Components.Helpers;

public static class LocalStorageHelper
{
    public static async Task SetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key, TimeSpan expiry, T data)
    {
        StorageItem<T> storageItem = new StorageItem<T>
        {
            Data = data,
            Expiry = DateTime.UtcNow.Add(expiry)
        };

        await localStorageService.SetItemAsync(key, storageItem);
    }

    public static async Task<T?> GetItemAsyncWithExpiry<T>(ILocalStorageService localStorageService, string key)
    {
         var storageItem = await localStorageService.GetItemAsync<StorageItem<T>>(key);

        if(storageItem is null) {
            return default;
        }

        if (storageItem.Expiry < DateTime.UtcNow)
        {
            await localStorageService.RemoveItemAsync(key);
            return default;
        }
        return storageItem.Data;
    }
}

In the code above, you can see the necessary using directive for the Blazored.LocalStorage library. It provides easy access to the browser's local storage from Blazor applications.

This is followed by the declaration of the namespace BlazorApp9.Components.Helpers. This organizes the code and indicates that this helper is part of a specific component's helpers within the Blazor application.

Next, the LocalStorageHelper class is defined as a static class. A static class is one that cannot be instantiated and can only contain static members (using non static methods or properties will not be accepted).

Within the LocalStorageHelper class, two static asynchronous methods are defined: SetItemAsyncWithExpiry and GetItemAsyncWithExpiry.

The SetItemAsyncWithExpiry method is responsible for storing an item in the local storage with an associated expiry time. It accepts an ILocalStorageService instance for interacting with local storage, a key string to identify the stored item, a TimeSpan value representing the expiry duration, and the actual data to be stored.

Inside the method, a StorageItem<T> object is created, where T is the type of data being stored. This object includes the data and the expiry time, which is calculated by adding the specified TimeSpan to the current UTC time.

This StorageItem object is then serialized and saved in local storage under the given key using the SetItemAsync method of ILocalStorageService.

The GetItemAsyncWithExpiry method is responsible for retrieving an item from local storage and checking if it has expired. It also accepts an ILocalStorageService instance and a key string.

This method attempts to retrieve the stored StorageItem<T> object using the key. If the retrieved item is null, it returns the default value for the type T (typically null for reference types and zero or equivalent for value types).

If the item is found but its expiry time is earlier than the current UTC time, it means the item has expired. In this case, the item is removed from the local storage using the RemoveItemAsync method of ILocalStorageService, and the method returns the default value for T. If the item is valid and has not expired, the method returns the stored data.

How to Implement Encryption and Decryption

In this section, we will explore a utility file that provides encryption and decryption functionalities for a Blazor application.

The EncryptionHelper.cs class includes methods for encrypting and decrypting strings, as well as methods for serializing objects to JSON (Javascript Object Notation) and then encrypting them. This ensures that sensitive data can be securely stored and transmitted.

Let’s dive into the code to understand how these methods work and how you can use them. Add the following code for this file:

using System.Security.Cryptography;
using System.Text;
using System.Text.Json;

namespace BlazorApp9.Components.Helpers;

public static class EncryptionHelper
{
    private static readonly string EncryptionKey = "your-encryption-key";

    private static byte[] GetKeyBytes(string key)
    {

        byte[] keyBytes = Encoding.UTF8.GetBytes(key);
        Array.Resize(ref keyBytes, 32);
        return keyBytes;
    }

    public static string Encrypt(string plainText)
    {
        byte[] iv = new byte[16];
        byte[] array;

        using (Aes aes = Aes.Create())
        {
            aes.Key = GetKeyBytes(EncryptionKey);
            aes.IV = iv;

            ICryptoTransform encryptor = aes.CreateEncryptor(aes.Key, aes.IV);

            using (MemoryStream memoryStream = new MemoryStream())
            {
                using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, encryptor, CryptoStreamMode.Write))
                {
                    using (StreamWriter streamWriter = new StreamWriter((Stream)cryptoStream))
                    {
                        streamWriter.Write(plainText);
                    }

                    array = memoryStream.ToArray();
                }
            }
        }

        return Convert.ToBase64String(array);
    }

    public static string Decrypt(string cipherText)
    {
        byte[] iv = new byte[16];
        byte[] buffer = Convert.FromBase64String(cipherText);

        using (Aes aes = Aes.Create())
        {
            aes.Key = GetKeyBytes(EncryptionKey);
            aes.IV = iv;

            ICryptoTransform decryptor = aes.CreateDecryptor(aes.Key, aes.IV);

            using (MemoryStream memoryStream = new MemoryStream(buffer))
            {
                using (CryptoStream cryptoStream = new CryptoStream((Stream)memoryStream, decryptor, CryptoStreamMode.Read))
                {
                    using (StreamReader streamReader = new StreamReader((Stream)cryptoStream))
                    {
                        return streamReader.ReadToEnd();
                    }
                }
            }
        }
    }

    public static string SerializeAndEncrypt<T>(T data)
    {
        var jsonString = JsonSerializer.Serialize(data);
        return Encrypt(jsonString);
    }

    public static T DecryptAndDeserialize<T>(string cipherText)
    {
        var json = Decrypt(cipherText);
        return JsonSerializer.Deserialize<T>(json);
    }
}

The EncryptionHelper class is a static helper class designed for encrypting and decrypting data. This is particularly useful for securing sensitive information in a Blazor application.

The class above defines a static readonly field EncryptionKey which holds the encryption key. This key is crucial for both the encryption and decryption processes. It's important to use a strong and securely stored key.

The GetKeyBytes method converts the string key into a byte array and ensures its length is 32 bytes. This is because the AES encryption algorithm requires a 256-bit key, which is 32 bytes long.

The Encrypt method encrypts a plaintext string using AES encryption. It first creates an initialization vector (IV) of 16 bytes, which is required by the AES algorithm. The method then sets up an AES object with the encryption key and IV, and uses a CryptoStream to write the encrypted data to a memory stream. This encrypted data is then converted to a base64 string for easy storage and transmission.

The Decrypt method performs the reverse operation. It converts a base64 string back to a byte array, sets up the AES object with the same key and IV, and uses a CryptoStream to read the decrypted data from the memory stream. The result is the original plaintext string.

The EncryptionHelper class provides two methods for handling complex data structures: SerializeAndEncrypt and DecryptAndDeserialize. The SerializeAndEncrypt method first serializes an object to a JSON string using JsonSerializer.Serialize, and then encrypts this JSON string using the Encrypt method. This allows complex objects to be securely stored in an encrypted format.

The DecryptAndDeserialize method decrypts an encrypted JSON string back into its original form and then deserializes it into an object of type T using JsonSerializer.Deserialize. This combination of decryption and deserialization ensures that complex data can be securely retrieved and used within the application.

How to Connect the Expiration and Encryption to the User Interface

Now we'll walk through a Blazor component (Home.razor) that allows users to store and retrieve encrypted data in the browser's local storage. This ensures that sensitive information is protected and automatically expires when no longer needed.

This approach combines the ease of local storage with the security of encryption, providing a robust solution for managing user data in web applications. Let's dive into the code to see how it works.

 @page "/"
@using BlazorApp9.Components.Helpers

@inject Blazored.LocalStorage.ILocalStorageService localStorage
@rendermode RenderMode.InteractiveServer

<h3>Local Storage Example</h3>

<input @bind-value="@inputData" />

<button @onclick="StoreData">Store Data</button>
<button @onclick="RetrieveData">Retrieve Data</button>

<p>The retrieved data from the LocalStorage: @storedData </p>

@code {
    private const string dataKey = "localStorageKey";

    private string? storedData;
    private string? inputData;

    bool isDataLoaded = false;

    private async Task StoreData()
    {
        if (!string.IsNullOrWhiteSpace(inputData))
        {
            string encryptData = EncryptionHelper.SerializeAndEncrypt(inputData);
            await LocalStorageHelper.SetItemAsyncWithExpiry(localStorage, dataKey, TimeSpan.FromMinutes(30), encryptData);
            inputData = "";
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !isDataLoaded)
        {
            await RetrieveData();
            isDataLoaded = true;
            StateHasChanged();
        }
    }

    private async Task RetrieveData()
    {
        string encryptData = await LocalStorageHelper.GetItemAsyncWithExpiry<string>(localStorage, dataKey);
        storedData = encryptData != null ? EncryptionHelper.DecryptAndDeserialize<string>(encryptData) : "Data not found or expired.";
    }
}

In the code above, the StoreData method checks if inputData is valid, encrypts it using EncryptionHelper.SerializeAndEncrypt, and stores it in local storage with a thirty-minute expiry using LocalStorageHelper.SetItemAsyncWithExpiry. The input field is then cleared.

The OnAfterRenderAsync method retrieves data from local storage after the component's initial render. This ensures previously stored data is loaded when the page first displays. It runs once, setting isDataLoaded to true and calling StateHasChanged to update the user interface (UI).

The RetrieveData method fetches data from local storage using LocalStorageHelper.GetItemAsyncWithExpiry. If the data is found and valid, it decrypts and deserializes it using EncryptionHelper.DecryptAndDeserialize. If not, it sets storedData to "Data not found or expired."

The video above demonstrates how you can implement the concepts discussed in this guide in a web application.

Conclusion

Blazored.LocalStorage offers a powerful and easy-to-use solution for managing user information in Blazor applications. Its integration brings numerous benefits, including enhanced state management, improved performance, and a better user experience.

After reading through this article and trying out the code for yourself, you should be able to incorporate local storage capabilities into any Blazor project. This will help you unlock the full potential of client-side storage in your web applications.

We just published a full course on the freeCodeCamp.org YouTube channel that will teach you how to use Blazor WebAssembly and Web API on .NET 6.

In this course you will learn step-by-step how to build a shopping cart application.
This course also provides a guide on how to integrate a payment gateway into your Blazor WebAssembly component, so that a user is able to pay for products through your application using a debit or credit card or PayPal account.

Gavin Lon teaches this course. Gavin is a senior software engineer with over 20 years of experience.

Here are all the sections covered in this course:

• Create the Database using EF Core Code First Database Migrations
• Retrieve Product Data from Database (Web API component)
• Create Classes for Data Transfer Objects (DTOs)
• Create ProductRepository Class (Repository Design Pattern)
• Create ProductController Class
• Create DtoConversion Class (DTO Conversion Extension methods)
• Display Product Data to User (Blazor WebAssembly Component)
• Display Data for Specific Product to User (Web API and Blazor)
• Add Product to Shopping Cart (Web API and Blazor)
• Remove Product from Shopping Cart (Web API and Blazor)
• Update the Quantity of Products in the Shopping Cart (Web API, Blazor, Blazor JavaScript Interoperability)
• Update the Header Menu in Response to a Change to the State of the Shopping Cart (Creating Custom Events in Blazor)
• Integration of PayPal Payment Gateway into Blazor Component
• Dynamically Populate the Side-Bar Menu (Web API and Blazor)
• Optimise Code for Performance (Web API and Blazor)
• Use Include Extension Method in LINQ Query (Web API)
• User Local Storage Functionality (Blazor)

Watch the full course below or on the freeCodeCamp.org YouTube channel (6-hour watch).

Introduction

In this article, we will learn how to implement Azure serverless with Blazor web assembly. And to do that, we will create an app that lists out some Frequently Asked Questions (FAQ) on Covid-19.

Here's what we will cover:

• We will create an Azure Cosmos DB which will act as our primary database to store questions and answers.
• We will use an Azure function app to fetch data from cosmos DB.
• We will deploy the function app to Azure to expose it globally via an API endpoint.
• And lastly, we will consume the API in a Blazor web assembly app.

The FAQs will be displayed in a card layout with the help of Bootstrap.

The Covid-19 FAQ app is deployed on Azure. See it in action at https://covid19-faq.azurewebsites.net/

What is a serverless architecture?

In traditional applications such as a 3-tier app, a client requests resources from the server, and the server processes the request and responds with the appropriate data.

However, there are some issues with this architecture. We need a server running continuously. Even if there are no requests, the server is present 24X7, ready to process the request. Maintaining server availability is cost-intensive.

Another problem is scaling. If the traffic is huge, we need to scale out all the servers which can be a cumbersome process.

An effective solution to this problem is serverless web architecture. The client makes a request to a file storage account instead of a server. The storage account returns the index.html page along with some code that needs to be rendered on the browser.

Since there is no server to render the page, we are relying on the browser to render the page. All the logic to draw the element or update the element will run in the browser. We do not have any server on backend – we just have a storage account with a static asset.

This is a cost-effective solution as we do not have any server, just some static files in a storage account. It is also very easy to scale out for heavy load websites.

What is an Azure function?

Making the browser run all the logic to render the page seems exciting, but it has some limitations.

We do not want the browser to make database calls. We need some part of our code to run on the server-side such as connecting to a database.

This is where Azure functions come in handy. In a serverless architecture, if we want some code to run the server-side, then we use an Azure function.

Azure functions are an event-driven serverless compute platform. You need to pay only when execution happens. They are also easy to scale. Hence, we get both the scaling and the cost benefits with Azure functions.

To learn more you can refer to the Azure function official docs.

Why should you use Azure serverless?

An Azure serverless solution can add value to your product by minimizing the time and resources you spend on infrastructure-related requirements.

You can increase developer productivity, optimize resources and accelerate the time to market with the help of a fully managed, end-to-end Azure serverless solution.

To learn more, see the Azure serverless official doc.

What is Blazor?

Blazor is a .NET web framework for creating client-side applications using C#/Razor and HTML.

Blazor runs in the browser with the help of WebAssembly. It can simplify the process of creating a single page application (SPA). It also provides a full-stack web development experience using .NET.

Using .NET for developing Client-side application has multiple advantages:

• .NET offers a range of API and tools across all platforms that are stable and easy to use.
• The modern languages such as C# and F# offer a lot of features that make programming easier and interesting for developers.
• The availability of one of the best IDE in the form of Visual Studio provides a great .NET development experience across multiple platforms such as Windows, Linux, and macOS.
• .NET provides features such as speed, performance, security, scalability, and reliability in web development that makes full-stack development easier.

Why should you use Blazor?

Blazor supports a wide array of features to make web development easier for us. Some of the prominent features of Blazor are:

• Component-based architecture: Blazor provides us with a component-based architecture to create rich and composable UI.
• Dependency injection: This allows us to use services by injecting them into components.
• Layouts: We can share common UI elements (for example, menus) across pages using the layouts feature.
• Routing: We can redirect the client request from one component to another with the help of routing.
• JavaScript interop: This allows us to invoke a C# method from JavaScript, and we can call a JavaScript function or API from C# code.
• Globalization and localization: The application can be made accessible to users in multiple cultures and languages
• Live reloading: Live reloading of the app in the browser during development.
• Deployment: We can deploy the Blazor application on IIS and Azure Cloud.

To learn more about Blazor, please refer to the official Blazor docs.

Prerequisites

To get started with the application, we need to fulfill these prerequisites:

• An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/
• Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/

While installing the VS 2019, please make sure you select the Azure development and ASP.NET and web development workload.

Source Code

You can get the source code from GitHub here.

Create Azure Cosmos DB account

Log in to the Azure portal and search for the “Azure Cosmos DB” in the search bar and click on the result. On the next screen, click on the Add button.

This will open a “Create Azure Cosmos DB Account” page. You need to fill in the required information to create your database. Refer to the image shown below:

You can fill in the details like this:

• Subscription: Select your Azure subscription name from the drop-down.
• Resource Group: Select an existing Resource Group or create a new one.
• Account Name: Enter a unique name for your Azure Cosmos DB account. The name can contain only lowercase letters, numbers, and the ‘-‘ character, and must be between 3 and 44 characters.
• API: Select Core (SQL)
• Location: Select a location to host your Azure Cosmos DB account.

Keep the other fields to its default value and click on the “Review+ Create” button. In the next screen, review all your configurations and click on the “Create” button. After a few minutes, the Azure Cosmos DB account will be created. Click on “Go to resource” to navigate to the Azure Cosmos DB account page.

Set up the Database

On the Azure Cosmos DB account page, click on “Data Explorer” on the left navigation, and then select “New Container”. Refer to the image shown below:

An “Add Container” pane will open. You need to fill in the details to create a new container for your Azure Cosmos DB. Refer to the image shown below:

You can fill in the details as indicated below.

• Database ID: You can give any name to your database. Here I am using FAQDB.
• Throughput: Keep it at the default value of 400
• Container ID: Enter the name for your container. Here I am using FAQContainer.
• Partition key: The Partition key is used to automatically partition data among multiple servers for scalability. Put the value as “/id”.

Click on the “OK” button to create the database.

Add Sample data to the Cosmos DB

In the Data Explorer, expand the FAQDB database then expand the FAQContainer. Select Items, and then click on New Item on the top. An editor will open on the right side of the page. Refer to the image shown below:

Put the following JSON data in the editor and click on the Save button at the top.

{
    "id": "1",
    "question": "What is corona virus?",
    "answer": "Corona viruses are a large family of viruses which may cause illness in animals or humans. The most recently discovered coronavirus causes coronavirus disease COVID-19."
}

We have added a set of questions and answer along with a unique id.

Follow the process described above to insert five more sets of data.

{
    "id": "2",
    "question": "What is COVID-19?",
    "answer": "COVID-19 is the infectious disease caused by the most recently discovered corona virus. This new virus and disease were unknown before the outbreak began in Wuhan, China, in December 2019."
}
{
    "id": "3",
    "question": "What are the symptoms of COVID-19?",
    "answer": "The most common symptoms of COVID-19 are fever, tiredness, and dry cough. Some patients may have aches and pains, nasal congestion, runny nose, sore throat or diarrhea. These symptoms are usually mild and begin gradually. Some people become infected but don’t develop any symptoms and don't feel unwell."
}
{
    "id": "4",
    "question": "How does COVID-19 spread?",
    "answer": "People can catch COVID-19 from others who have the virus. The disease can spread from person to person through small droplets from the nose or mouth which are spread when a person with COVID-19 coughs or exhales. These droplets land on objects and surfaces around the person. Other people then catch COVID-19 by touching these objects or surfaces, then touching their eyes, nose or mouth."
}
{
    "id": "5",
    "question": "What can I do to protect myself and prevent the spread of disease?",
    "answer": "You can reduce your chances of being infected or spreading COVID-19 by taking some simple precaution. Regularly and thoroughly clean your hands with an alcoholbased hand rub or wash them with soap and water. Maintain at least 1 metre (3 feet) distance between yourself and anyone who is coughing or sneezing. Make sure you, and the people around you, follow good respiratory hygiene. This means covering your mouth and nose with your bent elbow or tissue when you cough or sneeze. Stay home if you feel unwell. If you have a fever, cough and difficulty breathing, seek medical attention and call in advance."
}
{
    "id": "6",
    "question": "Are antibiotics effective in preventing or treating the COVID-19?",
    "answer": "No. Antibiotics do not work against viruses, they only work on bacterial infections. COVID-19 is caused by a virus, so antibiotics do not work."
}

Get the connection string

Click on “keys” on the left navigation, navigate to the “Read-write Keys” tab. The value under PRIMARY CONNECTION STRING is our required connection string. Refer to the image shown below:

Make a note of the PRIMARY CONNECTION STRING value. We will use it in the latter part of this article, when we will access the Azure Cosmos DB from an Azure function.

Create an Azure function app

Open Visual Studio 2019, click on “Create a new project”. Search “Functions” in the search box. Select the Azure Functions template and click on Next. Refer to the image shown below:

In “Configure your new project” window, enter a Project name as FAQFunctionApp. Click on the Create button. Refer to the image below:

A new “Create a new Azure Function Application settings” window will open. Select “Azure Functions v3 (.NET Core)”from the dropdown at the top. Select the function template as “HTTP trigger”. Set the authorization level to “Anonymous” from the drop-down on the right. Click on the Create button to create the function project and HTTP trigger function.

Refer to the image shown below:

Install package for Azure Cosmos DB

To enable the Azure function App to bind to the Azure Cosmos DB, we need to install the Microsoft.Azure.WebJobs.Extensions.CosmosDB package. Navigate to Tools >> NuGet Package Manager >> Package Manager Console and run the following command:

Install-Package Microsoft.Azure.WebJobs.Extensions.CosmosDB

Refer to the image shown below.

You can learn more about this package at the NuGet gallery.

Configure the Azure Function App

The Azure function project contains a default file called Function1.cs. You can safely delete this file as we won’t be using this for our project.

Right-click on the FAQFunctionApp project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as FAQ.cs and click Add.

Open [FAQ.cs](https://github.com/AnkitSharma-007/azure-serverless-with-blazor/blob/master/FAQFunctionApp/FAQFunctionApp/Models/FAQ.cs) and put the following code inside it.

namespace FAQFunctionApp.Models
{
    class FAQ
    {
        public string Id { get; set; }
        public string Question { get; set; }
        public string Answer { get; set; }
    }
}

The class has the same structure as the JSON data we have inserted in the cosmos DB.

Right-click on the FAQFunctionApp project and select Add >> Class. Name your class as [CovidFAQ.cs](https://github.com/AnkitSharma-007/azure-serverless-with-blazor/blob/master/FAQFunctionApp/FAQFunctionApp/CovidFAQ.cs). Put the following code inside it.

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using Microsoft.Azure.WebJobs;
using FAQFunctionApp.Models;
using Microsoft.Azure.WebJobs.Extensions.Http;
using System.Threading.Tasks;

namespace FAQFunctionApp
{
    class CovidFAQ
    {
        [FunctionName("covidFAQ")]
        public static async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
        [CosmosDB(
            databaseName:"FAQDB",
            collectionName:"FAQContainer",
            ConnectionStringSetting = "DBConnectionString"
            )] IEnumerable<FAQ> questionSet, 
        ILogger log)
        {
            log.LogInformation("Data fetched from FAQContainer");
            return new OkObjectResult(questionSet);
        }
    }
}

We have created a class CovidFAQ and added an Azure function to it. The attribute FunctionName is used to specify the name of the function. We have used the HttpTrigger attribute which allows the function to be triggered via an HTTP call. The attribute CosmosDB is used to connect to the Azure Cosmos DB. We have defined three parameters for this attribute as described below:

• databaseName: the name for the cosmos DB
• collectionName: the collecting inside the cosmos DB we want to access
• ConnectionStringSetting: the connection string to connect to Cosmos DB. We will configure it in the next section.

We have decorated the parameter questionSet, which is of type IEnumerable<FAQ> with the CosmosDB attribute. When the app is executed, the parameter questionSet will be populated with the data from Cosmos DB. The function will return the data using a new instance of OkObjectResult.

Add the connection string to the Azure Function

Remember the Azure cosmos DB connection string you noted earlier? Now we will configure it for our app. Open the local.settings.json file and add your connection string as shown below:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "dotnet",
    "DBConnectionString": "your connectionn string"
  }
}

The local.settings.json will not be published to Azure when we publish the Azure Function app. Therefore, we need to configure the connections string separately while publishing the app to Azure. We will see this in action in the latter part of this article.

Test the Azure Function locally

Press F5 to execute the function. Copy the URL of your function from the Azure Functions runtime output. Refer to the image shown below:

Open the browser and paste the URL in the browser’s address bar. You can see the output as shown below:

Here you can see the data we have inserted into our Azure Cosmos DB.

Publish the Function app to Azure

We have successfully created the Function app, but it is still running in the localhost. Let’s publish the app to make it available globally.

Right-click on the FAQFunctionApp project and select Publish. Select the Publish target as Azure.

Select the specific target as “Azure Function App (windows)”.

In the next window, click on the “Create a new Azure Function…” button. A new Function App window will open. Refer to the image as shown below:

You can fill in the details as indicated below:

• Name: A globally unique name for your function app.
• Subscription: Select your Azure subscription name from the drop-down.
• Resource Group: Select an existing Resource Group or create a new one.
• Plan Type: Select Consumption. It will make sure that you pay only for executions of your functions app.
• Location: Select a location for your function.
• Azure Storage: Keep the default value.

Click on the “Create” button to create the Function App and return to the previous window. Make sure the option “Run from package file” is checked. Click on the Finish button.

Now you are at the Publish page. Click on the “Manage Azure App Service Settings” button.

You will see a “Application Settings” window as shown below:

At this point, we will configure the Remote value for the “DBConnectionString” key. This value is used when the app is deployed on Azure. Since the key for Local and Remote environment is the same in our case, click on the “Insert value from Local” button to copy the value from the Local field to the Remote field. Click on the OK button.

You are navigated back to the Publish page. We are done with all the configurations. Click on the Publish button to publish your Azure function app. After the app is published, get the site URL value, append /api/covidFAQ to it and open it in the browser. You can see the output as shown below.

This is the same dataset that we got while running the app locally. This proves that our serverless Azure function is deployed and able to access the Azure Cosmos DB successfully.

Enable CORS for the Azure app service

We will use the Function app in a Blazor UI project. To allow the Blazor app to access the Azure Function, we need to enable CORS for the Azure app service.

Open the Azure portal. Navigate to “All resources”. Here, you can see the App service which we have created while Publishing the app the in previous section. Click on the resource to navigate to the resource page. Click on CORS on the left navigation. A CORS details pane will open.

Now we have two options here:

1. Enter the specific origin URL to allow them to make cross-origin calls.
2. Remove all origin URL from the list, and use “*” wildcard to allow all the URL to make cross-origin calls.

We will use the second option for our app. Remove all the previously listed URL and enter a single entry as “*” wildcard. Click on the Save button at the top. Refer to the image shown below:

Create the Blazor Web assembly project

Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below:

On the “Configure your new project” window, put the project name as FAQUIApp and click on the “Create” button as shown in the image below:

On the “Create a new Blazor app” window, select the “Blazor WebAssmebly App” template. Click on the Create button to create the project. Refer to the image shown below:

To create a new razor component, right-click on the Pages folder, select Add >>Razor Component.An “Add New Item” dialog box will open, put the name of your component as CovidFAQ.razor and click on the Add button. Refer to the image shown below:

Open [CovidFAQ.razor](https://github.com/AnkitSharma-007/azure-serverless-with-blazor/blob/master/FAQUIApp/FAQUIApp/Pages/CovidFAQ.razor) and put the following code into it.

@page "/covidfaq"
@inject HttpClient Http

<div class="d-flex justify-content-center">
    <img src="../Images/COVID_banner.jpg" alt="Image" style="width:80%; height:300px" />
</div>
<br />
<div class="d-flex justify-content-center">
    <h1>Frequently asked Questions on Covid-19</h1>
</div>
<hr />

@if (questionList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (var question in questionList)
    {
        <div class="card">
            <h3 class="card-header">
                @question.Question
            </h3>
            <div class="card-body">
                <p class="card-text">@question.Answer</p>
            </div>
        </div>
        <br />
    }
}

@code {

    private FAQ[] questionList;

    protected override async Task OnInitializedAsync()
    {
        questionList = await Http.GetFromJsonAsync<FAQ[]>("https://faqfunctionapp20200611160123.azurewebsites.net/api/covidFAQ");
    }

    public class FAQ
    {
        public string Id { get; set; }
        public string Question { get; set; }
        public string Answer { get; set; }
    }
}

In the @code section, we have created a class called FAQ. The structure of this class is the same as that of the FAQ class we created earlier in the Azure function app. Inside the OnInitializedAsync method, we are hitting the API endpoint of our function app. The data returned from the API will be stored in a variable called questionList which is an array of type FAQ.

In the HTML section of the page, we have set a banner image at the top of the page. The image is available in the /wwwroot/Images folder. We will use a foreach loop to iterate over the questionList array and create a bootstrap card to display the question and answer.

Adding Link to Navigation menu

The last step is to add the link of our CovidFAQ component in the navigation menu. Open [/Shared/NavMenu.razor](https://github.com/AnkitSharma-007/azure-serverless-with-blazor/blob/master/FAQUIApp/FAQUIApp/Shared/NavMenu.razor#L15-L19) file and add the following code into it.

<li class="nav-item px-3">
  <NavLink class="nav-link" href="covidfaq">
    <span class="oi oi-plus" aria-hidden="true"></span> Covid FAQ
  </NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

Execution Demo

Press F5 to launch the app. Click on the Covid FAQ button on the nav menu on the left. You can see all the questions and answers in a beautiful card layout as shown below:

You can also check the live app at https://covid19-faq.azurewebsites.net/

Summary

In this article, we learned about serverless and its advantage over the traditional 3-tier web architecture. We also learned how the Azure function fits in serverless web architecture.

To demonstrate the practical implementation of these concepts, we have created a Covid-19 FAQ app using the Blazor web assembly and Azure serverless. The questions and answers are displayed in the card layout using Bootstrap.

We have used the Azure cosmos DB as the primary database to store the questions and answers for our FAQ app. An Azure function is used to fetch data from the cosmos DB. We deployed the function app on Azure to make it available globally via an API endpoint.

See Also

• Optical Character Reader Using Blazor And Computer Vision
• Multi-Language Translator Using Blazor And Azure Cognitive Services
• Facebook Authentication And Authorization In Server-Side Blazor App
• Continuous Deployment For Angular App Using Heroku And GitHub
• Google Authentication And Authorization In Server-Side Blazor App
• Blazor CRUD Using Google Cloud Firestore

If you like the article, share with you friends. You can also connect with me on Twitter and LinkedIn.

Originally published at https://ankitsharmablogs.com/

Introduction

In this article, we will create a multilanguage translator using Blazor and the Translate Text Azure Cognitive Service.

This translator will be able to translate between all the languages supported by the Translate Text API. Currently, the Translate Text API supports more than 60 languages for translation.

The application will accept the text to translate and the target language as the input and returns the translated text and the detected language for the input text as the output.

Take a look at the output shown below.

Prerequisites

• Install the latest .NET Core 3.1 SDK from https://dotnet.microsoft.com/download/dotnet-core/3.1
• Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/
• An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/

Source Code

You can get the source code from GitHub.

Create the Azure Translator Text Cognitive Services resource

Log in to the Azure portal and search for the cognitive services in the search bar and click on the result. Refer to the image shown below.

On the next screen, click on the Add button. It will open the cognitive services marketplace page. Search for the Translator Text in the search bar and click on the search result. It will open the Translator Text API page. Click on the Create button to create a new Translator Text resource. Refer to the image shown below.

On the Create page, fill in the details as indicated below.

• Name: Give a unique name for your resource.
• Subscription: Select the subscription type from the dropdown.
• Pricing tier: Select the pricing tier as per your choice.
• Resource group: Select an existing resource group or create a new one.

Click on the Create button. Refer to the image shown below.

After your resource is successfully deployed, click on the “Go to resource” button. You can see the Key and the endpoint for the newly created Translator Text resource. Refer to the image shown below.

Make a note of the key, as we will be using this in the latter part of this article to request the translations from the Translator Text API. The values are masked here for privacy.

Create a Server-Side Blazor Application

Open Visual Studio 2019 and click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below.

On the next window, put the project name as BlazorTranslator and click on the “Create” button. The next window will ask you to select the type of Blazor app. Select Blazor Server App and click on the Create button to create a new server-side Blazor application. Refer to the image shown below.

Creating the Models

Right-click on BlazorTranslator project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as LanguageDetails.cs and click Add.

Open [LanguageDetails.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/LanguageDetails.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class LanguageDetails
    {
        public string Name { get; set; }
        public string NativeName { get; set; }
        public string Dir { get; set; }
    }
}

Similarly, add a new class file [TextResult.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/TextResult.cs) and put the following code inside it.

using System;
namespace BlazorTranslator.Models
{
    public class TextResult
    {
        public string Text { get; set; }
        public string Script { get; set; }
    }
}

Add a new class file [Translation.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/Translation.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class Translation
    {
        public string Text { get; set; }
        public TextResult Transliteration { get; set; }
        public string To { get; set; }
    }
}

Create a class file [DetectedLanguage.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/DetectedLanguage.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class DetectedLanguage
    {
        public string Language { get; set; }
        public float Score { get; set; }
    }
}

Create a class file [TranslationResult.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/TranslationResult.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class TranslationResult
    {
        public DetectedLanguage DetectedLanguage { get; set; }
        public TextResult SourceText { get; set; }
        public Translation[] Translations { get; set; }
    }
}

Finally, create the class file [AvailableLanguage.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/AvailableLanguage.cs) and put the following code inside it.

using System.Collections.Generic;

namespace BlazorTranslator.Models
{
    public class AvailableLanguage
    {
      public Dictionary<string, LanguageDetails> Translation { get; set; }
    }
}

Create the Translation service

Right-click on the BlazorTranslator/Data folder and select Add >> Class to add a new class file. Put the name of the file as TranslationService.cs and click on Add. Open [TranslationService.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Data/TranslationService.cs) file and put the following code inside it.

using BlazorTranslator.Models;
using Newtonsoft.Json;
using System;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

namespace BlazorTranslator.Data
{
    public class TranslationService
    {
        public async Task<TranslationResult[]> GetTranslatation(string textToTranslate, string targetLanguage)
        {
            string subscriptionKey = "af19d996a3cb4a70a808567aad5bc41a";
            string apiEndpoint = "https://api.cognitive.microsofttranslator.com/";
            string route = $"/translate?api-version=3.0&to={targetLanguage}";
            string requestUri = apiEndpoint + route;
            TranslationResult[] translationResult = await TranslateText(subscriptionKey, requestUri, textToTranslate);
            return translationResult;
        }

        async Task<TranslationResult[]> TranslateText(string subscriptionKey, string requestUri, string inputText)
        {
            object[] body = new object[] { new { Text = inputText } };
            var requestBody = JsonConvert.SerializeObject(body);

            using (var client = new HttpClient())
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Post;
                request.RequestUri = new Uri(requestUri);
                request.Content = new StringContent(requestBody, Encoding.UTF8, "application/json");
                request.Headers.Add("Ocp-Apim-Subscription-Key", subscriptionKey);

                HttpResponseMessage response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();
                TranslationResult[] deserializedOutput = JsonConvert.DeserializeObject<TranslationResult[]>(result);

                return deserializedOutput;
            }
        }

        public async Task<AvailableLanguage> GetAvailableLanguages()
        {
            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";
            var client = new HttpClient();
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Get;
                request.RequestUri = new Uri(endpoint);
                var response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();

                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject<AvailableLanguage>(result);

                return deserializedOutput;
            }
        }
    }
}

We have defined a GetTranslatation method which will accept two parameters – the text to translate and the target language. We will set the subscription key for the Azure Translator Text cognitive service and define a variable for the global endpoint for Translator Text. The request URL contains the API endpoint along with the target language.

Inside the TranslateText method, we will create a new HttpRequestMessage. This HTTP request is a Post request. We will pass the subscription key in the header of the request. The Translator Text API returns a JSON object, which will be deserialized to an array of type TranslationResult. The output contains the translated text as well as the language detected for the input text.

The GetAvailableLanguages method will return the list of all the language supported by the Translate Text API. We will set the request URI and create a HttpRequestMessage which will be a Get request. This request URL will return a JSON object which will be deserialized to an object of type AvailableLanguage.

Configuring the Service

To make the service available to the components we need to configure it on the server-side app. Open the Startup.cs file. Add the following line inside the [ConfigureServices](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Startup.cs#L28) method of Startup class.

services.AddSingleton<TranslationService>();

Creating the Blazor UI Component

We will add the Razor page in BlazorTranslator/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from BlazorTranslator/Pages folder.

Right-click on BlazorTranslator/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “Visual C#” from the left panel, then select “Razor Component” from the templates panel, put the name as Translator.razor. Click Add. Refer to the image shown below.

Open the [Translator.razor](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Pages/Translator.razor) file and add the following code at the top.

@page "/translator"
@using BlazorTranslator.Models
@using BlazorTranslator.Data
@inject TranslationService translationService

We have defined the route for this component. We are also injecting the TranslationService in this component.

Now we will add the following HTML code in this file.

<h3>Multilanguage translator using Microsoft Translator API Cognitive Service</h3>
<hr />

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <select class="form-control" @bind="inputLanguage">
                <option value="">-- Select input language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea placeholder="Enter text to translate" class="form-control translation-box" rows="5" @bind="@inputText"></textarea>
        </div>
        <div class="col-md-6">
            <select class="form-control" @onchange="SelectLanguage">
                <option value="">-- Select target language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea disabled class="form-control translation-box" rows="5">@outputText</textarea>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary btn-lg" @onclick="Translate">Translate</button>
    </div>
</div>

We have defined two dropdown lists, one each for input language and the target language. The Azure Translate Text API will detect the input language and we will use that value to populate the dropdown for input language. We have also defined two text areas for the input and the translated text.

Finally, add the following code in the @code section of the page.

@code {
    private TranslationResult[] translations;
    private AvailableLanguage availableLanguages;

    private string outputLanguage { get; set; }
    private string inputLanguage { get; set; }

    string inputText { get; set; }
    string outputText { get; set; }

    private Dictionary<string, LanguageDetails> LanguageList = new Dictionary<string, LanguageDetails>();

    protected override async Task OnInitializedAsync()
    {
        availableLanguages = await translationService.GetAvailableLanguages();
        LanguageList = availableLanguages.Translation;
    }

    private void SelectLanguage(ChangeEventArgs langEvent)
    {
        this.outputLanguage = langEvent.Value.ToString();
    }

    private async Task Translate()
    {
        if (!string.IsNullOrEmpty(outputLanguage))
        {
            translations = await translationService.GetTranslatation(this.inputText, this.outputLanguage);
            outputText = translations[0].Translations[0].Text;
            inputLanguage = translations[0].DetectedLanguage.Language;
        }
    }
}

We are invoking the GetAvailableLanguages method from our service inside the OnInitializedAsync. This OnInitializedAsync is a lifecycle method that will be invoked upon component initialization. This will make sure that the language dropdown will be populated as the page loads.

The SelectLanguage method will set the outputLanguage for the translation. The Translate method will invoke the GetTranslatation method from the service. We will set the outputText and the language detected for the inputLanguage as returned from the service.

Add styling for the Translator component

Navigate to [BlazorTranslator\wwwroot\css\site.css](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/wwwroot/css/site.css#L185-L187) file and put the following style definition inside it.

.translation-box {
    margin: 15px 0px;
}

Adding Link to Navigation menu

The last step is to add the link of our Translator component in the navigation menu. Open [BlazorTranslator/Shared/NavMenu.razor](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Shared/NavMenu.razor#L15-L19) file and add the following code into it.

<li class="nav-item px-3">
    <NavLink class="nav-link" href="translator">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Translator
    </NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

Execution Demo

Press F5 to launch the application. Click on the Translator button on the nav menu in the left. You can perform the multilanguage translation as shown in the image below.

Summary

We have created a Translator Text Cognitive Services resource on Azure. We have used the Translator Text API to create a multilanguage translator using Blazor. This translator supports more than 60 languages for translation. We fetched the list of supported languages for translation from the global API endpoint for Translator Text.

Get the Source code from GitHub and play around to get a better understanding.

See Also

• Optical Character Reader Using Blazor And Computer Vision
• Facebook Authentication And Authorization In Server-Side Blazor App
• Google Authentication And Authorization In Server-Side Blazor App
• Blazor CRUD Using Google Cloud Firestore
• Hosting A Blazor Application on Firebase
• Localization In Angular Using i18n Tools

Introduction

In this article, we will create an optical character recognition (OCR) application using Blazor and the Azure Computer Vision Cognitive Service.

Computer Vision is an AI service that analyzes content in images. We will use the OCR feature of Computer Vision to detect the printed text in an image.

The application will extract the text from the image and detects the language of the text. Currently, the OCR API supports 25 languages.

A demo of the application is shown below.

Prerequisites

• Install the latest .NET Core 3.1 SDK from https://dotnet.microsoft.com/download/dotnet-core/3.1
• Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/
• An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/

Image requirements

The OCR API will work on images that meet the requirements as mentioned below:

• The format of the image must be JPEG, PNG, GIF, or BMP.
• The size of the image must be between 50 x 50 and 4200 x 4200 pixels.
• The image file size should be less than 4 MB.
• The text in the image can be rotated by any multiple of 90 degrees plus a small angle of up to 40 degrees.

Source Code

You can get the source code from GitHub.

Create the Azure Computer Vision Cognitive Service resource

Log in to the Azure portal and search for the cognitive services in the search bar and click on the result. Refer to the image shown below.

On the next screen, click on the Add button. It will open the cognitive services marketplace page.

Search for the Computer Vision in the search bar and click on the search result. It will open the Computer Vision API page. Click on the Create button to create a new Computer Vision resource. Refer to the image shown below.

On the Create page, fill in the details as indicated below.

• Name: Give a unique name for your resource.
• Subscription: Select the subscription type from the dropdown.
• Pricing tier: Select the pricing tier as per your choice.
• Resource group: Select an existing resource group or create a new one.

Click on the Create button. Refer to the image shown below.

After your resource is successfully deployed, click on the “Go to resource” button. You can see the Key and the endpoint for the newly created Computer Vision resource. Refer to the image shown below.

Make a note of the key and the endpoint. We will be using these in the latter part of this article to invoke the Computer Vision OCR API from the .NET Code. The values are masked here for privacy.

Create a Server-Side Blazor Application

Open Visual Studio 2019, click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below.

On the next window, put the project name as BlazorComputerVision and click on the “Create” button.

The next window will ask you to select the type of Blazor app. Select Blazor Server App and click on the Create button to create a new server-side Blazor application. Refer to the image shown below.

Installing Computer Vision API library

We will install the Azure Computer Vision API library which will provide us with the models out of the box to handle the Computer Vision REST API response.

To install the package, navigate to Tools >> NuGet Package Manager >> Package Manager Console. It will open the Package Manager Console. Run the command as shown below.

Install-Package Microsoft.Azure.CognitiveServices.Vision.ComputerVision -Version 5.0.0

You can learn more about this package at the NuGet gallery.

Create the Models

Right-click on the BlazorComputerVision project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as LanguageDetails.cs and click Add.

Open [LanguageDetails.cs](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Models/LanguageDetails.cs) and put the following code inside it.

namespace BlazorComputerVision.Models
{
    public class LanguageDetails
    {
        public string Name { get; set; }
        public string NativeName { get; set; }
        public string Dir { get; set; }
    }
}

Similarly, add a new class file [AvailableLanguage.cs](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Models/AvailableLanguage.cs) and put the following code inside it.

using System.Collections.Generic;

namespace BlazorComputerVision.Models
{
    public class AvailableLanguage
    {
        public Dictionary<string, LanguageDetails> Translation { get; set; }
    }
}

Finally, we will add a class as DTO (Data Transfer Object) for sending data back to the client. Add a new class file [OcrResultDTO.cs](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Models/OcrResultDTO.cs) and put the following code inside it.

namespace BlazorComputerVision.Models
{
    public class OcrResultDTO
    {
        public string Language { get; set; }

        public string DetectedText { get; set; }
    }
}

Create the Computer Vision Service

Right-click on the BlazorComputerVision/Data folder and select Add >> Class to add a new class file. Put the name of the file as ComputerVisionService.cs and click on Add.

Open the [ComputerVisionService.cs](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Data/ComputerVisionService.cs) file and put the following code inside it.

using BlazorComputerVision.Models;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;

namespace BlazorComputerVision.Data
{
    public class ComputerVisionService
    {
        static string subscriptionKey;
        static string endpoint;
        static string uriBase;

        public ComputerVisionService()
        {
            subscriptionKey = "b993f3afb4e04119bd8ed37171d4ec71";
            endpoint = "https://ankitocrdemo.cognitiveservices.azure.com/";
            uriBase = endpoint + "vision/v2.1/ocr";
        }

        public async Task<OcrResultDTO> GetTextFromImage(byte[] imageFileBytes)
        {
            StringBuilder sb = new StringBuilder();
            OcrResultDTO ocrResultDTO = new OcrResultDTO();
            try
            {
                string JSONResult = await ReadTextFromStream(imageFileBytes);

                OcrResult ocrResult = JsonConvert.DeserializeObject<OcrResult>(JSONResult);

                if (!ocrResult.Language.Equals("unk"))
                {
                    foreach (OcrLine ocrLine in ocrResult.Regions[0].Lines)
                    {
                        foreach (OcrWord ocrWord in ocrLine.Words)
                        {
                            sb.Append(ocrWord.Text);
                            sb.Append(' ');
                        }
                        sb.AppendLine();
                    }
                }
                else
                {
                    sb.Append("This language is not supported.");
                }
                ocrResultDTO.DetectedText = sb.ToString();
                ocrResultDTO.Language = ocrResult.Language;
                return ocrResultDTO;
            }
            catch
            {
                ocrResultDTO.DetectedText = "Error occurred. Try again";
                ocrResultDTO.Language = "unk";
                return ocrResultDTO;
            }
        }

        static async Task<string> ReadTextFromStream(byte[] byteData)
        {
            try
            {
                HttpClient client = new HttpClient();
                client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
                string requestParameters = "language=unk&detectOrientation=true";
                string uri = uriBase + "?" + requestParameters;
                HttpResponseMessage response;

                using (ByteArrayContent content = new ByteArrayContent(byteData))
                {
                    content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                    response = await client.PostAsync(uri, content);
                }

                string contentString = await response.Content.ReadAsStringAsync();
                string result = JToken.Parse(contentString).ToString();
                return result;
            }
            catch (Exception e)
            {
                return e.Message;
            }
        }

        public async Task<AvailableLanguage> GetAvailableLanguages()
        {
            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";
            var client = new HttpClient();
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Get;
                request.RequestUri = new Uri(endpoint);
                var response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();

                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject<AvailableLanguage>(result);

                return deserializedOutput;
            }
        }
    }
}

In the constructor of the class, we have initialized the key and the endpoint URL for the OCR API.

Inside the ReadTextFromStream method, we will create a new HttpRequestMessage. This HTTP request is a Post request. We will pass the subscription key in the header of the request. The OCR API will return a JSON object having each word from the image as well as the detected language of the text.

The GetTextFromImage method will accept the image data as a byte array and returns an object of type OcrResultDTO. We will invoke the ReadTextFromStream method and deserialize the response into an object of type OcrResult. We will then form the sentence by iterating over the OcrWord object.

The GetAvailableLanguages method will return the list of all the language supported by the Translate Text API. We will set the request URI and create a HttpRequestMessage which will be a Get request. This request URL will return a JSON object which will be deserialized to an object of type AvailableLanguage.

Why do we need to fetch the list of supported languages?

The OCR API returns the language code (e.g. en for English, de for German, etc.) of the detected language. But we cannot display the language code on the UI as it is not user-friendly. Therefore, we need a dictionary to look up the language name corresponding to the language code.

The Azure Computer Vision OCR API supports 25 languages. To know all the languages supported by OCR API see the list of supported languages.

These languages are a subset of the languages supported by the Azure Translate Text API. Since there is no dedicated API endpoint to fetch the list of languages supported by OCR API, therefore, we are using the Translate Text API endpoint to fetch the list of languages.

We will create the language lookup dictionary using the JSON response from this API call and filter the result based on the language code returned by the OCR API.

Install BlazorInputFile NuGet package

BlazorInputFile is a file input component for Blazor applications. It provides the ability to upload single or multiple files to a Blazor app.

Open [BlazorComputerVision.csproj](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/BlazorComputerVision.csproj#L8) file and add a dependency for the BlazorInputFile package as shown below:

<ItemGroup>
    <PackageReference Include="BlazorInputFile" Version="0.1.0-preview-00002" />
</ItemGroup>

Open [BlazorComputerVision\Pages\_Host.cshtml](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Pages/_Host.cshtml#L17) file and add the reference for the package’s JavaScript file by adding the following line in the <head> section.

<script src="_content/BlazorInputFile/inputfile.js"></script>

Add the following line in the [_Imports.razor](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/_Imports.razor#L10) file.

@using BlazorInputFile

Configuring the Service

To make the service available to the components we need to configure it on the server-side app. Open the Startup.cs file. Add the following line inside the [ConfigureServices](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Startup.cs#L31) method of Startup class.

 services.AddSingleton<ComputerVisionService>();

Creating the Blazor UI Component

We will add the Razor page in the BlazorComputerVision/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from BlazorComputerVision/Pages folder.

Right-click on the BlazorComputerVision/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “Visual C#” from the left panel, then select “Razor Component” from the templates panel, put the name as OCR.razor. Click Add. Refer to the image shown below.

We will add a code-behind file for this razor page to keep the code and presentation separate. This will allow easy maintenance for the application.

Right-click on the BlazorComputerVision/Pages folder and then select Add >> Class. Name the class as OCR.razor.cs. The Blazor framework is smart enough to tag this class file to the razor file. Refer to the image shown below.

Blazor UI component code behind

Open the [OCR.razor.cs](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Pages/OCR.razor.cs) file and put the following code inside it.

using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.IO;
using BlazorComputerVision.Models;
using BlazorInputFile;
using BlazorComputerVision.Data;

namespace BlazorComputerVision.Pages
{
    public class OCRModel : ComponentBase
    {
        [Inject]
        protected ComputerVisionService computerVisionService { get; set; }

        protected string DetectedTextLanguage;
        protected string imagePreview;
        protected bool loading = false;
        byte[] imageFileBytes;

        const string DefaultStatus = "Maximum size allowed for the image is 4 MB";
        protected string status = DefaultStatus;

        protected OcrResultDTO Result = new OcrResultDTO();
        private AvailableLanguage availableLanguages;
        private Dictionary<string, LanguageDetails> LanguageList = new Dictionary<string, LanguageDetails>();
        const int MaxFileSize = 4 * 1024 * 1024; // 4MB

        protected override async Task OnInitializedAsync()
        {
            availableLanguages = await computerVisionService.GetAvailableLanguages();
            LanguageList = availableLanguages.Translation;
        }

        protected async Task ViewImage(IFileListEntry[] files)
        {
            var file = files.FirstOrDefault();
            if (file == null)
            {
                return;
            }
            else if (file.Size > MaxFileSize)
            {
                status = $"The file size is {file.Size} bytes, this is more than the allowed limit of {MaxFileSize} bytes.";
                return;
            }
            else if (!file.Type.Contains("image"))
            {
                status = "Please uplaod a valid image file";
                return;
            }
            else
            {
                var memoryStream = new MemoryStream();
                await file.Data.CopyToAsync(memoryStream);
                imageFileBytes = memoryStream.ToArray();
                string base64String = Convert.ToBase64String(imageFileBytes, 0, imageFileBytes.Length);

                imagePreview = string.Concat("data:image/png;base64,", base64String);
                memoryStream.Flush();
                status = DefaultStatus;
            }
        }

        protected private async Task GetText()
        {
            if (imageFileBytes != null)
            {
                loading = true;
                Result = await computerVisionService.GetTextFromImage(imageFileBytes);
                if (LanguageList.ContainsKey(Result.Language))
                {
                    DetectedTextLanguage = LanguageList[Result.Language].Name;
                }
                else
                {
                    DetectedTextLanguage = "Unknown";
                }
                loading = false;
            }
        }
    }
}

We are injecting the ComputerVisionService in this class.

The OnInitializedAsync is a Blazor lifecycle method which is invoked when the component is initialized. We are invoking the GetAvailableLanguages method from our service inside the OnInitializedAsync method. We will then initialize the variable LanguageList which is a dictionary to hold the details of available languages.

Inside the ViewImage method, we will check if the uploaded file is an image only and the size is less than 4 MB. We will transfer the uploaded image to the memory stream. We will then convert that memory stream to a byte array.

To set the image preview, we will convert the image from byte array to a base64 encoded string. The GetText method will invoke the GetTextFromImage method from the service and pass the image byte array as an argument. We will search for the language name from the dictionary based on the language code returned from the service. If no language code is available, we will set the language as unknown.

Blazor UI component template

Open the [OCR.razor](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Pages/OCR.razor) file and put the following code inside it.

@page "/computer-vision-ocr"
@inherits OCRModel

<h2>Optical Character Recognition (OCR) Using Blazor and Azure Computer Vision Cognitive Service</h2>

<div class="row">
    <div class="col-md-5">
        <textarea disabled class="form-control" rows="10" cols="15">@Result.DetectedText</textarea>
        <hr />
        <div class="row">
            <div class="col-sm-5">
                <label><strong> Detected Language :</strong></label>
            </div>
            <div class="col-sm-6">
                <input disabled type="text" class="form-control" value="@DetectedTextLanguage" />
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="image-container">
            <img class="preview-image" src=@imagePreview>
        </div>
        <InputFile OnChange="ViewImage" />
        <p>@status</p>
        <hr />
        <button disabled="@loading" class="btn btn-primary btn-lg" @onclick="GetText">
            @if (loading)
            {
                <span class="spinner-border spinner-border-sm mr-1"></span>
            }
            Extract Text
        </button>
    </div>
</div>

We have defined the route for this component. We have inherited the OCRModel class which allows us to access the properties and method of this class from the template. Bootstrap is used for designing the UI. We have a text area to display the detected text and a text box to display the detected language. The image tag is used to show the image preview after uploading the image. The <InputFile> component will allow us to upload an image file and invoke the ViewImage method as we upload the image.

Add styling for the component

Navigate to [BlazorComputerVision\wwwroot\css\site.css](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/wwwroot/css/site.css#L185-L197) file and add the following style definition inside it.

.preview-image {
    max-height: 300px;
    max-width: 300px;
}
.image-container {
    display: flex;
    padding: 15px;
    align-content: center;
    align-items: center;
    justify-content: center;
    border: 2px dashed skyblue;
}

Adding Link to Navigation menu

The last step is to add the link of our OCR component in the navigation menu. Open [BlazorComputerVision/Shared/NavMenu.razor](https://github.com/AnkitSharma-007/Blazor-Computer-Vision-Azure-Cognitive-Services/blob/master/BlazorComputerVision/Shared/NavMenu.razor#L15-L19) file and add the following code into it.

<li class="nav-item px-3">
    <NavLink class="nav-link" href="computer-vision-ocr">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Computer Vision
    </NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

Execution Demo

Press F5 to launch the application. Click on the Computer Vision button on the nav menu on the left. On the next page, upload an image with some text in it and click on the “Extract Text” button. You will see the extracted text in the text area on the left along with the detected language for the text. Refer to the image shown below.

Now we will try to upload an image with some French text on it, you can see the extracted text and the detected language as French. Refer to the image shown below.

If we try to upload an image with an unsupported language, we will get the error. Refer to the image shown below where an image with text written in Hindi is uploaded.

Summary

We have created an optical character recognition (OCR) application using Blazor and the Computer Vision Azure Cognitive Service. We have added the feature of uploading an image file using the BlazorInputFile component. The application is able to extract the printed text from the uploaded image and recognizes the language of the text. The OCR API of the Computer Vision is used which can recognize text in 25 languages.

Get the Source code from GitHub and play around to get a better understanding.

See Also

• Multi-Language Translator Using Blazor And Azure Cognitive Services
• Facebook Authentication And Authorization In Server-Side Blazor App
• Google Authentication And Authorization In Server-Side Blazor App
• Policy-Based Authorization In Angular Using JWT
• Continuous Deployment For Angular App Using Heroku And GitHub
• Hosting A Blazor Application on Firebase
• Deploying A Blazor Application On Azure

Introduction

The latest preview for .NET Core 3 (preview-6) has introduced the functionality to add authentication and authorization in a server-side Blazor application. In this article, we will learn how to implement authentication and authorization using Google in a server-side Blazor application. You can refer to my previous article Understanding Server-side Blazor to get in-depth knowledge on server-side Blazor.

Prerequisites

• Install the latest .NET Core 3.0 Preview SDK from here.
• Install the latest preview of Visual Studio 2019 from here.
• Install ASP.NET Core Blazor Language Services extension from here.

Source Code

Get the source code from GitHub

Create Server Side Blazor Application

To create a server-side Blazor app, open Visual Studio 2019 and follow the steps mentioned below.

1. Click on “Create a new project”.
2. Select “ASP.NET Core Web Application” from available project types. Click on Next.
3. A new “Configure your new project” screen will open. Put the name of the project as BlazorGoogleAuth and click Create.
4. In the next screen, select “.NET Core” and “ASP.NET Core 3.0” from dropdowns on the top left.
5. Select “Blazor (server-side)” from the list of available templates.
6. Click on Change Authentication button, a “Change Authentication” dialog box will open. Select “Individual User Account” and click OK. Click on Create button to create the application.

These steps are shown in the GIF image below.

Before running the application, we need to apply migrations to our app. Navigate to Tools >> NuGet Package Manager >> Package Manager Console.

It will open the Package Manager Console. Put in Update-Database command and hit enter. This will update the database using Entity Framework Code First Migrations.

Open project properties by right clicking on the project in solution explorer and select properties. Select Debug from left side menu then scroll to the bottom of the page. Note the SSL enabled URL. In this case, the URL is https://localhost:44327/. We need this URL to configure the Google API Console project which we will be doing in our next section. Refer to the image below:

Create a Google API Console project

We need to create a Google API console project and obtain a client ID and client secret to configure the Google authentication in our application.

Navigate to https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin. Login with your Google account. Follow the steps mentioned below.

1. Click on “Configure a Project” button.
2. A “Configure a project for Google Sign-in” dialog box will open asking you to select or create a new project.
3. Select “Create a new project” from the dropdown. Name your project “BlazorAuthDemo” and click on Next.
4. In the “Configure your OAuth client” screen, put your product name. You can use any name of your choice. Here we will put “BlazorAuth” as the product name.
5. In the next screen, select “Web server” from the “Where are you calling from” dropdown.
6. It will then ask you to put the “Authorized redirect URIs”. Give the base URL of your application with /signin-google appended to it. For this tutorial, the URL will be https://localhost:44327/signin-google.
7. Click on Create. The dialog box will now prompt you with the client ID and client secret. Make a note of ClientId and ClientSecret field. We will need these values to configure Google authentication in our web app

Refer to the GIF below for a better understanding.

• Do not use the word “Google” in your product name. You will be prompted with an error and you will not be allowed to create the app. This means “BlazorGoogleAuth” is an invalid project name.
• Project names must be between 4 and 30 characters and may only contain letters, numbers, spaces, and hyphens.

Installing Google authentication middleware NuGet package

To configure the ASP.NET Core middleware for Google authentication we need to install the Microsoft.AspNetCore.Authentication.Google nuget package in our application. The version of this nuget package must match the version of .NET Core 3 which we are using in our project.

Open https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.Google/. Select the version of .NET Core 3 from the “Version History”. Copy the command from the “package manager” tab. Run this command in the NuGet package manager console of our application.

For this application, we are using .NET Core 3.0.0-preview6.19307.2. Therefore, we will run the following command in the package manager console of our application.

Install-Package Microsoft.AspNetCore.Authentication.Google -Version 3.0.0-preview6.19307.2

Refer to the image below:

Configure the server-side Blazor app to use Google authentication

We need to store ClientId and ClientSecret field values in our application. We will use Secret Manager tool for this purpose. The Secret Manager tool is a project tool that can be used to store secrets such as password, API Key, etc. for a .NET Core project during the development process. With the Secret Manager tool, we can associate app secrets with a specific project and can share them across multiple projects.

Open our web application once again and Right-click the project in the Solution Explorer. Select Manage User Secrets from the context menu. A secrets.json file will open. Put the following code in it.

{
  "Authentication:Google:ClientId": "Your Google ClientId here",
  "Authentication:Google:ClientSecret": "Your Google ClientSecret here"
}

Now open Startup.cs file and put the following code into ConfigureServices method.

services.AddAuthentication().AddGoogle(googleOptions =>
{
  googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];
  googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];
});

This code will read the ClientId and ClientSecret from the secrets.json file. The AddGoogle()method is an extension method and it is used to configure the Google Authentication options for our application.

Adding authorization to Blazor pages

Blazor has added a new built-in component called AuthorizeView, which is used to display different content based on the authentication state of the application. This component will display the child component only when the user is authorized. The AuthorizeView component is configured in \Shared\LoginDisplay.razor file.

To implement authorization to a specific page, we need to use the [Authorize] attribute. Blazor has introduced a new directive @attribute, which is used to include the [Authorize] attribute for a page. In this application, we will apply [Authorize] to the FetchData component. This will prohibit unauthorized access to this component. Open FetchData.razor page and add the following lines at the top of the page.

@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

Execution Demo

Launch the application. Navigate to Fetch Data component by clicking on the “Fetch data” link on the menu on the left. You will see a “Not authorized” message displayed on the screen. Click “Log In” on the menu at the top. In the next page click on the “Google” button to login with Google. Once you are logged in successfully, you will be able to access the Fetch Data component.

Refer to the GIF below for a better understanding.

Conclusion

We learned how to implement Google authentication and authorization in a server-side Blazor application. We have created and configured a Google API console project to implement Google authentication. To implement authorization for a specific component in Blazor, we have used the [Authorize] attribute. We have used Microsoft.AspNetCore.Authentication.Google nuget package to configure the middleware for Google authentication.

Please get the source code from GitHub and play around to get a better understanding.

Get my book Blazor Quick Start Guide to learn more about Blazor.

Preparing for interviews !!! Read my article on C# Coding Questions For Technical Interviews

See Also

• BlazorGrid – A Reusable Grid Component For Blazor
• Publishing A Blazor Component To Nuget Gallery
• Deploying A Blazor Application On Azure
• Hosting A Blazor Application on Firebase
• Blazor CRUD Using Google Cloud Firestore
• CRUD Using Blazor with MongoDB
• Single Page Application Using Server-Side Blazor

Originally published at https://ankitsharmablogs.com/google-authentication-and-authorization-in-server-side-blazor-app/

Introduction

In this article, we will create a Blazor application using Google Firstore as database provider. We will create a Single Page Application (SPA) and perform CRUD operations on it. We will use Bootstrap 4 to display a modal popup for handling user inputs. The form also has a dropdown list, which will bind to a collection in our database. We will also implement a client-side search functionality to search the employee list by employee name.

Take a look at the final application.

Prerequisites

• Install the .NET Core 2.1 or above SDK from here
• Install latest version of Visual Studio 2017 from here
• Install ASP.NET Core Blazor Language Services extension from here

Source Code

Get the source code from GitHub.

Configuring Cloud Firestore

The first step is to create a project in google Firebase console. Navigate to https://console.firebase.google.com and sign-in with your google account. Click on Add Project link. A pop up window will open as shown in the image below. Provide your project name and click on Create project button at the bottom.

Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. Once the project is created you cannot change your project id. We will use this project id in next section while initializing our application.

Click on the project you just created. A project overview page will open. Select “Database” from left menu. Then click on “Create database” button. A popup window will open asking you to select the “Security rules for Cloud Firestore”. Select “Start in locked mode” and click on enable.

Refer to the image below:

This will enable the database for your project. Firebase project have two options for database — Realtime Database and Cloud Firestore. For this application, we will use “Cloud Firestore” database. Click on “Database” dropdown at the top of the page and select “Cloud Firestore”.

Refer to the image below:

We will create cities collection to store the city name for employees. We will also bind this collection to a dropdown list in our web application from which the user will select the desired city. Click on “Add collection”. Set the collection ID as “cities”. Click on “Next”. Refer to the image below:

Put the Field value as “CityName”, Select string from the Type dropdown and fill the value with city name as “Mumbai”. Click on Save. Refer to the image below:

This will create the “cities” collection and insert the first document in it. Similarly, create four more documents inside this collection and put the “CityName” value as Chennai, New Delhi, Bengaluru and Hyderabad.

We will use “employees” collection to store employee data, but we will not create it manually. We will create “employees” collection while adding the first employee data from the application.

Configuring Google Application Credentials

To access database from our project, we need to set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to a JSON service account key file. This will set an authentication pipeline from our application to cloud Firestore.

To generate the service account key file follow the steps mentioned below:

Step 1: Navigate to https://console.cloud.google.com/iam-admin/. Login with the same google account, you have used to create Firestore DB.

Step 2: Select Project from the drop down in menu bar at the top.

Step 3: Select “Service accounts” from the left menu. Select the service account for which you want to create the key. Click on more button in the “Actions” column in that row, and then click Create key.

Refer to the image below:

Step 4: A popup modal will open asking you to select the key type. Select “JSON” and click on create button. This will create private key for accessing your Firestore account and downloads a JSON key file to your machine. We will use this file to set GOOGLE_APPLICATION_CREDENTIALS environment variable in later part of this article.

Create Blazor Web Application

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as BlazorWithFirestore and press OK.

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select “Blazor (ASP .NET Core hosted)” template and press OK.

Now, our Blazor solution will be created. You can observe that we have three project files created in this solution.

1. BlazorWithFirestore.Client — It has the client side code and contains the pages that will be rendered on the browser.
2. BlazorWithFirestore.Server — It has the server side codes such as data access layer and web API.
3. BlazorWithFirestore.Shared — It contains the shared code that can be accessed by both client and server. It contains our Model classes.

Adding Package reference for Firestore

We need to add the package reference for Google cloud Firestore, which will allow us to access our DB from the Blazor application. Right click on BlazorWithFirestore.Shared project.

Select “Edit BlazorWithFirestore.Shared.csproj”. It will open the BlazorWithFirestore.Shared.csproj file. Add the following lines inside it.

<ItemGroup>  <PackageReference Include="Google.Cloud.Firestore" Version="1.0.0-beta14" /></ItemGroup>

Similarly add these lines to BlazorWithFirestore.Server.csproj file also.

Creating the Model

We will create our model class in BlazorWithFirestore.Shared project. Right click on BlazorWithFirestore.Shared and select Add >> New Folder. Name the folder as Models. Again, right click on Models folder and select Add >> Class to add a new class file. Put the name of you class as Employee.cs and click Add.

Open the Employee.cs class and put the following code into it.

using System;using Google.Cloud.Firestore;namespace BlazorWithFirestore.Shared.Models{    [FirestoreData]    public class Employee    {        public string EmployeeId { get; set; }        public DateTime date { get; set; }        [FirestoreProperty]        public string EmployeeName { get; set; }        [FirestoreProperty]        public string CityName { get; set; }        [FirestoreProperty]        public string Designation { get; set; }        [FirestoreProperty]        public string Gender { get; set; }    }}

We have decorated the class with [FirestoreData] attribute. This will allow us to map this class object to Firestore collection. Only those class properties, which are marked with [FirestoreProperty] attribute, are considered when we are saving the document to our collection. We do not need to save EmployeeId to our database as it is generated automatically.

While fetching the data, we will bind the auto generated document id to the EmployeeId property. Similarly, we will use date property to bind the created date of collection while fetching the record. We will use this date property to sort the list of employees by created date. Hence, we have not applied [FirestoreProperty] attribute to these two properties.

Similarly, create a class file Cities.cs and put the following code into it.

using System;using Google.Cloud.Firestore;namespace BlazorWithFirestore.Shared.Models{    [FirestoreData]    public class Cities    {        public string CityName { get; set; }    }}

Creating Data Access Layer for the Application

Right-click on BlazorWithFirestore.Server project and then select Add >> New Folder and name the folder as DataAccess. We will be adding our class to handle database related operations inside this folder only. Right click on DataAccess folder and select Add >> Class. Name your class EmployeeDataAccessLayer.cs.

Put the following code inside this class.

using System;using System.Collections.Generic;using System.Linq;using System.Threading.Tasks;using BlazorWithFirestore.Shared.Models;using Google.Cloud.Firestore;using Newtonsoft.Json;namespace BlazorWithFirestore.Server.DataAccess{    public class EmployeeDataAccessLayer    {        string projectId;        FirestoreDb fireStoreDb;        public EmployeeDataAccessLayer()        {            string filepath = "C:\\FirestoreAPIKey\\blazorwithfirestore-6d0a096b0174.json";            Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", filepath);            projectId = "blazorwithfirestore";            fireStoreDb = FirestoreDb.Create(projectId);        }        public async Task<List<Employee>> GetAllEmployees()        {            try            {                Query employeeQuery = fireStoreDb.Collection("employees");                QuerySnapshot employeeQuerySnapshot = await employeeQuery.GetSnapshotAsync();                List<Employee> lstEmployee = new List<Employee>();                foreach (DocumentSnapshot documentSnapshot in employeeQuerySnapshot.Documents)                {                    if (documentSnapshot.Exists)                    {                        Dictionary<string, object> city = documentSnapshot.ToDictionary();                        string json = JsonConvert.SerializeObject(city);                        Employee newuser = JsonConvert.DeserializeObject<Employee>(json);                        newuser.EmployeeId = documentSnapshot.Id;                        newuser.date = documentSnapshot.CreateTime.Value.ToDateTime();                        lstEmployee.Add(newuser);                    }                }                List<Employee> sortedEmployeeList = lstEmployee.OrderBy(x => x.date).ToList();                return sortedEmployeeList;            }            catch            {                throw;            }        }        public async void AddEmployee(Employee employee)        {            try            {                CollectionReference colRef = fireStoreDb.Collection("employees");                await colRef.AddAsync(employee);            }            catch            {                throw;            }        }        public async void UpdateEmployee(Employee employee)        {            try            {                DocumentReference empRef = fireStoreDb.Collection("employees").Document(employee.EmployeeId);                await empRef.SetAsync(employee, SetOptions.Overwrite);            }            catch            {                throw;            }        }        public async Task<Employee> GetEmployeeData(string id)        {            try            {                DocumentReference docRef = fireStoreDb.Collection("employees").Document(id);                DocumentSnapshot snapshot = await docRef.GetSnapshotAsync();                if (snapshot.Exists)                {                    Employee emp = snapshot.ConvertTo<Employee>();                    emp.EmployeeId = snapshot.Id;                    return emp;                }                else                {                    return new Employee();                }            }            catch            {                throw;            }        }        public async void DeleteEmployee(string id)        {            try            {                DocumentReference empRef = fireStoreDb.Collection("employees").Document(id);                await empRef.DeleteAsync();            }            catch            {                throw;            }        }        public async Task<List<Cities>> GetCityData()        {            try            {                Query citiesQuery = fireStoreDb.Collection("cities");                QuerySnapshot citiesQuerySnapshot = await citiesQuery.GetSnapshotAsync();                List<Cities> lstCity = new List<Cities>();                foreach (DocumentSnapshot documentSnapshot in citiesQuerySnapshot.Documents)                {                    if (documentSnapshot.Exists)                    {                        Dictionary<string, object> city = documentSnapshot.ToDictionary();                        string json = JsonConvert.SerializeObject(city);                        Cities newCity = JsonConvert.DeserializeObject<Cities>(json);                        lstCity.Add(newCity);                    }                }                return lstCity;            }            catch            {                throw;            }        }    }}

In the constructor of this class we are setting the GOOGLE_APPLICATION_CREDENTIALS environment variable. You need to set the value of filepath variable to the path where the JSON service account key file is located in your machine. Remember we downloaded this file in the previous section. The projectId variable should be set to the project id of your Firebase project.

We have also defined the methods for performing CRUD operations. The GetAllEmployees method will fetch the list of all employee document from our “employees” collection. It will return the employee list sorted by document creation date.

The AddEmployee method will add a new employee document to our “employees” collection. If the collection does not exist, it will create the collection first then insert a new document in it.

The UpdateEmployee method will update the field values of an already existing employee document, based on the employee id passed to it. We are binding the document id to employeeId property, hence we can easily manipulate the documents.

The GetEmployeeData method will fetch a single employee document from our “employees” collection based on the employee id.

DeleteEmployee method will delete the document for a particular employee from the “employees” collection.

GetCityData method will return the list of cities from “cities” collection.

Adding the web API Controller to the Application

Right-click on BlazorWithFirestore.Server/Controllers folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Web from the left panel, then select “API Controller Class” from templates panel and put the name as EmployeeController.cs. Click Add.

This will create our API EmployeeController class. We will call the methods of EmployeeDataAccessLayer class to fetch data and pass on the data to the client side.

Open EmployeeController.cs file and put the following code into it.

using System;using System.Collections.Generic;using System.Threading.Tasks;using BlazorWithFirestore.Server.DataAccess;using BlazorWithFirestore.Shared.Models;using Microsoft.AspNetCore.Mvc;namespace BlazorWithFirestore.Server.Controllers{    [Route("api/[controller]")]    public class EmployeeController : Controller    {        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();        [HttpGet]        public Task<List<Employee>> Get()        {            return objemployee.GetAllEmployees();        }        [HttpGet("{id}")]        public Task<Employee> Get(string id)        {            return objemployee.GetEmployeeData(id);        }        [HttpPost]        public void Post([FromBody] Employee employee)        {            objemployee.AddEmployee(employee);        }        [HttpPut]        public void Put([FromBody]Employee employee)        {            objemployee.UpdateEmployee(employee);        }        [HttpDelete("{id}")]        public void Delete(string id)        {            objemployee.DeleteEmployee(id);        }        [HttpGet("GetCities")]        public Task<List<Cities>> GetCities()        {            return objemployee.GetCityData();        }    }}

Creating the Blazor component

We will create the component in the BlazorWithFirestore.Client/Pages folder. The application template provides the Counter and Fetch Data files by default in this folder. Before adding our own component file, we will delete these two default files to make our solution cleaner. Right-click on BlazorWithFirestore.Client/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “ASP.NET Core” from the left panel, then select “Razor Page” from templates panel and name it EmployeeData.cshtml. Click Add. Refer to the image below:

This will add an EmployeeData.cshtml page to our BlazorSPA.Client/Pages folder. This razor page will have two files – EmployeeData.cshtml and EmployeeData.cshtml.cs.

Adding references for JS Interop

We will be using a bootstrap modal dialog in our application. We will also include a few Font Awesome icons for styling in the application. To be able to use these two libraries, we need to add the CDN references to allow the JS interop.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Here, we have included the CDN references, which will allow us to use the bootstrap modal dialog and Font Awesome icons in our applications. Now, we will add codes to our view files.

EmployeeData.cshtml.cs

Open EmployeeData.cshtml.cs and put the following code into it.

using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.Threading.Tasks;using BlazorWithFirestore.Shared.Models;using Microsoft.AspNetCore.Blazor;using Microsoft.AspNetCore.Blazor.Components;namespace BlazorWithFirestore.Client.Pages{    public class EmployeeDataModel : BlazorComponent    {        [Inject]        protected HttpClient Http { get; set; }        protected List<Employee> empList = new List<Employee>();        protected List<Cities> cityList = new List<Cities>();        protected Employee emp = new Employee();        protected string modalTitle { get; set; }        protected string searchString { get; set; }        protected override async Task OnInitAsync()        {            await GetCityList();            await GetEmployeeList();        }        protected async Task GetCityList()        {            cityList = await Http.GetJsonAsync<List<Cities>>("api/Employee/GetCities");        }        protected async Task GetEmployeeList()        {            empList = await Http.GetJsonAsync<List<Employee>>("api/Employee");        }        protected void AddEmployee()        {            emp = new Employee();            modalTitle = "Add Employee";        }        protected async Task EditEmployee(string empID)        {            emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID);            modalTitle = "Edit Employee";        }        protected async Task SaveEmployee()        {            if (emp.EmployeeId != null)            {                await Http.SendJsonAsync(HttpMethod.Put, "api/Employee/", emp);            }            else            {                await Http.SendJsonAsync(HttpMethod.Post, "/api/Employee/", emp);            }            await GetEmployeeList();        }        protected async Task DeleteConfirm(string empID)        {            emp = await Http.GetJsonAsync<Employee>("/api/Employee/" + empID);        }        protected async Task DeleteEmployee(string empID)        {            Console.WriteLine(empID);            await Http.DeleteAsync("api/Employee/" + empID);            await GetEmployeeList();        }        protected async Task SearchEmployee()        {            await GetEmployeeList();            if (searchString != "")            {                empList = empList.Where(                x => x.EmployeeName.IndexOf(searchString,                StringComparison.OrdinalIgnoreCase) != -1).ToList();            }        }    }}

Here, we have defined the EmployeeDataModel class, which is inheriting from BlazorComponent. This allows the EmployeeDataModel class to act as a Blazor component.

We are also injecting the HttpClient service to enable the web API calls to our EmployeeController API.

We will use the two variables — empList and cityList — to hold the data of our Employee and Cities collections respectively. The modalTitle property, which is of type string, is used to hold the title that will be displayed in the modal dialog. The value provided in the search box is stored in the searchString property which is also of type string.

The GetCityList method will make a call to our web API GetCities method to fetch the list of city data from the cities collection. The GetEmployeeList method will send a GET request to our web API to fetch the list of Employee Data from the Employee table.

We are invoking these two methods inside the OnInitAsync method, to ensure that the Employee Data and the cities data will be available as the page loads.

The AddEmployee method will initialize an empty instance of the Employee object and set the modalTitle property, which will display the title message on the Add modal popup.

The EditEmployee method will accept the employee ID as the parameter. It will send a GET request to our web API to fetch the record of the employee corresponding to the employee ID supplied to it.

We will use the SaveEmployee method to save the record of the employee for both the Add request and Edit request. To differentiate between the Add and the Edit requests, we will use the EmployeeId property of the Employee object. If an Edit request is made, then the EmployeeId property contains a string value, and we will send a PUT request to our web API, which will update the record of the employee. Otherwise, if we make an Add request, then the EmployeeId property is not initialized, and hence it will be null. In this case, we need to send a POST request to our web API, which will create a new employee record.

The DeleteConfirm method will accept the employee ID as the parameter. It will fetch the Employee Data corresponding to the employee ID supplied to it.

The DeleteEmployee method will send a delete request to our API and pass the employee ID as the parameter. It will then call the GetEmployeeList method to refresh the view with the updated list of Employee Data.

The SearchEmployee method is used to implement the search by the employee name functionality. We will return all the records of the employee, which will match the search criteria either fully or partially. To make the search more effective, we will ignore the text case of the search string. This means the search result will be same whether the search text is in uppercase or in lowercase.

EmployeeData.cshtml

Open EmployeeData.cshtml page and put the following code into it.

@page "/employeerecords"@inherits EmployeeDataModel<h1>Employee Data</h1><div class="container">    <div class="row">        <div class="col-xs-3">            <button class="btn btn-primary" data-toggle="modal" data-target="#AddEditEmpModal" onclick="@AddEmployee">                <i class="fa fa-user-plus"></i>                Add Employee            </button>        </div>        <div class="input-group col-md-4 offset-md-5">            <input type="text" class="form-control" placeholder="Search Employee" bind="@searchString" />            <div class="input-group-append">                <button class="btn btn-info" onclick="@SearchEmployee">                    <i class="fa fa-search"></i>                </button>            </div>        </div>    </div></div><br />@if (empList == null){    <p><em>Loading...</em></p>}else{    <table class='table'>        <thead>            <tr>                <th>Name</th>                <th>Gender</th>                <th>Designation</th>                <th>City</th>            </tr>        </thead>        <tbody>            @foreach (var emp in empList)            {                <tr>                    <td>@emp.EmployeeName</td>                    <td>@emp.Gender</td>                    <td>@emp.Designation</td>                    <td>@emp.CityName</td>                    <td>                        <button class="btn btn-outline-dark" data-toggle="modal" data-target="#AddEditEmpModal"                                onclick="@(async () => await EditEmployee(@emp.EmployeeId))">                            <i class="fa fa-pencil-square-o"></i>                            Edit                        </button>                        <button class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteEmpModal"                                onclick="@(async () => await DeleteConfirm(@emp.EmployeeId))">                            <i class="fa fa-trash-o"></i>                            Delete                        </button>                    </td>                </tr>            }        </tbody>    </table>}<div class="modal fade" id="AddEditEmpModal">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h3 class="modal-title">@modalTitle</h3>                <button type="button" class="close" data-dismiss="modal">                    <span aria-hidden="true">X</span>                </button>            </div>            <div class="modal-body">                <form>                    <div class="form-group">                        <label class="control-label">Name</label>                        <input class="form-control" bind="@emp.EmployeeName" />                    </div>                    <div class="form-group">                        <label class="control-label">Gender</label>                        <select class="form-control" bind="@emp.Gender">                            <option value="">-- Select Gender --</option>                            <option value="Male">Male</option>                            <option value="Female">Female</option>                        </select>                    </div>                    <div class="form-group">                        <label class="control-label">Designation</label>                        <input class="form-control" bind="@emp.Designation" />                    </div>                    <div class="form-group">                        <label class="control-label">City</label>                        <select class="form-control" bind="@emp.CityName">                            <option value="-- Select City --">-- Select City --</option>                            @foreach (var city in cityList)                            {                                <option value="@city.CityName">@city.CityName</option>                            }                        </select>                    </div>                </form>            </div>            <div class="modal-footer">                <button class="btn btn-block btn-success"                        onclick="@(async () => await SaveEmployee())" data-dismiss="modal">                    Save                </button>            </div>        </div>    </div></div><div class="modal fade" id="deleteEmpModal">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h3 class="modal-title">Confirm Delete !!!</h3>                <button type="button" class="close" data-dismiss="modal">                    <span aria-hidden="true">X</span>                </button>            </div>            <div class="modal-body">                <table class="table">                    <tr>                        <td>Name</td>                        <td>@emp.EmployeeName</td>                    </tr>                    <tr>                        <td>Gender</td>                        <td>@emp.Gender</td>                    </tr>                    <tr>                        <td>Designation</td>                        <td>@emp.Designation</td>                    </tr>                    <tr>                        <td>City</td>                        <td>@emp.CityName</td>                    </tr>                </table>            </div>            <div class="modal-footer">                <button class="btn btn-danger" data-dismiss="modal"                        onclick="@(async () => await DeleteEmployee(@emp.EmployeeId))">                    Delete                </button>                <button data-dismiss="modal" class="btn">Cancel</button>            </div>        </div>    </div></div>

The route for our component is defined at the top as “/employeerecords”. To use the methods defined in the EmployeeDataModel class, we will inherit it using the @inherits directive.

We have defined an Add Employee button. Upon clicking, this button will invoke the AddEmployee method and open a modal dialog, which allows the user to fill out the new Employee Data in a form.

We have also defined our search box and a corresponding search button. The search box will bind the value to searchString property. On clicking the search button, SearchEmployee method will be invoked, which will return the filtered list of data as per the search text. If the empList property is not null, we will bind the Employee Data to a table to display it on the web page. Each employee record has the following two action buttons corresponding to it:

• Edit: This button will perform two tasks. It will invoke the EditEmployee method and open the edit employee modal dialog for editing the employee record.
• Delete: This button will also perform two tasks. It will invoke the DeleteConfirm method and open a delete confirm modal dialog, asking the user to confirm the deletion of the employee’s record .

We have defined a form inside the bootstrap modal to accept user inputs for the employee records. The input fields of this form will bind to the properties of the employee class. The City field is a drop-down list, which will bind to the cities collection of the database with the help of the cityList variable. When we click on the save button, the SaveEmployee method will be invoked and the modal dialog will be closed.

When user click on the Delete button corresponding to an employee record, another bootstrap modal dialog will be displayed. This modal will show the Employee Data in a table and ask the user to confirm the deletion. Clicking on the Delete button inside this modal dialog will invoke the DeleteEmployee method and close the modal. Clicking on the Cancel button will close the modal without performing any action on the data.

Adding the navigation link to our component

Before executing the application, we will add the navigation link to our component in the navigation menu.

Open the BlazorWithFirestore.Client/Shared/NavMenu.cshtml page and add the following navigation link:

<li class="nav-item px-3">  <NavLink class="nav-link" href="employeerecords">    <span class="oi oi-list-rich" aria-hidden="true"></span> Employee Data  </NavLink></li>

Hence, we have successfully created a Single Page Application (SPA) using Blazor with the help of cloud Firestore as database provider.

Execution Demo

Press F5 to launch the application.

A web page will open as shown in the image below. The navigation menu on the left is showing navigation link for Employee data page.

You can perform the CRUD operations on this application as shown in the GIF image at the start of this article.

Conclusion

We have created a Single Page Application (SPA) using Blazor with the help of Google cloud Firestore as database provider. We have created a sample employee record management system and performed CRUD operations on it. Firestore is a NoSQL database, which allows us to store data in form of collections and documents. We have also used a bootstrap modal popup to handle user inputs. We have also implemented a search box to search the employee list by employee name.

Please get the source code from GitHub and play around to get a better understanding.

Get my book Blazor Quick Start Guide to learn more about Blazor.

Preparing for interviews? Read my article on C# Coding Questions For Technical Interviews

See Also

• BlazorGrid — A Reusable Grid Component For Blazor
• Publishing A Blazor Component To Nuget Gallery
• Deploying a Blazor Application on IIS
• Deploying A Blazor Application On Azure
• Hosting A Blazor Application on Firebase
• CRUD Using Blazor with MongoDB
• Single Page Application Using Server-Side Blazor

Originally published at https://ankitsharmablogs.com/

Introduction

In this article, we will learn how to deploy a Blazor application on Firebase. We will create a basic calculator app using Blazor and host it on Firebase. This application will not have any server-side code or web API logic. We will use Visual Studio 2017 to build and publish the application. We will use CLI to deploy the application on Firebase.

Prerequisites

You need to install following prerequisites to create a Blazor application.

• Install the .NET Core 2.1 or above SDK from here
• Install the latest version of Visual Studio 2017 from here
• Install ASP.NET Core Blazor Language Services extension from here

Creating a Blazor application

We will create a basic calculator application for this demo. Since this is a basic calculator, it will take two operands, and support four arithmetic functions — addition, subtraction, multiplication, and division.

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel. Then, select ASP.NET Core Web Application from available project types. Put the name of the project as SampleCalculator and press OK.

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.1” from these dropdowns. Then, select “Blazor” template and press OK.

This will create your Blazor application. We will now create our calculator component.

Creating the Calculator Component

For this application, we will use the single page component structure. The logic and the UI will be in the same file.

To create our component, right-click on SampleCalculator/Pages folder and then select Add >> New Item. An Add New Item dialog box will open, asking you to select the desired item template from the provided list of items. Select ASP.NET Core from the left panel, and then select Razor View from the templates panel. Put the name of file as Calculator.cshtml and click Add.

Refer to the following screenshot:

Open the Calculator.cshtml file and put the following code into it:

@page "/calculator"<h1>Basic Calculator Using Blazor</h1><hr /><div>    <div class="row">        <div class="col-sm-3">            <label class="control-label">First Number</label>        </div>        <div class="col-sm-4">            <input class="form-control" type="text" placeholder="Enter First Number" bind="@operand1" />        </div>    </div>    <br />    <div class="row">        <div class="col-sm-3">            <label class="control-label">Second Number</label>        </div>        <div class="col-sm-4">            <input class="form-control" type="text" placeholder="Enter Second Number" bind="@operand2" />        </div>    </div>    <br />    <div class="row">        <div class="col-sm-3">            <label class="control-label">Result</label>        </div>        <div class="col-sm-4">            <input readonly class="form-control" bind="@finalResult" />        </div>    </div>    <br />    <div class="row">        <div class="col-md-3">            <button onclick="@AddNumbers" class="btn btn-primary">                Add                (+)            </button>        </div>        <div class="col-md-3">            <button onclick="@SubtractNumbers" class="btn btnwarning">Subtract (−)</button>        </div>        <div class="col-md-3">            <button onclick="@MultiplyNumbers" class="btn btn-success">Multiply (X)</button>        </div>        <div class="col-md-3">            <button onclick="@DivideNumbers" class="btn btn-info">Divide (/)</button>        </div>    </div></div>@functions {double operand1 { get; set; }double operand2 { get; set; }string finalResult { get; set; }void AddNumbers(){    finalResult = (operand1 + operand2).ToString();}void SubtractNumbers(){    finalResult = (operand1 - operand2).ToString();}void MultiplyNumbers(){    finalResult = (operand1 * operand2).ToString();}void DivideNumbers(){    if (operand2 != 0)    {        finalResult = (operand1 / operand2).ToString();    }    else    {        finalResult = "Cannot Divide by Zero";    }}}

In the HTML part of the code, we have defined two textboxes to read the operand input from the user. We have a textbox to display the result of arithmetic operations. We have also defined four buttons, one for each arithmetic operation. The onclick event of the buttons will invoke the methods that will provide the output. Once it has performed the corresponding operation on both operands.

In the @functions section, we have defined two properties to bind to the user input value, and another property to display the calculation result. To handle our arithmetic operations, we have defined four methods that will perform the desired operations on the operands and set the value of finalResult that will then bind to the Result field on the UI.

Add the navigation link for this component in Shared/NavMenu.cshtml file. Press F5 to run the application and you can see the output screen as shown in the image below:

This application is still in a development environment. Before hosting it on Firebase, we need to publish it.

Publishing the Blazor application

Right click on the project and click publish. Refer to the image below:

You will see a screen similar to below. Select Folder from the left menu and provide a folder path. You can provide any folder path where you want to publish your app.

Click on publish. Visual Studio will start publishing your application. If there are no build errors then your application will be published successfully to the folder you have mentioned.

After the publishing is successful, we will proceed to host this application on Firebase.

Adding Project on Firebase

The first step to host any application on Firebase is to add a new project on Firebase console.

Navigate to https://console.firebase.google.com and sign in with your Google account. Click on Add Project link. A pop up window will open as shown in the image below. Provide your project name and click on Create project button at the bottom.

Note the project id here. Firebase project ids are globally unique. You can edit your project id while creating a new project. One the project is created you cannot change your project id. We will use this project id in the next section while initializing our application.

Deploying with Firebase

Open the folder where you have published your Blazor application. Here you can see a folder “SampleCalculator” and a web.config file. Inside “SampleCalculator” we will have another folder with name “dist”. We will publish the contents from this “dist” folder.

Open a command prompt/PowerShell window inside the “SampleCalculator” folder. Now follow the steps mentioned below:

Step 1: Login using Firebase

Execute the following command:

firebase login

It will open a browser window and ask you to login into Firebase. Login using your Google account. Upon successful login navigate back to your CLI.

Step 2: Initializing your application

Execute the following command

firebase init

This command will initialize a firebase project. You will be asked a set of questions. Answer them as shown below:

• Are you ready to proceed? — Press Y
• Which Firebase CLI features do you want to set up for this folder? — select Hosting
• Select a default Firebase project for this directory: — If the project you added in the last section appears in the list, select it, else select “don’t set up a default project”.
• What do you want to use as your public directory? — dist
• Configure as a single-page app (rewrite all URLs to /index.html)? — y
• File dist/index.html already exists. Overwrite? — N

You will get a “Firebase initialization complete!” message.

Step 3: Adding a default project

If you already selected a default project in step 2 then you can skip this step.

If you have not selected a default project then you need to add it manually here. Run the following command:

firebase use --add yourProjectId

In this case, it will be

firebase use --add blazorcalc

You will get a success message as “Now using project blazorcalc”.

Step 4: Deploy on Firebase

Finally, run the following command to deploy your application on Firebase.

firebase deploy

This command will deploy your Blazor application on Firebase and upon success, it will give you a hosting URL.

All the steps mentioned above is shown in the GIF below:

Execution Demo

Open the hosting URL. You can see the application in your browser as shown in the image below:

Article Extension

We can follow the same steps to host an Angular application on Firebase.

Run the following command to build an Angular app for prod.

ng build --prod

It will create the “dist” folder in your application’s root folder. Once you get the “dist” folder follow the same steps as mentioned above.

Conclusion

We learned how to create a sample calculator application using Blazor. We also learned how to deploy this application to Firebase.

You can find the code for this sample calculator application at Github.

Get my book Blazor Quick Start Guide to learn more about Blazor.

Preparing for interviews? Read my article on C# Coding Questions For Technical Interviews

See Also

• BlazorGrid — A Reusable Grid Component For Blazor
• Publishing A Blazor Component To Nuget Gallery
• Deploying a Blazor Application on IIS
• Deploying A Blazor Application On Azure
• CRUD Using Blazor with MongoDB
• Single Page Application Using Server-Side Blazor

Originally published at https://ankitsharmablogs.com/

Introduction

In this article, we will learn how to deploy an ASP.NET Core hosted Blazor application with the help of IIS 10 on a Windows 10 machine. We will be using Visual Studio 2017 to publish the app and SQL Server 2014 to handle DB operations. We will also troubleshoot some of the common hosting issues for a Blazor application.

Prerequisites

• Install IIS in your machine
• Install URL Rewrite module from here

Please refer to my previous article, How to create a cascading DropDownList in Blazor using EF Core, to create the application that we will be deploying in this tutorial.

Installing .NET Core hosting bundle

Since we are going to deploy an ASP.NET Core hosted Blazor application, the first step is to install the .NET Core hosting bundle in our machine.

Follow the below steps to download the .NET Core hosting bundle:

Step 1

Open https://www.microsoft.com/net/download/all

Step 2

Select the latest non-preview .NET Core runtime from the list. For this tutorial, we will select .NET Core Runtime 2.0.7.

Refer to the image below:

Step 3

On the .NET Core runtime download page, scroll down to Windows section, select the “Hosting Bundle Installer” link to download the “.NET Core Hosting Bundle”. Refer to the image below:

Once the download is finished, double-click to start installing it. You will see a window similar to the one shown below:

Important Note

1. The .NET Core hosting bundle should be installed only after installing IIS. If you the bundle before installing IIS then you need to repair the bundle after installing IIS so that it will update its dependencies for IIS.
2. Restart the machine after installing the .NET Core hosting bundle.

Publishing the Blazor application

Once the .NET Core hosting bundle installation is successful and you have restarted your machine, open the Blazor application solution using VS 2017.

Right click on the Server project of your solution and click publish. In this case it will be BlazorDDL.Server >> Publish.

You will see a screen similar to what’s shown below. Select Folder from the left menu and provide a folder path. You can provide any folder path where you want to publish your app.

Click on publish. Visual Studio will start publishing your application. If there are no build errors, then your application will be published successfully to the folder you have mentioned.

After the publishing is successful, we will move on to configure IIS.

Configuring IIS

Open IIS and right click on Sites >> Add Web Site.

An “Add Website” pop up box will open. Here we need to furnish details in three fields

1. Site name: Put any name of your choice. Here I will put “ankitsite”.
2. Physical Path: The path to the folder where you have published your application.
3. Host name: This is the name we put in browser to access our application. We will put ankitsite.com for this demo.

Click on OK to create the website. Refer to the image below:

The next step is to configure the “Application Pool” for our site. The application pool name will be same as the “Site name” we provided in the last step. Therefore, in this case the application pool name will be “ankitsite”.

Click to “Application Pools” from the left panel and double click on the pool “ankitsite”. It will open an “edit application pool” window. Select “No Managed Code” from the .NET CLR version dropdown. Refer to the image below:

Here is the whole process of configuring IIS explained in a gif image.

Configuring the DNS host

The last step is to configure our DNS host file.

Navigate to the C:\Windows\System32\drivers\etc path in your machine and open the “hosts” file using any text editor.

We need to add the hostname that we provided in IIS against the localhost IP address. Refer to the image below:

And now we have successfully hosted a Blazor application on IIS.

Execution Demo

Open any browser on your machine and enter the hostname you have configured. You can see that the application will open in the browser window.

Troubleshooting common hosting issues

In this section, we will look into some of the common problems that you can face while hosting a Blazor application.

1. You are unable to open the website and get a DNS not found error

Check if the hostname is configured correctly in the host file. Make sure that your machine is not connected to any VPN server. Also, if you are using any Web proxy, then disable it.

2. HTTP Error 500.19 — Internal Server Error — The requested page cannot be accessed because the related configuration data for the page is invalid.

This error message is clear. The publish folder is inaccessible because of insufficient permissions. Grant Read permission to the IIS_IUSRS group on the publish folder so that it can access the Web.config file.

3. The website is loading but data is not getting populated, and you get a 500 Internal server error

Make sure that your connection string is in the correct format. The user id that you have specified in your connection string should have db_datareader and db_datawriter permissions. If the issue persists, then provide the user with db_owner permission.

4. The data is not getting populated and you get an “operation not allowed” exception.

This issue generally appears when you try to do a PUT, POST or DELETE operation in your web API. To mitigate this issue we need to alter the IIS setup configuration.

Navigate to Control Panel >> Turn Windows feature on or off. Then navigate to Internet Information Services >> World Wide Web Services >> Common HTTP Features and uncheck the “WebDAV Publishing” option and click ok. Refer to the image below:

5. “Failed to load : No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

The cause of this error is that the client and the server of the application are not on the same port. The browser will restrict the application to make web API calls due to same-origin policy. To resolve this issue, you need to enable Cross-Origin Requests (CORS) in your application. Please refer to the Microsoft documents on Enable Cross-Origin Requests (CORS) in ASP.NET Core.

When you republish the application, do not forget to refresh your website as well as the application pool in IIS.

Conclusion

In this article, we learned how to deploy a Blazor application on IIS on a Windows machine. We also learned how to resolve some of the common hosting issues while deploying a Blazor application.

Get my book Blazor Quick Start Guide to learn more about Blazor.

You can check out my other articles on Blazor here.

You can also find this article at C# Corner.

See Also

• ASP.NET Core — Getting Started With Blazor
• ASP.NET Core — CRUD Using Blazor And Entity Framework Core
• ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
• ASP.NET Core — CRUD With React.js And Entity Framework Core
• ASP.NET Core — Using Highcharts With Angular 5

Originally published at https://ankitsharmablogs.com/