How To Generate QR Code Using ASP.NET

This blog will demonstrate how to generate QR code using asp.net.

Introduction

This blog will demonstrate how to generate QR code using ASP.NET.

Step 1

Create an empty web project in the Visual Studio version of your choice.

Step 2

Add Web Form, right-click on the project, select Add New Item, choose web form, give it a name and click on Add.

Step 3

Add script and styles in web form head section.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  

Step 4

Design web form by dragging and dropping textbox control, button control, and placeholder control. Apply bootstrap 4 class to textbox and button.

  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4. <head runat="server">  
  5.     <title>QR Generate</title>  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div class="container">  
  13.             <h2>How to Generate QR Code in ASP.NET</h2>  
  14.             <div class="row">  
  15.                 <div class="col-md-4">  
  16.                     <div class="form-group">  
  17.                         <label>Enter Something</label>  
  18.                         <div class="input-group">  
  19.                             <asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>  
  20.                             <div class="input-group-prepend">  
  21.                                 <asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />  
  22.                             </div>  
  23.                         </div>  
  24.                     </div>  
  25.                 </div>  
  26.             </div>  
  27.             <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>  
  28.         </div>  
  29.     </form>  
  30. </body>  
  31. </html>  

Step 5

Double-click on the Generate button control and write the following C# code.

  1. using System;  
  2. using System.Drawing;  
  3. using System.IO;  
  4. using QRCoder;  
  5.   
  6. namespace QRCode_Demo  
  7. {  
  8.     public partial class QRCode : System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.   
  13.         }  
  14.   
  15.         protected void btnGenerate_Click(object sender, EventArgs e)  
  16.         {  
  17.             string code =txtQRCode.Text;  
  18.             QRCodeGenerator qrGenerator = new QRCodeGenerator();  
  19.             QRCodeGenerator.QRCode qrCode = qrGenerator.CreateQrCode(code, QRCodeGenerator.ECCLevel.Q);  
  20.             System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();  
  21.             imgBarCode.Height = 150;  
  22.             imgBarCode.Width = 150;  
  23.             using (Bitmap bitMap = qrCode.GetGraphic(20))  
  24.             {  
  25.                 using (MemoryStream ms = new MemoryStream())  
  26.                 {  
  27.                     bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);  
  28.                     byte[] byteImage = ms.ToArray();  
  29.                     imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);  
  30.                 }  
  31.               PlaceHolder1.Controls.Add(imgBarCode);  
  32.             }  
  33.         }  
  34.     }  
  35. }  

Step 6

Run the project by pressing Ctrl + F5.

Final output

Output