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
Here's the markup:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
<%@ Register assembly="ImageControl" namespace="PAB.WebControls"
<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">http://www.eggheadcafe.com</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:
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 http://twit88.com/platform/projects/show/mt-qrcode 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.
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
By Peter Bromberg Popularity (9404 Views)