Let's learn step by step by creating an ASP.NET Core application.
- Start then All Programs and select "Microsoft Visual Studio 2019".
- Once the Visual Studio Opens, Then click on Continue Without Code.
- Then Go to Visual Studio Menu, click on File => New Project then choose ASP.NET Core Web App (Model-View-Controller) Project Template.
- Then define the project name, location of the project, Target Framework, then click on the create button.
Delete the existing auto-generated code including controller and views for ease of understanding. We will add step by step while building the application.
Step 1: Add QRCoder Nuget Package Reference
The QRCoder is the open source pure C# library to generate the codes. The QRCoder supports the basic to custom and complex OR code generation, follow the following steps to add the Nuget package.
- Right click on the Solution Explorer, find Manage NuGet Package Manager and click on it
- After as shown into the image and type in search box "QRCoder"
- Select QRCoder as shown into the image
- Choose version of QRCoder library and click on install button
I hope you have followed the same steps and installed the QRCoder nuget package.
Step 2: Create the Model Class
Create the model class QRCodeModel by right clicking on the model folder to take the input text for QR code as shown in the following image.
Now open the QRCodeModel.cs class file and add the following code.
Step 3: Add the Controller
Create the Controller class by right clicking on the Controller folder as shown in the following image.
Now open the HomeController.cs file and add the following code.
Step 4: Create The View
Create the view with the name CreateQRCode using the model class QRCodeModel by right clicking on the view folder or right clicking in the controller class file as shown in the following image.
After clicking the Add button, it generates the view with the name CreateQRCode. Now open the CreateQRCode.cshtml file and replace the default generated code as follows:
In the preceding code you see the image tag src Uri assigned with ViewBag, which we have set from the HomeController class.
Step 5: Configure the Routing
We have modified the auto-generated files, so we have to set the default routing so that when you run the application, then the default view can start in the browser. Now open the Startup.cs and set the default routing as per our controller and the created view as shown in the following image.
After adding all the required files and configuration, the Solution explorer of our created ASP.NET core application will look like as follows.
Step 6: Run the Application.
Now press Keyboard F5 or Visual Studio run button to run the application. After running the application, the following screen will be shown in the browser. Enter the QR code text and click on the Generate QR code button, then it will generate the following code as in the following screenshot.
Step 7: Read the QR Code
Open the your mobile phone QR code reader application and scan it, it will show the website link which we have entered during the QR code creation and Go To Website, it will open the website as shown in the following demo.