ASP.NET - Build a QR-Code Web Control

QR-Codes have become quite popular in the last few years, and there are QR-Code reader apps for virtually every mobile device that has a built-in camera. These are mostly used for web urls to make it easier for mobile device users to navigate and bookmark a page with their mobile browsers. Of course, other information can be QR-encoded too.

I started out by looking for a well-built, open source QR Code library, and settled on MessagingToolkit.QRCode, which can be found here:  

The sample ASP.NET web application that I've put together simply uses default values for various properties, but the library allows for significant customization of encoding method, size and colors.

Next, I knew that I wanted to be able to immediately display the generated QR Code image, but I didn't want the messy process of having to save it to the filesystem so an ImageUrl could be supplied to the requisite Image Control.

Pete's custom "in-memory" Image Control to the rescue. This is a control I wrote several years ago. It behaves like the regular ASP.NET Image control - but you can assign it's Bitmap property programmatically at runtime -- no more messy saving of images on the file system.

With these parts in place, I built a simple ASP.NET Web page with a textbox, a button, and one of my Image Controls on it - and with just a few lines of code, voilĂ  - we have an ASP.NET page that will turn an entered text into a nice QR Code image!

Here's the markup:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="QRCodeWeb._Default" %>
<%@ Register assembly="ImageControl" namespace="PAB.WebControls" tagprefix="cc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        Welcome to QRCode Web Demo!
        Enter the url you want QR - encoded, and press the Encode Button.
        <asp:TextBox ID="txtToEncode" runat="server" Width="533px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Encode" onclick="Button1_Click" />
        <cc1:ImageControl ID="ImageControl1" Runat="server">

And here is the codebehind class for the page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MessagingToolkit.QRCode.Codec;
using System.Drawing;

namespace QRCodeWeb
    public partial class _Default : System.Web.UI.Page
         protected void Page_Load(object sender, EventArgs e)


        protected void Button1_Click(object sender, EventArgs e)
             // Note all the below items are customizable -
            // see  for downloads.
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
            qrCodeEncoder.QRCodeBackgroundColor = Color.White;
            qrCodeEncoder.QRCodeForegroundColor = Color.Black;
            qrCodeEncoder.CharacterSet = "UTF-8";
                qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
                int scale = Convert.ToInt16(4);
                qrCodeEncoder.QRCodeScale = scale;
                int version = Convert.ToInt16(0);
                qrCodeEncoder.QRCodeVersion = version;
                string errorCorrect = "M";
            String data = txtToEncode.Text;
             System.Drawing.Image image = qrCodeEncoder.Encode(data);
             this.ImageControl1.Bitmap = (Bitmap) image;

Fire up your favorite iPhone or Android QRCode reader and point it at the image above. Bingo!!

That's all it takes! Feel free to download the complete Visual Studio 2010 solution, which includes the MessagingToolkit library, my custom Image Control, and the ASP.NET Demo application.

By Peter Bromberg   Popularity  (11771 Views)