MENU

Generating QR Code To Open Web URL In ASP.NET Core MVC

Filed Under: , , , on
In the previous article, we have learned how to create a simple QR code which has a sample text. Now in this article we will learn how to generate the QR code to open the web page after scanning the QR code. As shown in the following image.



Let's learn step by step by creating an ASP.NET Core application.

Step 1: Create ASP.NET Core MVC 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.
The preceding steps will create the ASP.NET Core MVC application and solution explorer. It will look like as shown in the following image.


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.

using System.ComponentModel.DataAnnotations;

namespace GeneratingQRCode.Models
{
    public class QRCodeModel
    {
        [Display(Name = "Enter QRCode Text")]
        public string QRCodeText { get; set; }

    }
}

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.

using GeneratingQRCode.Models;
using Microsoft.AspNetCore.Mvc;
using QRCoder;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

using Static.QRCoder.PayloadGenerator;

namespace GeneratingQRCode.Controllers
{
    public class HomeController : Controller
    {

        [HttpGet]
        public IActionResult CreateQRCode()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateQRCode(QRCodeModel qRCode)
        {
            
            string WebUri = new Url(qRCode.QRCodeText);
            string UriPayload =WebUri.ToString();
            QRCodeGenerator QrGenerator = new QRCodeGenerator();
            QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(UriPayload, QRCodeGenerator.ECCLevel.Q);
            QRCode QrCode = new QRCode(QrCodeInfo);
            Bitmap QrBitmap = QrCode.GetGraphic(60);  
            byte[] BitmapArray = QrBitmap.BitmapToByteArray();
            string QrUri = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(BitmapArray));
            ViewBag.QrCodeUri = QrUri;
            return View();
        }
    }

    //Extension method to convert Bitmap to Byte Array
    public static class BitmapExtension
    {
        public static byte[] BitmapToByteArray(this Bitmap bitmap)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                bitmap.Save(ms, ImageFormat.Png);
                return ms.ToArray();
            }
        }
    }
}

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:

CreateQRCode.cshtml

@model GeneratingQRCode.Models.QRCodeModel

@{
    ViewData["Title"] = "www.compilemode.com";
}
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Generate QR Code" class="btn btn-primary text-center" />
            </div>
            <div class="form-group">

                <img src="@ViewBag.QrCodeUri" class="img-thumbnail" />
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

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.




Summary

I hope, from all the above examples, you have learned to generate QR Code which open the given URL using ASP.NET Core MVC. If you like it, share it with your friends, subscribe to the blog and YouTube channel for more such articles.
Read more

Multiple Layout Pages In ASP.NET Core MVC

Filed Under: , , on
The layout page shares the common design across all pages. There are many methods which are listed below to change the layout page dynamically in ASP.NET Core MVC.
  • While Adding View Page, Assign Layout Page .
  • Using View Start Page
I hope you have understood about the layout page from the preceding brief summary. Now let's implement it practically.

Step 1: Create ASP.NET Core MVC 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.
The preceding steps will create the ASP.NET Core MVC application.

Step 2:  Add user and admin controller controller.

Right click on the Controller folder in the created ASP.NET Core MVC application and add the two controller classes with names UserController and AdminController as follows.


The preceding two controller classes are added into the project which are User and Admin and create the following action methods in respective controller class.

UserController.cs

public class UserController : Controller  
    {  
        public IActionResult Login()  
        {  
            //write logic here  
            return View();  
        }  
    }
AdminController.cs

 
public class AdminController : Controller  
   {  
       [HttpPost]  
       public IActionResult AddRole()  
       {  
           //write logic here  
           return View();  
       }  
   }
For preceding two controllers we will use two different layout pages.

Step 3: Add Views and Layout pages

We can decide which layout page to be used while adding the view. Let us follow the following steps to add the layout page with view. Click on the View folder of the created ASP.NET Core MVC application as,


As shown in the preceding image, specify the view name and check the use layout page option and click the adding button, then the following default layout page will be added into the solution explorer. Now let's add another layout page named admin as in the following. Click on solution explorer and add the layout page as follows:



Now click on add button, then two layout pages are added under shared folder which are AdminLayoutPage and Layout.

Step 4: Set layout pages to view

We have created view and layout pages. Now let us assign layout pages to the views. There are many ways to assign layout page to the view which are listed as in the following:
  • Using wizard
  • Using ViewStart page
  • Using view method
Using wizard

You can use wizard to set the layout page while adding the view, steps are as follows:
  • Right click on view folder and select view template as,

Specify the view name and check on Use a layout page and click on browse button. The following window will appear,


Now choose layout page from preceding available Layout pages and click on ok button. The layout page will look like as follows,


Now click on add button then layout page reference added into the view page as,

So whenever you will add through wizard or manually the layout page reference need to be set in every view page where the layout page is needed.

Using ViewStart page

Adding reference of layout page in every page is very difficult and repetitive of code. Let us consider I have one controller which as twenty plus action method then each twenty views we need to add reference of layout page. Assume another requirement we need to set layout page according to condition basic or controller basic then we need to use Viewstart page.

Lets open the ViewStart.cshtm page and write the following code,

@{  
    string CurrentReq = Convert.ToString(Context.Request.HttpContext.Request.RouteValues["Controller"]);
    dynamic Layout;  
    switch (CurrentReq)  
    {  
        case "User":  
            Layout = "~/Views/Shared/_Layout.cshtml";  
            break;  
        default:  
            //Admin layout  
            Layout = "~/Views/Shared/_AdminLayoutPage.cshtml";  
            break;  
    }  
}
Now run the application, the Login view will look like as follows in which we have used Layout page,

Now run AddRole view, Then the output will look like the following,

I hope from all the preceding examples, you have learned how to work with multiple layout pages in ASP.NET Core MVC.

Note:
  • Apply proper validation before using it in your project.
Summary

 I hope this article is useful for all readers. If you have any suggestions, then please mention it in the comment section.

Related Tutorials


How To Create an ASP.NET MVC Application

Read more

How To Create QR Code In ASP.NET Core MVC

Filed Under: , , , on

Now a day's QR code becomes the internal part of our digital life. We will see a QR code on any E-tickets such as Stadium, air, bus, hotel booking. One of the best examples is India's UPI payment which is initiated by Indian PM Narendra Modi. You just have to scan the QR code to make the payment digital to the person’s bank account. This initiative is the very game changer since all the money comes to the bank and helped to stop the black money.

There are also many businesses generating the bar codes on E-Receipts to validate the authenticity of the receipt which can give the assurance that it's not been manipulated, which people did in the past simply editing and making false documents. There are many benefits using the QR code, the typical QR code will look like as follows.

Now in this article, we will learn how to generate a QR code using ASP.NET Core MVC. Let's learn step by step by creating an ASP.NET Core application.

Step 1: Create ASP.NET Core MVC 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.
The preceding steps will create the ASP.NET Core MVC application and solution explorer. It will look like as shown in the following image.


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.

using System.ComponentModel.DataAnnotations;

namespace GeneratingQRCode.Models
{
    public class QRCodeModel
    {
        [Display(Name = "Enter QRCode Text")]
        public string QRCodeText { get; set; }

    }
}

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.

using GeneratingQRCode.Models;
using Microsoft.AspNetCore.Mvc;
using QRCoder;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

namespace GeneratingQRCode.Controllers
{
    public class HomeController : Controller
    {

        [HttpGet]
        public IActionResult CreateQRCode()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateQRCode(QRCodeModel qRCode)
        {
            QRCodeGenerator QrGenerator = new QRCodeGenerator();
            QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(qRCode.QRCodeText, QRCodeGenerator.ECCLevel.Q);
            QRCode QrCode = new QRCode(QrCodeInfo);
            Bitmap QrBitmap = QrCode.GetGraphic(60);  
            byte[] BitmapArray = QrBitmap.BitmapToByteArray();
            string QrUri = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(BitmapArray));
            ViewBag.QrCodeUri = QrUri;
            return View();
        }
    }

    //Extension method to convert Bitmap to Byte Array
    public static class BitmapExtension
    {
        public static byte[] BitmapToByteArray(this Bitmap bitmap)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                bitmap.Save(ms, ImageFormat.Png);
                return ms.ToArray();
            }
        }
    }
}

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:

CreateQRCode.cshtml

@model GeneratingQRCode.Models.QRCodeModel

@{
    ViewData["Title"] = "www.compilemode.com";
}
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Generate QR Code" class="btn btn-primary text-center" />
            </div>
            <div class="form-group">

                <img src="@ViewBag.QrCodeUri" class="img-thumbnail" />
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

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.

Demo


Step 7: Read the QR Code

Open the your mobile phone QR code reader application and scan it, it will show the following text which we have entered during the QR code creation.




Summary

I hope, from all the above examples, you have learned how to generate a QR code using the ASP.NET Core. If you like it, share it with your friends, subscribe to the blog and YouTube channel for more such articles.
Read more

Bind DropDownList Using ViewBag In ASP.NET Core

Filed Under: , , , on

In this article, we will learn how to bind DropDownList using ViewBag in ASP.NET Core MVC. Let's learn step by step by creating an ASP.NET Core application.

Step 1: Create ASP.NET Core MVC 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.
The preceding steps will create the ASP.NET Core MVC application. If you are new to the ASP.NET core and know how to create an ASP.NET Core application in depth, then refer to my following article.

Step 2: Add controller class

Delete the existing controller for ease of understanding, then add a new controller by right clicking on the Controller folder in the created ASP.NET Core MVC application, give the Controller name Home or as you wish as in the following.


Now open the HomeController.cs file and write the following code into the Home controller class as in the following.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace BindDropDownList.Controllers
{
    public class HomeController : Controller
    {
      
        public IActionResult Index()
        {
            //Creating the List of SelectListItem, this list you can bind from the database.
            List<SelectListItem> cities = new()
            {
                new SelectListItem { Value = "1", Text = "Latur" },
                new SelectListItem { Value = "2", Text = "Solapur" },
                new SelectListItem { Value = "3", Text = "Nanded" },
                new SelectListItem { Value = "4", Text = "Nashik" },
                new SelectListItem { Value = "5", Text = "Nagpur" },
                new SelectListItem { Value = "6", Text = "Kolhapur" },
                new SelectListItem { Value = "7", Text = "Pune" },
                new SelectListItem { Value = "8", Text = "Mumbai" },
                new SelectListItem { Value = "9", Text = "Delhi" },
                new SelectListItem { Value = "10", Text = "Noida" }
            };

            //assigning SelectListItem to view Bag
            ViewBag.cities = cities;
            return View();
        }

       
    }
}

Step 3: Add View

Add an empty view named Index.cshtml and write the following code.

@{
    ViewData["Title"] = "Home Page";
}
<hr />
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label  class="control-label"> Select City</label>

                <select name="products" class="form-control" asp-items="@ViewBag.cities"></select>


            </div>
        </div>
    </div>

Step 4: Run the Application.

Now press Keyboard F5 or Visual Studio run button to run the application. After running the application, the output will be shown on the browser, as in the following screenshot.


I hope, from all the above examples, you have learned how to bind the DropDownList using ViewBag in ASP.NET Core MVC.

Summary

I hope this article is useful for all readers. If you have a suggestion then please contact me.

Related Articles

Read more

Generating QR Code Using ASP.NET Core MVC

Filed Under: , , , on

In this article, we will learn how to generate a QR code using ASP.NET Core MVC. Let's learn step by step by creating an ASP.NET Core application.

Step 1: Create ASP.NET Core MVC 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.
The preceding steps will create the ASP.NET Core MVC application and solution explorer. It will look like as shown in the following image.


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.

using System.ComponentModel.DataAnnotations;

namespace GeneratingQRCode.Models
{
    public class QRCodeModel
    {
        [Display(Name = "Enter QRCode Text")]
        public string QRCodeText { get; set; }

    }
}

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.

using GeneratingQRCode.Models;
using Microsoft.AspNetCore.Mvc;
using QRCoder;
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

namespace GeneratingQRCode.Controllers
{
    public class HomeController : Controller
    {

        [HttpGet]
        public IActionResult CreateQRCode()
        {
            return View();
        }

        [HttpPost]
        public IActionResult CreateQRCode(QRCodeModel qRCode)
        {
            QRCodeGenerator QrGenerator = new QRCodeGenerator();
            QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(qRCode.QRCodeText, QRCodeGenerator.ECCLevel.Q);
            QRCode QrCode = new QRCode(QrCodeInfo);
            Bitmap QrBitmap = QrCode.GetGraphic(60);  
            byte[] BitmapArray = QrBitmap.BitmapToByteArray();
            string QrUri = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(BitmapArray));
            ViewBag.QrCodeUri = QrUri;
            return View();
        }
    }

    //Extension method to convert Bitmap to Byte Array
    public static class BitmapExtension
    {
        public static byte[] BitmapToByteArray(this Bitmap bitmap)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                bitmap.Save(ms, ImageFormat.Png);
                return ms.ToArray();
            }
        }
    }
}

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:

CreateQRCode.cshtml

@model GeneratingQRCode.Models.QRCodeModel

@{
    ViewData["Title"] = "www.compilemode.com";
}
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Generate QR Code" class="btn btn-primary text-center" />
            </div>
            <div class="form-group">

                <img src="@ViewBag.QrCodeUri" class="img-thumbnail" />
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

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.


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.

Demo


Step 7: Read the QR Code

Open the your mobile phone QR code reader application and scan it, it will show the following text which we have entered during the QR code creation.




Summary

I hope, from all the above examples, you have learned how to generate a QR code using the ASP.NET Core. If you like it, share it with your friends, subscribe to the blog and YouTube channel for more such articles.
Read more

Deploy ASP.NET Core Application in Docker Container

Filed Under: , , , , , , on

In this article we will learn how deploy an ASP.NET core web application in a docker container. The intend to write this article is to make understandable to everyone by explaining in the simple language.

What is Docker?

Docker is the platform for deploying and building the applications which delivers the application in the packages over the operating system level virtualization. Docker requires the following components to run the application

  • Image 
  • Container

What is docker image?

Docker image is the set of configuration and instructions to create the docker container, an image is created during building the application based on steps defined in the docker file of your application. The docker image is the read-only file which cannot be modified once it's created, but we can delete the image from docker.

What is Container?

The Container is an independent isolated process of an operating system which has its own networking and file system to run the image or application. The container is created on the docker engine based on the image configuration.

Difference between Virtual Machine and Docker Container?

The virtual machine (Linux, ubuntu) is installed on some other operating system (windows) which shares the same lifecycle such as running and shutting at the same time. Virtual machine acts as a real PC on an actual operating system which has full features such as RAM, Hard Disk, networking etc. In this case, often virtual machines are called guest PC and the actual PC which runs the VM is called host system machine.
The container is the minimal and smaller part of a virtual machine which does not use the entire operating system as a virtual machine. The container cuts the unnecessary components of the VM and creates the isolated virtualized environment called a container, which is faster than virtual machine. The container does not require the host system as a virtual machine instead, it works on the docker engine.


The preceding diagram gives more understanding about the virtual machine and docker container.

Step 1: Install Prerequisites

You need to install the docker desktop client based on your machine (PC) as per your operating system type. Use the following link to download the docker desktop client.
The installed docker desktop client looks like as follows.


I hope you installed the prerequisites.

Step 2 : Create the ASP.NET Core Application

  1. Open Visual Studio (I am using 2019)
  2. Once Visual studio open then click on Continue Without Code(If you are using VS 2019)
  3. Then from Visual Studio Menu, click on File => New Project , as shown in the following image

After clicking on the New Project, following window will get appears, Choose the project template ASP.NET Core Web App as shown in the following image


After Choosing the project template click on next button, provide the project name and storage location of the project on your PC


After providing the required details, click on next button the following screen will get appears. Provide the additional information for your project such as target framework and other details, Just choose the latest .NET 5.0 and skip other details

 
Now providing the required details, click on create button it will create the ASP.NET Core web application and created ASP.NET Core web application looks like as follows in your visual studio.

Step 3: Add Docker Support

Docker support can be enabled in two ways from visual studio, at the time of creating the application and after creating the application. To make it easier to make understand for beginners, in this tutorial we will enable the docker support after creating the ASP.NET core application.

Right click on the solution explorer of your existing project and follow the steps which are shown in the following image.


Once you click on the Docker Support option, it will prompt the screen which is shown in the step 4.

Step 4: Choose the Container (Docker File)

Choose the target operating system on which type of container you want to run the application, and it will create the docker image. Let's choose the Linux option which creates the image size smaller than compared to the windows container image.


In the preceding image click on the OK button, it will create the Docker file in your project solution as shown in the following image.


Step 5: Open the Docker File

Double click on docker file in which you will see auto generated code from visual studio which has pre-configured steps to create and run the docker image in multiple stages.

The visual studio creates docker file in your project which has multi-stages build features which make sure the final image remain smaller in the size which helps to become container more efficient and faster. The container images created in the following stages
  • Base 
  • Build 
  • Publish
  • Final Image

We will learn more about the base image and docker file stages in a separate article.

Step 6:  Run the image in Docker Container

Choose the docker option to run the application as shown in the following image.


After clicking on the docker option, it will build the code and creates a docker image as well as a docker container and run the application inside the docker container. The application opens in the browser as follows.


In the preceding, our application is running inside the Linux Docker container instead of IIS express. We can view the created images by using the docker command or navigating to the docker desktop dashboard. Let's view images using the docker command. Open your windows command prompt and use the following command on the command prompt and press enter.

           Docker Images

The preceding docker command will display the list of available docker images as follows.


I hope from all the above-mentioned examples you have learned how to deploy an  ASP.NET Core web application in the docker container.

Note

  • This tutorial is for the beginner, so there is no command line tool used to build, run the docker container images but internally after clicking on Visual Studio Run Option by choosing Docker option does the same thing
  • The intend of this tutorial is to make familiar to beginners about docker.
  • Next article we will learn how to build, run and create images using docker commands.

Summary

I hope the preceding article is useful to understand how to deploy an ASP.NET core web application in a docker container.

Related articles

Read more

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode