SemVer is perhaps the the most widely used versioning scheme today. For example, both Nuget and npm recommend and support it, and VS Code uses it as well.

In most GitHub repos that use the GitHub Releases feature to publish releases, you would see a SemVer version number in the latest release badge on the home page, as can be seen in the screenshot below:

I frequently need to set a SemVer version number when building ASP.NET Core API projects, and then read or report this at runtime.

For example, if I build a minimal API with its version set to 1.0.2-beta, this would be reported by a /version endpoint exposed by the API, as shown in the screenshot below from Hoppscotch (this is a Postman-like tool with the convenience that it runs the browser):

Checking that the version reported from deployed services, such as web apps and APIs, is correct is a crucial part of my CD pipeline and is one of the smoke tests I use to determine if a deployment succeeded.

One slight complication when setting a SemVer version number on .NET assemblies is that .NET originally used four part version numbers like 1.0.3.212 and assemblies still have these (assembly is the .NET term for units of code compiled to .NET bytecode, the most typical of these being dll’s and exe’s).

The other is that .NET has not one but many, slightly different, version numbers that are present in the same assembly.

In this article, I’ll show you how to sidestep these quirks and stamp a SemVer version number on a .NET assembly during build, then read it back at runtime.

Table of Contents

• Structure of a SemVer Version Number

• The Many Version Numbers of a .NET Assembly

• How to Set a SemVer Version Number

• How to Read an Assembly’s SemVer Version at Runtime

• Conclusion

Structure of a SemVer Version Number

Consider a SemVer version number like 1.0.2 or 1.0.2-beta. It has the form <major>.<minor>.<patch>-<prerelease>

This is what the various components mean:

The <major> component of the version number would be incremented only if the new release would break an existing (most recent) release.

In case of a UI app, clients may be taken to mean human clients. So if the new release would break users’ existing assets such as workflow definitions, this would call for incrementing the major version number. In this event, if the previous release was 1.0.2, the new release should be 2.0.0 (all lower components of the version number would reset).

In case of a library, such as a library package on Nuget or NPM, the clients would be other code. So if the new release would break existing client code, i.e. it would not be backwards compatible with its own previous version, then again it is the <major> component would be incremented.

<minor> is incremented if new features have been added but the new version is still backwards compatible. So from 1.0.2 you would go to 1.1.0.

<patch> is incremented when a new release needs to be made even though there is no breaking change and no new functionality has been added. This could happen, for example, if there was a bugfix that had to be released.

-<prerelease> suffix is optional. It is typically suffixed to a three part version number when software needs to be made available during prerelease testing phases such as alpha and beta. For example, before generally releasing version 1.0.2 of your software, you can make it available to your beta testers as 1.0.2-beta.

The <prerelease> component can pretty much be any string of your choosing and the only requirement is that it is either an alphanumeric identifier such as beta or 12 or alpha2 (no characters other than numbers or letters of the alphabet) or multiple alphanumeric identifiers separated by a dot(.) e.g. development.version.

The Many Version Numbers of a .NET Assembly

As Andrew Lock’s article on .NET versioning explains, a .NET assembly has not one but several different version numbers:

• AssemblyVersion: This is a four part version number, for example, 1.0.2.0. It is used by the runtime when loading linked assemblies.

• FileVersion: This is the version number reported for a .dll file in Windows File Explorer when you right click the assembly and select Properties.

• InformationalVersion: Yet another version number and, like FileVersion, can be seen in Properties dialog if you right-click the assembly in Windows and select Properties. This can contain strings and not only integers and dots that AssemblyVersion and FileVersion are constrained to.

• PackageVersion: If the project is a Nuget package, this would be the version number of the package that the assembly is part of.

All of these version numbers are emitted into the assembly during compilation as metadata. You can see them if you inspect the assembly with JetBrains dotPeek (free) or Red gate Reflector (not free) or similar.

FileVersion and InformationalVersion can also be seen in the Details tab of the Properties dialog that appears when you right-click the assembly file in Windows File Explorer and select Properties:

In the screenshot above, “Product version” is the caption for InformationalVersion whereas “File version” is the caption for FIleVersion.

Of the four types of version numbers described above, only the first three apply to any assembly (i.e. whether or not the assembly is part of a Nuget package).

Of those three, AssemblyVersion alsways adds a 0 in the fourth place if you try to set a SemVer version which only has three numbers (plus an optional prerelease suffix). For example if you try to set a SemVer version of 1.0.2-beta during build and then read the AssemblyVersion value at run time in the assembly, it would be 1.0.2.0.

FileVersion does the same, as shown in the screenshot above.

InformationalVersion is the only version number which would get set exactly to the server version you set during build, as the screenshot above shows.

Therefore, InformationalVersion is what we need to set with a SemVer version during build, and read back at run time.

How to Set a SemVer Version Number

There are two things you need to do to set a SemVer version number on an assembly during build.

First, in a <PropertyGroup> element in the project’s csproj file, add element <IncludeSourceRevisionInInformationalVersion>false</IncludeSourceRevisionInInformationalVersion>:

<PropertyGroup>
 ...
 <IncludeSourceRevisionInInformationalVersion>false</IncludeSourceRevisionInInformationalVersion> 
</PropertyGroup>

As described in this issue, this ensures that InformationalVersion is set exactly to the SemVer version number we specified and does not get a +<hash code> tacked on at the end.

Second, pass the version number as value of Version property passed to dotnet build command e.g.:

dotnet build --configuration Release -p Version=1.0.2-beta

This would set InformationalVersion in the compiled assembly (.exe or .dll file) to 1.0.2-beta.

Incidentally, it would also set AssemblyVersion and FileVersion (an extra 0 would be added to the end of 1.0.2) but we are not interested in those.

Note that instead pf passing Version argument on the command line, you can set MS Build property <Version>1.0.2-beta</Version> in a <PropertyGroup> element in the csproj file. However passing a value of Version parameter to dotnet build is simpler because the csproj file does not need to be modified everytime the version number is incremented. This is helpful in CD pipelines. If you do set <Version> in csproj file, this will be overridden by whatever you provide on the dotnet build command line as the value of the Version property.

How to Read an Assembly’s SemVer Version at Runtime

Code that reads InfromationalVersion at run time is as follows:

string? version = Assembly.GetEntryAssembly()?.
  GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.
  InformationalVersion;

In my minimal APIs, to add a /version endpoint as I showed in the Introduction section above, I place the above snippet in Program.cs, then add the following snippet immediately after. Note that the whole thing should appear before builder.Build() is called:

//this object of an anonymous type will 
//be serialised as JSON in response body
//when returned by a handler
var objVersion = new { Version = version ?? "" };

//OTHER CODE
//var app = builder.Build()

After builder.Build() is called, I create the handler for the /version endpoint:

app.MapGet("/version", () => objVersion);

Now when I run the API project and call the /version endpoint, I get the version number back in a JSON object in HTTP response body:

{
  "version": "1.0.2-beta"
}

This is what the Hoppscotch screenshot in the Introduction showed.

Conclusion

This article showed you how to set a SemVer version number in your .NET assemblies.

It also showed you how to read the version number at runtime.

We just posted a course on the freeCodeCamp.org YouTube channel that's designed to take you from a novice to a skilled ASP.NET Core developer. Alen Omeri created this course.

What You Will Learn

This course is structured to provide a step-by-step learning experience, starting with a basic full-stack project and progressing to more complex applications. Here is what the course covers:

Getting Started with ASP.NET Core MVC

Start by understanding the fundamental structure of ASP.NET Core MVC. This introductory segment lays the foundation for your journey ahead.

Project 1: Food Menu Web App:

• Setup: Learn to initialize your project and get ready for development.
• Modeling and Database Integration: Dive into creating models, setting up the context, and connecting your project to a database.
• Controller Logic: Develop the controller and its methods to manage data flow between the database and your views.
• Enhancements: Add multiple data entries to the database manually, implement a search bar, and refine the user interface.

Project 2: Google Docs Clone:

• Introduction and Setup: Get acquainted with the project and set up your development environment.
• Core Development: Create models, set up the database, develop a controller, and handle page creation.
• Advanced Features: Incorporate the TinyMCE library, manage document editing, and format the delete page. Learn how to convert documents to PDF for a comprehensive feature set.

Project 3: Stripe Web App:

• Introduction to Stripe: Understand the essentials of integrating Stripe into your web application.
• Project Initialization: Set up your project in Visual Studio and prepare for development.
• Building the Application: Create models, set up the database, store products, and display them. Dive into the technicalities of creating a checkout method and test your application rigorously.

Why This Course?

This video course on freeCodeCamp.org's YouTube channel is more than just a tutorial; it's a hands-on learning experience that emphasizes real-world application. By building three distinct projects, you'll gain a thorough understanding of ASP.NET Core MVC, enabling you to develop your own web applications confidently.

Watch the full course on the freeCodeCamp.org YouTube channel (2.5 hour watch).

We just posted a course on the freeCodeCamp.org YouTube channel that is an opportunity for learners to dive deep into the world of fullstack development using ASP.NET Core. Alen Omeri designed the course to guide you through the process of building a complete auction web application from scratch.

ASP.NET Core is an open-source, high-performance framework developed by Microsoft for building modern, cloud-based, and internet-connected applications. It offers a versatile platform for developing web apps, IoT apps, mobile backends, and more, leveraging the .NET ecosystem. Its performance, scalability, and support for cross-platform development make it an attractive choice for developers.

Course Overview

The course kickstarts with an overview, setting the stage for what learners can expect. It outlines the project scope, the core functionalities of the auction web application, and an introduction to the ASP.NET Core framework and its advantages. Here are the other sections of the course:

Models & Database Setup

The journey begins with designing the application's backbone—defining models and setting up the database. This section covers Entity Framework Core, a powerful ORM (Object-Relational Mapping) framework for .NET, which simplifies data access by allowing developers to work with a database using .NET objects.

Index Page

Next, the course walks you through developing the Index Page, where all the auction items are displayed. This involves integrating models with views and controllers, showcasing the MVC (Model-View-Controller) architecture that ASP.NET Core champions for organizing application logic.

Create Page & File Uploads

Building upon the basics, this section dives into creating new auction listings. It covers handling form data, implementing file uploads, and ensuring data validation, providing a comprehensive guide on managing user inputs and assets.

Details Page

Focusing on individual auction items, the Details Page section teaches you to display item specifics. This includes integrating dynamic data into views and enhancing user experience by presenting detailed information about each listing.

CSS + Structure, Search Bar & Pagination

Aesthetic and functionality enhancements come next. This part of the course emphasizes CSS for styling, structuring your application for a cleaner look, and implementing features like a search bar and pagination for improved navigation and usability.

Adding Bids & Closing the Bidding

A crucial functionality of any auction application, this section covers how to add bidding features to your application, manage bid submissions, and automate the closing of bids, ensuring a real-time and interactive bidding process.

Adding Comments

Engagement and interaction are further elevated by incorporating a commenting feature. This segment teaches the implementation of a comments section for each auction item, facilitating user discussions and feedback.

My Listings & My Bids

Personalization features such as "My Listings" and "My Bids" pages allow users to track their activity on the platform. These sections delve into creating user-specific views that display the listings a user has posted and the bids they've made.

Project Recap

The course concludes with a comprehensive recap, revisiting the key technologies and concepts covered throughout the course. It ensures a solid understanding of the project and the ASP.NET Core framework, empowering learners to embark on their fullstack development journey with confidence.

Conclusion

Alen Omeri's expertise in ASP.NET Core and clear instructional style make complex topics accessible to learners of all levels. The course's hands-on approach, with a real-world project, ensures that by the end, you have not just theoretical knowledge but practical experience in fullstack development with ASP.NET Core.

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use the latest version of ASP.NET Core MVC.

Bhrugen Patel developed this course. Bhrugen is an experienced developer who has been teaching about ASP.NET for years.

In this course you will learn the basics of .NET Core (.NET 6) and then build a simple CRUD application with MVC. The course is for anyone who is familiar with ASP.NET basics and wants to know how to architect and code real-world applications in ASP.NET Core.

Here are the different parts of this course:

Section 1: Introduction

• Welcome
• Live Preview
• Tools Needed
• Introduction to .Net Core
• Dependency injection
• Create Project
• Project File
• Launch settings
• Programs
• MVC Architecture
• Routing Overview
• Routing in Action
• Default Views
• Tag Helper
• Action Result
• Hot Reload

Section 2: Database Setup

• Create Category Model
• Add Data Annotations
• Add Connection String
• Add ApplicationDbContext
• Setup Program.cs to use DbContext
• Check Database

Section 3: Category CRUD Operations

• Create Category Controller
• Retrieve all Categories
• Display all Categories
• Bootswatch Theme
• Bootstrap Icons
• Create Category View
• Demo- Create Category
• Server Side Validation
• Custom Validation
• Add Client Side Validation
• Display Name and Range Validation
• Edit Category - GET
• Edit Category - POST
• Delete Category
• Tempdata
• Partial views
• Toastr Alerts
• Scaffold CRUD
• Create SQL Database on Azure
• Azure Deployment
• Congratulations

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

We've released a course on the freeCodeCamp.org YouTube channel that will teach you how to create a web database app in ASP.NET Core using Visual Studio and the C# language.

The course was created by Shad Sluiter. Shad is a professor of computer science at Grand Canyon University. Over the past 20 years he has taught students from grade 6 to senior citizens in many aspects of technology.

The web app you will create is a basic CRUD app that interacts with a database.

This tutorial will show you how to:

• Use the MVC (Model View Controller) design pattern.
• Configure database tables using the Entity framework.
• Setup classes as models.
• Customize Razor forms.
• Create methods inside a controller.
• Style an ASP.NET page with CSS.
• Use Bootstrap classes.
• Create a search function to filter database results.

Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

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

I've been shopping around for a back end framework to support a tabletop game app, and decided to do some research to determine the best fit for my needs.

The objective was straightforward: to build a simple RESTful API that would allow a front end app to perform basic CRUD operations, providing me with an introduction to what the development process would look like.

There are a lot of back end framework options out there, and I'm most familiar with JavaScript, C#, and Python (in that order), which limited my options somewhat. The natural starting point was to build a simple front end that would send requests to an API, which would in turn read from and write to a local database.

I began my development process with Express, which, for reasons I'll soon explain, led me to also check out Flask and ASP.NET. I thought my findings might prove useful to others out there who are researching back end frameworks for small projects. In this article, I'll also provide code examples and the resources that I used to build everything.

You can access the full code on GitHub, as well.

I should caveat that I won't be promoting one framework over another, and haven't yet compared things like deployment, authentication, or scalability. Your mileage may vary if those particulars are important to you!

I will, however, provide a TL;DR at the bottom if you just want to get the summary and key learnings.

Here we go!

Defining the API

If you're new to web development, you might be asking, "what's an API?"

I've had to ask the question a hundred times to find an answer that made sense. And it really wasn't until I built my own that I could say I understood what an API does.

Put simply, an API, or "application programming interface", allows two different computing systems to talk to one another. In this article, I'll show a simple front end app that displays a "quest" tracker that players can view for their tabletop roleplaying game. Each quest has a "name" and a "description," both of which are displayed in the web browser.

If I already had all of the quests listed on the website and just wanted players to view them, I would have no need for an API or back end. For this project, however, I want the ability to allow users to add quests, search for them, delete them, and so on. For those operations, I need to store the quests somewhere, but my front end app isn't able to transfer information directly to a database.

For that, I need an API that can receive HTTP requests from the website, figure out what to do with those requests, interact with my database, and send more information back up the chain so that the user can see what happened.

The whole thing - the front end "client", the back end "API" or server, and the database - is called a "stack," or more precisely, the "full stack." For this project, I built a simple front end website as the top of the stack, and switched out everything beneath it as I tried out different frameworks and databases.

Project Structure

The structure for this project was fairly simple, with the front end client separated from three different servers that I would spin up as necessary to serve the API.

I used Visual Studio Community as my code editor and IDE, with the requisite language packages installed for JavaScript, Python, and C#.

I'll provide an overview of my experience with each framework in turn, with links to the tutorials and packages that I used to get them to work with the client. But first, let's take a look at the front end!

The Client: Vue.js

The goal for the client was to have a simple website that would receive information from the database through the API and display it to the user. To streamline the process, my requirements were that the client would only need to "read" all of the items in the database, and provide the user with the ability to "create" a new quest.

These "read" and "create" operations - the "R" and "C" in "CRUD" - are analogous to the HTTP methods of "GET" and "POST," which we'll see in the code below.

In front end development, I'm most comfortable using Vue, and used the Vue CLI to scaffold a basic client, with the following file structure:

I replaced the boilerplate markup provided by the Vue CLI with the following:

<template>
    <div id="app">
        <h1>RPG Quests</h1>
        <p v-for="(quest, index) in quests" v-bind:key="index">{{quest.name}}: {{quest.description}}</p>
        <input type="text" v-model="newQuestName" placeholder="Quest Name" /> <br />
        <input type="text" v-model="newQuestDescription" placeholder="Quest Description" /><br /><br />
        <button v-on:click="postQuest">Add Quest</button>
    </div>
</template>

And the corresponding Vue code:

import axios from 'axios';

    export default {
        name: 'App',
        data: function () {
            return {
                quests: null,
                newQuestName: null,
                newQuestDescription: null
            }
        },
        methods: {
            getQuests: function () {
                axios
                    .get('http://localhost:3000/quests')
                    .then(response => (this.quests = response.data));
            },
            addQuest: function () {
                axios
                    .post('http://localhost:3000/quests', {
                        name: this.newQuestName,
                        description: this.newQuestDescription
                    });
            },
            postQuest: function () {
                axios.all([this.addQuest(), this.getQuests()]);
                this.$forceUpdate();
            }
        },
        mounted: function () {
            this.getQuests();
        }
    }

If you're not familiar with Vue, the specifics of the front end aren't that important! Of significance here is that I'm using a JavaScript package called Axios to make my GET and POST requests to a potential server.

When the client loads, it'll make a GET request to the URL http://localhost:3000/quests to load all quests from the database. It also provides a couple of input fields and a button that will POST a new quest.

Using the Vue CLI to serve the client on http://localhost:8080, the front end of the app looks like this in action:

Once quests are added to the database, they'll start appearing in between the "RPG Quests" header and the input fields.

Client Resources

To build the client, I used:

• NodeJS/NPM for package management
• Vue CLI for scaffolding, serving, and building projects
• Axios for making HTTP requests to the API
• Vue Axios Documentation for making sense of how to use Axios in concert with the API
• Postman for testing API requests through the browser before implementing them in the client.

JavaScript API: Express

Express is a lightweight web framework for NodeJS that allows you to write server-side applications with JavaScript.

It's un-opinionated, which means that you can build your applications how you like without it defining the architecture for you. You can add packages to improve functionality as you fancy, which I found to be a double-edged sword as a newbie to the framework. More on that later.

Being most comfortable in JavaScript, I was excited by the prospect of having the entire stack run on just one language instead of several. I had heard of the "MEVN Stack," which denotes a full stack application that is comprised of MongoDB, Express, Vue, and NodeJS, and decided to try that out for this iteration of the project.

I followed a web API tutorial to first build a template app, then used another MEVN tutorial to fill in the details of how to get the API to communicate with the Vue client that I had built. The Express API that I created for this project follows a similar structure to the former, using MongoDB as the database:

If you're coming from a JavaScript background, Express is fairly easy to read, even if you're not familiar with some of the back end terminology. The following is a snippet from /routes/quests.js, for example, which handles the HTTP endpoint requests:

router.get('/', async (req, res) => {
    try {
        const quests = await Quest.find();
        res.json(quests);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

router.post('/', async (req, res) => {
    const quest = new Quest({
        name: req.body.name,
        description: req.body.description
    });
    try {
        const newQuest = await quest.save();
        res.status(201).json(newQuest);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

The general theme of the code is to receive a request, attempt to contact the database to do work, and then send a response back to whoever's asking. The specifics can be quite complex, particularly if you're writing your own middleware that does things in between the request and response, but the code is at least readable.

I found MongoDB to be painless to work with as a NoSQL database. If you're working with Express, you'll most likely use Mongoose as an ODM - basically like a "middle person" that translates a model of what your data looks like to the database.

The model in this app (called a "schema" in Mongoose terms) is really simple, located in /models/quests.js:

const questSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true
    },
    description: {
        type: String,
        required: true
    }
});

The above indicates that the database should store our two fields: a quest name and a quest description. Both of these fields are strings, and required. All GET and POST requests will have to conform to this model to interact with the database.

After wiring all of this up and POSTing a few new quests, the front end site started populating with data:

The process of setting up the Express API was not without its hair pulling, however. Being a primarily front end and 2D game developer, I've become intimately familiar with how dispersed the JavaScript ecosystem can feel. This frustration was magnified in attempting to build a back end app. There are a lot of packages required to get everything up and running, each of which having its own required configuration and implementation.

If you're looking for a framework that just does everything out of the box, Express is most certainly not the choice for you. It's lightweight, flexible, and easy to read, in a very "choose-your-own-adventure" fashion. I quite like how clean the code is and the ability to structure my projects as I see fit, but troubleshooting and error handling do leave a lot to be desired.

JavaScript/Express Resources

To build the JavaScript API, I used:

• NodeJS/NPM for package management
• Express as the main web framework
• Dotenv to create environment-specific variables
• Nodemon to watch files for changes and restart the server so I didn't have to
• CORS to allow for cross-origin requests (basically a pain if you're trying to make requests from a client to a server that are both running locally on your machine)
• MongoDB for the NoSQL database
• Mongoose for writing models that map onto MongoDB
• This API tutorial to provide a basic understanding of how to create an Express-MongoDB stack
• This MEVN tutorial to fill in the gaps of running a MongoDB-Express-Vue-Node full stack

Python API: Flask

In the process of building the Express API, I had a conversation with a data science friend who works in Python. This gave me the idea of trying out non-JavaScript frameworks to see if they were better suited for my app.

I took a cursory look at Django, since I'd been hearing about it as a powerhouse back end framework that provides everything out of the box. I was a little intimidated by how opinionated it seemed, and opted to try out Flask instead, which kind of felt like the Python equivalent of Express.

I followed the first few bits of the excellent Flask Mega-Tutorial to get my app structure set up, using the companion RESTful API tutorial to fill in the pieces of HTTP requests. The file structure turned out to be only a shade more complex than that of the Express API:

The tutorial I followed uses SQLite for its database, with Flask-SQLAlchemy as an ORM. The HTTP request code that's most analogous to the Express API is located in /app/routes.py:

@app.route('/quests', methods=['GET'])
def get_quests():
    questQuery = Quest.query.all()
    quests = {}
    for quest in questQuery:
        quests[quest.name] = quest.description
    return jsonify(quests)

@app.route('/quests', methods=['POST'])
def post_quest():
    newQuest = Quest(name=request.json['name'], description=request.json['description'])
    db.session.add(newQuest)
    db.session.commit()
    return "Quest Added!"

Similarly, the database model (akin to the Mongoose "schema") is in /app/models.py:

class Quest(db.Model):
    name = db.Column(db.String(256), primary_key=True, index=True, unique=True)
    description = db.Column(db.String(256), index=True, unique=True)

As I mentioned, I'm more familiar with JavaScript and C# than with Python, and working with the latter to build the Flask API felt like cheating. Certain things like pathing, package handling, and writing workable code were just easy, although I did get hung up on getting the API to correctly parse JSON for the client. I suspect that was more of an issue of my unfamiliarity with the language than anything else, but it did take time to troubleshoot.

To be quite honest, coming from a non-Flask background, I did kind of expect to complete a couple of tutorials and spin up an API without having to do all that much work for it.

I can't say that it turned out that way, as Python does have its own particulars that require some time to get used to. Still, the Python ecosystem appears to be extremely well organized, and I enjoyed my time building the Flask API.

I've also heard that Django is a better and more scalable option for larger projects. But it seems like it would involve a separate, and steeper, learning curve to become proficient.

Flask was easy enough for me as a non-Python developer to pick up and build something over a weekend. I suspect that learning Django would take quite a bit longer, but with potentially greater dividends over the long run.

Python/Flask Resources

To build the Flask API, I used:

• Python 3/pip for package management
• Flask as the main web framework
• python-dotenv to configure environment variables
• SQLite as the database
• Flask-SQLAlchemy as the ORM to work with SQLite
• Flask-Migrate as an additional tool to migrate data to SQLite
• Flask-CORS to handle the same CORS issue as with the Express API
• The Flask Mega-Tutorial to learn the basics
• The Flask REST API tutorial to understand how to receive HTTP requests

C# API: ASP.NET

I can't tell you how many times I've Googled ".NET" to understand what it is, how it's different from ASP.NET, and why I'd want to use any of it. My C# knowledge comes mainly from working with Unity, which exists somewhat adjacent to .NET and doesn't provide for a lot of exposure to Microsoft's larger ecosystem.

I've spent some time researching Razor Pages and MVC, and finally came to understand ASP.NET's breadth of features as Microsoft's open source web framework. I decided to toss ASP.NET into the hat for a potential back end for my app, and set about working through the official web API tutorial with ASP.NET Core and MongoDB.

The file structure for this version of the API was more complex than the others, given that .NET projects tend to have a much larger footprint:

I should also mention that I already had Visual Studio and all of the required workloads installed, which made the setup process easier. Plus, having spent time with MongoDB for the Express API, I found the database portion of the project to be similar, although by default, ASP.NET seems to prefer using Microsoft's SQL Server and the Entity Framework ORM.

The ASP.NET code for HTTP requests is a bit more complex than what we've seen with the two other APIs, but it's no match for all of the code that sits around it.

First, consider this snippet in /Controllers/QuestController.cs that handles requests:

namespace QuestAPI.Controllers
{
    [Route("quests/")]
    [ApiController]
    public class QuestsController : ControllerBase
    {
        private readonly QuestService _questService;

        public QuestsController(QuestService questService)
        {
            _questService = questService;
        }

        [HttpGet]
        public ActionResult<List<Quest>> Get() =>
            _questService.Get();

        [HttpPost]
        public ActionResult<Quest> Create(Quest quest)
        {
            _questService.Create(quest);
            return CreatedAtRoute("GetQuest", new { id = quest.Id.ToString() }, quest);
        }
    }
}

Not too terrible, almost kind of readable, in a C# sort of way. The data model in /Models/Quest.cs is even easier:

namespace QuestAPI.Models{
    public class Quest
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }

        [BsonElement("Name")]
        public string Name { get; set; }

        public string Description { get; set; }
    }
}

These two snippets essentially do the same things as the previous examples that we've seen: take requests from the front end, process them to get or modify data in the database, and send a response back to the client.

Yet, as you can probably tell from the complex file structure, there's so much code that surrounds these snippets, along with Interfaces, Dependency Injection, and other abstractions, that it can be challenging to understand how it all works together.

Consider the following configuration code in /Startup.cs:

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<QuestDatabaseSettings>(Configuration.GetSection(nameof(QuestDatabaseSettings)));

            services.AddSingleton<IQuestDatabaseSettings>(sp => sp.GetRequiredService<IOptions<QuestDatabaseSettings>>().Value);

            services.AddSingleton<QuestService>();

            services.AddCors(options =>
            {
                options.AddPolicy(MyAllowSpecificOrigins, builder =>
                {
                    builder.WithOrigins("http://localhost:3000/quests", "http://localhost:8080").AllowAnyHeader().AllowAnyMethod();
                });
            });

            services.AddControllers();
        }

Or this particularly nested bit from a separate SQL Server web API tutorial:

    [HttpGet]
    public async Task<ActionResult<IEnumerable<TodoItemDTO>>> GetTodoItems()
    {
        return await _context.TodoItems
            .Select(x => ItemToDTO(x))
            .ToListAsync();
    }

Lol. What?? As a new user, even familiar as I am with C#, I can go line-by-line to understand each abstraction, or I can just trust that the framework is handling everything for me and forget about it.

I tend to want to know exactly how my code works so that I can fix or alter it if necessary. But I certainly feel like my time spent learning the ins-and-outs of ASP.NET could be better utilized towards mastering another framework.

To be fair, ASP.NET appears to be similar to Django in being more opinionated and providing you with a ton of stuff out of the box, including an authentication solution, database management, and the lot. If these things are important to you, it's certainly worth considering.

It also has the full support of Microsoft and an open source community. So if you're looking at developing enterprise-level applications that need to scale, you might want to take a longer look at ASP.NET as a potential solution.

C#/ASP.Net Resources

To build the ASP.Net API, I used the following resources:

• Visual Studio Community as my code editor and IDE, with the ASP.NET and web development workload installed (I already had MongoDB running from the Express API)
• Microsoft's official tutorial for building web APIs with ASP.NET and MongoDB

TL;DR

In all, with some slight variations and hiccups among them, I've gotten each of the web APIs to work with the Vue client, with the ability to view quests from and add quests to the database. Hopefully, my explanation of the process has been helpful in your own search for a back end framework, but here are some additional recommendations just in case:

• If you're a JavaScript developer and/or want to manage everything that your application does, including its architecture, consider using Express.
• If you're a Python developer and/or want a pleasant experience in developing small projects, try Flask, but consider using Django if you need more out-of-the-box support and don't mind conforming to an opinionated framework.
• If you're a C# developer and willing to spend the time to learn the most arcane details of C# coding best practices, consider using ASP.NET. Alternatively, if you need enterprise-level support right out of the box, you'd be hard-pressed to find better.
• If you don't know what to use and just want to learn back end development, take a look at Flask. It's easy to work with and will teach you the basics that you'll need to know for building web apps in any coding language.
• If you don't know what to use and want an adventure, choose Express. There's a rabbit hole of package management and Stack Overflow questions waiting that may make you tear your hair out, but you'll learn a lot about the JavaScript ecosystem and web development in general.

Additionally, two things bear mentioning that threw me for a spin in this process: CORS and environment variables. The former I've mentioned in this article a couple of times already, but it's worth discussing again to understand the scope of building a full stack app on your machine.

Unless you have an integrated development environment that's handling the whole stack for you, you'll likely have a client, a server, and a database that are all running independently of one another.

In the Express API section above, for example, I was running

1. the Vue CLI server, which rendered my front end app on port 8080;
2. an NPM script to spin up the Express API server on port 3000; and
3. a separate instance of the Mongo database to get everything working together. That's three command prompts open and a general mess!

If you dig into the Vue code above (or on GitHub), you'll see that the requests made on behalf of the client, running on http://localhost:8080, are to the server on http://localhost:3000, which is where the Express API is listening. This is called "cross-origin resource sharing," or CORS, and it's blocked by the browser for security concerns. Most frameworks require you to install an additional package to get the whole thing running in your local environment.

Second, you'll want to become comfortable with environment variables, which can really help smooth some rough pathing edges at runtime. I used dotenv and Flask-Env for the Express and Flask projects, respectively.

Both packages allow you to configure things like where your database lives, or what default port your application should be using, in one document. Your application then uses that document at runtime to figure out where to find everything, without any further configuration needed from you.

One final note that may be helpful if you're just working on a back end project and don't want to go through the trouble of building a front end client: consider using a third-party app like Postman. I used it to make HTTP requests to each of the APIs to make sure they were working properly before layering on the Vue client and trying to get the whole stack running altogether.

I hope this article has been helpful for you in your own process of looking for a back end framework. Let me know what you find!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

We've released a 3 hour course on the freeCodeCamp.org YouTube channel so you can learn ASP.NET Core 3.1. The course is for beginners, but it is expected that you have some knowledge of C#. (If you want to learn C#, check out this great C# course.)

In this course you will first learn about the history and basics of ASP.NET Core. Then you will learn how to build a small book list application with CRUD operations. You will learn how to use the Entity Framework for integration with a database with ASP.NET Core Razor Pages.

You will also learn how to build a book list application using ASP.NET MVC and see how to use DataTables with API Calls in a Razor Project.

This course was developed by Bhrugen Patel. Watch it below or on the freeCodeCamp.org YouTube channel.

QRCoder is a very popular QR Code implementation library written in C#. It is available in GitHub. Here I am going to implement the QRCoder library to generate QR Codes in my ASP.NET Core application. I will also be using C#.

I will implement QRCoder in 3 ways, which are:

1. Create QR Code Bitmap image for any text.

2. Create QR Code File (.qrr) for any text and then save these files in the application.

3. Read and display all the QR Code Files (.qrr).

Let’s start with the Installation of QRCoder in ASP.NET Core Framework.

You can download the full code from my GitHub Respositiory.

Installation

Install QRCoder via NuGet Package Manager. If you want to use NuGet, just search for “QRCoder” or run the following command in the NuGet Package Manager console:

PM> Install-Package QRCoder

The QRCoder will install in 1 minute and will be ready to use.

Now let us start with the implementation of QRCoder in the 3 ways mentioned above.

Create QR Code Bitmap image for any text

Create a new Controller called ‘QRCoderController’ inside the Controllers folder. The controller will be created and it will have just one Action Method called ‘Index’ in it:

public IActionResult Index()
{
    return View();
}

Import the following namespaces in the controller:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using Microsoft.AspNetCore.Mvc;
using QRCoder;

Next, add the Index Action of type [HttpPost] to the controller:

[HttpPost]
public IActionResult Index(string qrText)
{
    QRCodeGenerator qrGenerator = new QRCodeGenerator();
    QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText,
    QRCodeGenerator.ECCLevel.Q);
    QRCode qrCode = new QRCode(qrCodeData);
    Bitmap qrCodeImage = qrCode.GetGraphic(20);
    return View(BitmapToBytes(qrCodeImage));
}

This Index Action receives a string parameter called ‘qrText’. It contains the text that is provided by an Input control defined in the View. This text will be converted to QR Code Bitmap image. The following code lines do this work:

QRCodeGenerator qrGenerator = new QRCodeGenerator();

QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q);

QRCode qrCode = new QRCode(qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);

The QRCode object (‘qrCode’) defined calls a static function called ‘BitmapToBytes()’. The role of this function is to convert the Bitmap image to ‘Byte[]’.

Add this function to your controller:

private static Byte[] BitmapToBytes(Bitmap img)
{
    using (MemoryStream stream = new MemoryStream())
    {
        img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
        return stream.ToArray();
    }
}

Finally create the Index View inside the ‘Views/QRCoder’ folder with the following code:

@model Byte[]
@{
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <title>Implementing QRCoder in ASP.NET Core - Create QR Code</title>
  <style>
    body {
      background: #111 no-repeat;
      background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
    }

    h1,
    h2,
    h3 {
      text-align: center;
      color: #FFF;
      margin: 5px 0;
    }

    h1 {
      font-size: 30px;
    }

    h2 a {
      font-size: 25px;
      color: #0184e3;
      text-decoration: none;
    }

    h3 {
      font-size: 23px;
      border-bottom: solid 3px #CCC;
      padding-bottom: 10px;
    }

    h3 a {
      color: #00e8ff;
      text-decoration: none;
    }

    h3 a:hover,
    h2 a:hover {
      text-decoration: underline;
    }

    .container {
      width: 800px;
      margin: auto;
      color: #FFF;
      font-size: 25px;
    }

    .container #content {
      border: dashed 2px #CCC;
      padding: 10px;
    }

    #reset {
      padding: 5px 10px;
      background: #4CAF50;
      border: none;
      color: #FFF;
      cursor: pointer;
    }

    #reset:hover {
      color: #4CAF50;
      background: #FFF;
    }

    #viewContent table {
      width: 100%;
    }

    #viewContent table tr {
      height: 80px;
      background: darkcyan;
    }

    #viewContent table tr td {
      width: 50%;
      padding-left: 5px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="content">
      <h1>Implementing QRCoder in ASP.NET Core - Create QR Code</h1>
      <h2>
        <a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
        <button id="reset" onclick="location=''">Reset »</button>
      </h2>
      <div id="viewContent">
        @using (Html.BeginForm(null, null, FormMethod.Post)) {
        <table>
          <tbody>
            <tr>
              <td>
                <label>Enter text for creating QR Code</label
                </td>
                <td>
                  <input type="text" name="qrText" />
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <button>Submit</button>
                </td>
              </tr>
            </tbody>
          </table>
        }
      </div>

      @{
        if (Model != null)
        {
          <h3>QR Code Successfully Generated</h3>
          <img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" />
        }
      }
    </div>
  </div>
</body>
</html>

The Index View has an ‘input’ control. The user enters their text into this control to create the QR Code:

<input type="text" name="qrText" />

Once the QR Code is generated by the Index Action method, its ‘byte’ array is returned to the View as model and then the bitmap image is displayed by the below code:

@{
  if (Model != null)
  {
    <h3>QR Code Successfully Generated</h3>
    <img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" />
  }
}

Testing the Code

Run your application and go to the URL — ‘http://localhost:50755/QRCoder’ to invoke the Index Action method.

In the text box, add your text and click the submit button to create the QR Code Bitmap image.

See this image which illustrates it working:

create QRCode Bitmap Image

Create QR Code File (.qrr) for any text and then save these files in the application

You can also generate QR Code files for a text and save it in your website. These files have .qrr extension.

To your controller add the following Action methods called ‘GenerateFile’:

public IActionResult GenerateFile()
{
  return View();
}

[HttpPost]
public IActionResult GenerateFile(string qrText)
{
  QRCodeGenerator qrGenerator = new QRCodeGenerator();
  QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText,   QRCodeGenerator.ECCLevel.Q);

  string fileGuid = Guid.NewGuid().ToString().Substring(0, 4);

  qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);

  QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);

  QRCode qrCode = new QRCode(qrCodeData1);
  Bitmap qrCodeImage = qrCode.GetGraphic(20);
  return View(BitmapToBytes(qrCodeImage));
}

The [HttpPost] version of this action method generates the QR Code files inside the ‘wwwroot/qrr’ folder. The code that does this work is the following:

QRCodeGenerator qrGenerator = new QRCodeGenerator();

QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrText, QRCodeGenerator.ECCLevel.Q);

string fileGuid = Guid.NewGuid().ToString().Substring(0, 4);

qrCodeData.SaveRawData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);

Once the .qrr file is created then I am simply reading it for its saved location in the website. Then I am converting it to Bitmap type and finally sending the image’s bytes to the view. The corresponding code is:

QRCodeData qrCodeData1 = new QRCodeData("wwwroot/qrr/file-" + fileGuid + ".qrr", QRCodeData.Compression.Uncompressed);

QRCode qrCode = new QRCode(qrCodeData1);
Bitmap qrCodeImage = qrCode.GetGraphic(20);

return View(BitmapToBytes(qrCodeImage));

Next, add the GenerateFile view inside the ‘Views/QRCoder’ folder and add the following code to it:

@model Byte[]
@{
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <title>Implementing QRCoder in ASP.NET Core - Create QR Code File</title>
  <style>
    body {
      background: #111 no-repeat;
      background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
    }

    h1,
    h2,
    h3 {
      text-align: center;
      color: #FFF;
      margin: 5px 0;
    }

    h1 {
      font-size: 30px;
    }

    h2 a {
      font-size: 25px;
      color: #0184e3;
      text-decoration: none;
    }

    h3 {
      font-size: 23px;
      border-bottom: solid 3px #CCC;
      padding-bottom: 10px;
    }

    h3 a {
      color: #00e8ff;
      text-decoration: none;
    }

    h3 a:hover,
    h2 a:hover {
      text-decoration: underline;
    }

    .container {
      width: 800px;
      margin: auto;
      color: #FFF;
      font-size: 25px;
    }

    .container #content {
      border: dashed 2px #CCC;
      padding: 10px;
    }

    #reset {
      padding: 5px 10px;
      background: #4CAF50;
      border: none;
      color: #FFF;
      cursor: pointer;
    }

    #reset:hover {
      color: #4CAF50;
      background: #FFF;
    }

    #viewContent table {
      width: 100%;
    }

    #viewContent table tr {
      height: 80px;
      background: darkcyan;
    }

    #viewContent table tr td {
      width: 50%;
      padding-left: 5px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="content">
      <h1>Implementing QRCoder in ASP.NET Core - Create QR Code File</h1>
      <h2>
        <a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
        <button id="reset" onclick="location=''">Reset »</button>
      </h2>
      <div id="viewContent">
        @using (Html.BeginForm(null, null, FormMethod.Post)) {
        <table>
          <tbody>
            <tr>
              <td>
                <label>Enter text for creating QR File</label>
              </td>
              <td>
                <input type="text" name="qrText" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <button>Submit</button>
              </td>
            </tr>
          </tbody>
        </table>
        }
      </div>
      @{ if (Model != null) {
      <h3>QR Code file Successfully Generated</h3>
      <img src="@String.Format(" data:image/png;base64,{0} ", Convert.ToBase64String(Model))" /> } }
    </div>
  </div>
</body>

</html>

The code of this View is exactly similar to the ‘Index’ View and works exactly like it.

The URL to invoke this View is ‘http://localhost:50755/QRCoder/GenerateFile’.

Read and display all the QR Code Files (.qrr)

You can also read all the .qrr files saved in the website. Go to your controller and add a new action called ‘ViewFile’:

public IActionResult ViewFile()
{
  List<KeyValuePair<string, Byte[]>> fileData=new List<KeyValuePair<string, byte[]>>();

  KeyValuePair<string, Byte[]> data;
  string[] files = Directory.GetFiles("wwwroot/qrr");
  foreach (string file in files)
  {
    QRCodeData qrCodeData = new QRCodeData(file, QRCodeData.Compression.Uncompressed);

    QRCode qrCode = new QRCode(qrCodeData);
    Bitmap qrCodeImage = qrCode.GetGraphic(20);

    Byte[] byteData = BitmapToBytes(qrCodeImage);
    data = new KeyValuePair<string, Byte[]>(Path.GetFileName(file), byteData);
    fileData.Add(data);
  }
  return View(fileData);
}

In this action method, I read the filed located in the ‘qrr’ folder using the code:

Directory.GetFiles("wwwroot/qrr")

Then I add each qrr file’s bytes and name inside a List<KeyValuePair<string, Byte[]>> object.

This object is returned to the View at the end:

return View(fileData);

Finally create the ‘ViewFile’ View inside the ‘Views/QRCoder’ folder with the following code:

@model List
<KeyValuePair<string, Byte[]>>
@{
    Layout = null;
}

  <!DOCTYPE html>
  <html>

  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Implementing QRCoder in ASP.NET Core - View QR Code Files</title>
    <style>
      body {
        background: #111 no-repeat;
        background-image: -webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
      }

      h1,
      h2,
      h3 {
        text-align: center;
        color: #FFF;
        margin: 5px 0;
      }

      h1 {
        font-size: 30px;
      }

      h2 a {
        font-size: 25px;
        color: #0184e3;
        text-decoration: none;
      }

      h3 {
        font-size: 23px;
        border-bottom: solid 3px #CCC;
        padding-bottom: 10px;
      }

      h3 a {
        color: #00e8ff;
        text-decoration: none;
      }

      h3 a:hover,
      h2 a:hover {
        text-decoration: underline;
      }

      .container {
        width: 800px;
        margin: auto;
        color: #FFF;
        font-size: 25px;
      }

      .container #content {
        border: dashed 2px #CCC;
        padding: 10px;
      }

      #reset {
        padding: 5px 10px;
        background: #4CAF50;
        border: none;
        color: #FFF;
        cursor: pointer;
      }

      #reset:hover {
        color: #4CAF50;
        background: #FFF;
      }

      #viewContent table {
        width: 100%;
      }

      #viewContent table tr {
        height: 80px;
        background: darkcyan;
      }

      #viewContent table tr td {
        width: 50%;
        padding-left: 5px;
      }

      #viewContent table tr td img {
        width: 150px;
      }

      #viewContent table tr td span {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div id="content">
        <h1>Implementing QRCoder in ASP.NET Core - View QR Code Files</h1>
        <h2>
          <a href="http://www.yogihosting.com/category/aspnet-core/">Read the tutorial on YogiHosting » </a>
          <button id="reset" onclick="location=''">Reset »</button>
        </h2>
        <div id="viewContent">
          <table>
            <tbody>
              @foreach (KeyValuePair
              <string, Byte[]> k in Model) {
                <tr>
                  <td>
                    <img src="@String.Format(" data:image/png;base64,{0} ", Convert.ToBase64String(k.Value))" />
                    <span>@k.Key</span>
                  </td>
                </tr>
                }
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>

  </html>

This View displays all the qrr files as bitmap images inside a ‘HTML’ table. The below code creates the HTML table:

<table>
  <tbody>
    @foreach (KeyValuePair<string, Byte[]> k in Model)
    {
      <tr>
        <td>
          <img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(k.Value))" />
         <span>@k.Key</span>
        </td>
      </tr>
    }
  </tbody>
</table>

Testing the Code

Run your application and go to the URL — ‘http://localhost:50755/QRCoder/ViewFile’ to invoke the ViewFile Action method. You will see all the .qrr files saved in your website.

See the below image which illustrates it working:

View all QRR files

You can download the full code from my GitHub Respositiory.

Conclusion

I hope you love this repository which will help you to use QRCoder in your ASP.NET Core Project. Make sure you like this repository to show your love to it.

If you need any help in ASP.NET Core then let me know in the below comments section.

I publish 2 web development articles per week. Consider following me and get email notification whenever I publish a new tutorial on Medium. If this post was helpful, please click the clap button for a few times to show your support! It will bring a smile on my face and motivate me to write more for the readers like you.

I have also published another tutorial on freeCodeCamp, if you would like to see it too — How to create a login feature with Bootstrap Modal and jQuery AJAX

Thanks and Happy Coding!