In this article I will explain with an example, how to dynamically generate and display QR Code Image in ASP.Net Core MVC Razor.
The QR Code Image will be dynamically generated in ASP.Net Core MVC Razor using the QRCoder library which is an Open Source Library QR code generator.
Downloading QRCoder package
You will need to install the QRCoder package using the following command.
Install-Package QRCoder -Version 1.1.5
Downloading System.Drawing.Common library
You will need to install the System.Drawing.Common package using the following command.
Install-Package System.Drawing.Common -Version 4.7.0
Namespaces
You will need to import the following namespaces.
C#
using QRCoder;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
Inside this Action method, the value of the QR Code entered in the TextBox is captured as parameter.
The QR Code is passed to the CreateQrCode method of the QRCoder library which returns a Bitmap image.
Finally the Bitmap image is saved to MemoryStream and then converted to Base64 string.
The Base64 string is set into a ViewBag object.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string qrcode)
{
using (MemoryStream ms = new MemoryStream())
{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeGenerator.QRCode qrCode = qrGenerator.CreateQrCode(qrcode, QRCodeGenerator.ECCLevel.Q);
using (Bitmap bitMap = qrCode.GetGraphic(20))
{
bitMap.Save(ms, ImageFormat.Png);
ViewBag.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
}
}
return View();
}
}
View
The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML TextBox, a Submit Button and an Image element.
When the Submit Button is clicked, the Form is submitted and the generated QR Code Image is displayed in HTML Image element using ViewBag object.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<form asp-action="Index" asp-controller="Home" >
<input type="text" name="qrcode"/>
<input type="submit" value="Generate"/>
</form>
@if (ViewBag.QRCodeImage != null)
{
<img src="@ViewBag.QRCodeImage" alt="" style="height:150px;width:150px"/>
}
</body>
</html>
Screenshot
No comments:
Post a Comment