What is QR Code ?
QR code (abbreviated from Quick Response code) is the trademark for a type of matrix barcode (or two-dimensional barcode) is a a machine-readable optical label that contains information about the item to which it is attached.
Step-1
Let's Create a .NET Core MVC application targeting netcoreapp2.2. If you are new to .NET Core then follow the link how to create .NET Core application.
Step-2
Install QRCoder via NuGet Package Manager, also you can add the package through Nuget Package manager console following this command : Install-Package QRCoder.
Add the Microsoft.AspNetCore.Mvc.TagHelpers through Nuget, as we use tag helper to access the controller.
Now add the below design in "Index.cshtml"
 |
@model Byte[]
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
@section Scripts{
}
<form asp-action="Index" asp-controller="Home" asp-antiforgery="true">
<div class="container">
<div class="panel-group">
<div class="panel panel-info">
<div class="panel-heading">Generate QR Code</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">Type text to generate QR Code</div>
<div class="col-md-9"><input type="text" class="form-control" id="txtQRCode" name="txtQRCode" /></div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-9">
<input type="submit" class="btn btn-primary" id="btnSubmit" value="Generate QR Code" autocomplete="off" />
</div>
</div>
</div>
@{
if (Model != null)
{
<div class="row mt-3">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-9">
<img src="@String.Format("data:image/png;base64,{0}", Convert.ToBase64String(Model))" height="300" width="300"/>
</div>
</div>
</div>
}
}
</div>
</div>
</div>
</div>
</form>
. Once the QR Code is generated by the Index Action method, ‘byte’ array is returned to the View as model and then the bitmap image is displayed by the below code:
if (Model != null)
{
<div class="row mt-3">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-9">
<img src="@String.Format("data:image/png;base64,{0}",
Convert.ToBase64String(Model))" height="300" width="300"/>
</div>
</div>
</div>
}
Add the Index Post method inside the Home controller like below.
[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult Index(string txtQRCode) {
QRCodeGenerator _qrCode = new QRCodeGenerator();
QRCodeData _qrCodeData = _qrCode.CreateQrCode(txtQRCode,QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(_qrCodeData);
Bitmap qrCodeImage = qrCode.GetGraphic(20);
return View(BitmapToBytesCode(qrCodeImage));
}
[NonAction]
private static Byte[] BitmapToBytesCode(Bitmap image)
{
using (MemoryStream stream = new MemoryStream())
{
image.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
return stream.ToArray();
}
}
>> This Index Action receives a string parameter. 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 QRCode object ('qrCode') defined calls a static function called
'BitmapToBytesCode()'. The role of this function is to convert the Bitmap image to
'Byte[]'.
Step-6Now run the application and see the output like below.
 |
| Type the text in input box and hit enter on Button it will generate the Bitmap Image like above. Then scan the QR Code and you can see the text. |
 |
| You can see the mobile scanner recognized perfectly as per our text. |
</> Find the Source Code in Github.com/CoreProgramm/Summary
In this tutorial we discussed how to Generate QR Code in .NET Core using Bitmap. If have any question related to this topic then give your feedback.
Post a Comment