Blog

Using QR Barcode with ASP.NET

Marina Stoyanova / Monday, April 14, 2014

ASP.NET QR code header imageA QR code is a popular way to present small chains of information. Infragistics has a QRCodeBarcode control for both XAML and Ignite UI. I have already written about the Ignite UI control in my previous blog Creating a vCard QR Barcode generator with jQuery igQRCodeBarcode control. Although you can use this control in an ASP.NET project in the current blog we are going to look at two alternative ways of creating an ASP.NET application using QR code. Those alternative ways are namely calling the Infragistics WPF control from ASP.NET project and using a ready control particularly built for ASP.NET.  For the purpose of the blog I will attach a sample with the .dll file of this particularly built control which you can download and use to create your own apps.

Using WPF

In the Infragistics shared XAML controls you can find a whole range of different barcodes that are supported. In this blog we are going to  focus on the Quick Response barcode (QR). Adding this control to a WPF project is not that hard you can either drag the control from the toolbox and drop it on the designer or you can add it in the code behind. You can read in details how to do that in the documentation.

If you have added the control by taking it from the toolbox you will see that the needed references are automatically added. So all we need to do is set some properties to the control and assign a data.

XAML:

  1. <Grid>
  2.    <ig:XamQRCodeBarcode Name="barcode" />
  3. Grid>

C#:

  1. public MainWindow()
  2. {
  3.     InitializeComponent();
  4.  
  5.     this.barcode.Data = "Hello";
  6.     this.barcode.Height = 200;
  7.     this.barcode.Width = 200;
  8.     this.barcode.ErrorCorrectionLevel = QRCodeErrorCorrectionLevel.Low;
  9.     this.barcode.BarsFillMode = BarsFillMode.EnsureEqualSize;
  10. }

Now we are ready to get started with our ASP.NET application. To see the control in action we are going to create a vCard generator. In the ASP.NET project we will create some inputs for the general information of the users and in the code behind we are going to take and remodel it so that it will meet the requirements for the vCard structure. This part is actually similar to what we did with the Ignite UI QR barcode, that is why I wont discuss it in details.

The important part is that after we have our barcode data we will have to send it to the WPF project so that it can generate the appropriate barcode image and then we will visualize it in the APS.NET project. This can happen by creating a process with arguments. The arguments we are going to send are two – one of them is the barcode data and the other one will be the path to the directory where we want to find the newly created image. After we start the process we should handle it in the WPF project.

ASP.NET project : C#

  1. //Creating a file with unique name
  2. Random random = new Random();
  3. int randomNumber = random.Next(0, 100);
  4. string randNumbStr = randomNumber.ToString();
  5. String path = Server.MapPath("~/Images/QRBarcodes");
  6. string filename = firstName + secondName +randNumbStr+ ".png";
  7. string dir ='"'+ path + "\\" +filename+'"';
  8.  
  9. //dir = path to the newly created image, barcode = vCard formatted data
  10. string[] args = {dir, barcode };
  11. string arg = String.Join(" ", args);
  12.  
  13. //Starting the WPF process with two arguments: the path where
  14. //it shoud create the image and the barcode data
  15. Process proc = new Process();
  16. proc.StartInfo.FileName = @"Place the path to your XAML executeable file here.";
  17. proc.StartInfo.Arguments = arg;
  18. proc.StartInfo.UseShellExecute = false;
  19. proc.StartInfo.RedirectStandardOutput = true;
  20. proc.Start();

We are going to slow down just a little and go though the changes of the WPF project step by step. First we need to  catch the incoming data from the ASP.NET project. That is going to happen with the help of the Environment.GetCommandLineArgs Method which returns a string array containing the command-line arguments for the current process. We send two arguments so we receive two arguments – the directory path is hosted in the second element of the array and the barcode data is in the third element of the array.

WPF project: C#

  1. public MainWindow()
  2. {
  3.     InitializeComponent();
  4.     string[] args = Environment.GetCommandLineArgs();
  5.  
  6.     this.barcode.Data = args[2];
  7.     this.barcode.Height = 200;
  8.     this.barcode.Width = 200;
  9.     this.barcode.ErrorCorrectionLevel = QRCodeErrorCorrectionLevel.Low;
  10.     this.barcode.BarsFillMode = BarsFillMode.EnsureEqualSize;
  11. }

The second thing we need to do is change the main window visibility. When we start the process the WPF project will be triggered and the main window will appear which is an unwanted effect that is why we need to set its visibility property to collapsed.

  1. <Window xmlns:ig="http://schemas.infragistics.com/xaml" x:Class="xamQRBarcode.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="350" Width="525" Visibility="Collapsed" ShowInTaskbar="False">
  5.  
  6.     <Grid>
  7.        <ig:XamQRCodeBarcode Name="barcode" Loaded="barcode_Loaded" />
  8.     Grid>
  9. Window>

The last thing we need to do is create the image and save it in the given directory. For the creation of the image we are going to use the RenderTargetBirmap class, which converts a visual object into a bitmap. Then we are going to draw a new rectangle and fill it with the appropriate colors. After encoding it we will save it in the desired directory.

  1. public void CreateImage(FrameworkElement element)
  2. {
  3.    string[] args = Environment.GetCommandLineArgs();
  4.    string path = args[1];
  5.  
  6.     double width = element.Width;
  7.     double height = element.Height;
  8.     RenderTargetBitmap bmpCopied = new RenderTargetBitmap((int)Math.Round(width), (int)Math.Round(height), 96, 96, PixelFormats.Default);
  9.     DrawingVisual dv = new DrawingVisual();
  10.     using (DrawingContext dc = dv.RenderOpen())
  11.     {
  12.         VisualBrush vb = new VisualBrush(element);
  13.         dc.DrawRectangle(vb, null, new Rect(new Point(), new Size(width, height)));
  14.     }
  15.     bmpCopied.Render(dv);
  16.     PngBitmapEncoder encoder = new PngBitmapEncoder();
  17.     encoder.Frames.Add(BitmapFrame.Create(bmpCopied));
  18.     FileStream stream5 = new FileStream(path, FileMode.Create);
  19.     encoder.Save(stream5);
  20.     this.Close();
  21. }

Now that the barcode image was successfully created and stored in the required directory all we need to do is go back to the ASP.NET project and use it.

  1. QRCodeImage.ImageUrl = "~/Images/QRBarcodes/" + filename;

This is how you can create an ASP.NET application and use the XAML barcode to generate a QR code with your data encoded in it.

Image:

vCard QR barcode generator for ASP.NET with WPF

ASP.NET separate control

Although the above method of using the QRCodeBarcode control is useful it is not that  fast and effective as using a prepared control for the respective platform. That is why I built a separate control for ASP.NET. You can think of it as form of CTP. In the link below you can find a sample project using this control. Pay attention that this control depends on the Infragistics4.WebUI.Shared.v13.2.dll library which you can find in the Infragistics ASP.NET controls. You can download a 30 day trial from our products page. It is essential to have at least the trial installed  in order to get the control running. The next step in the creation of your own app is adding a reference to the control and registering it. There are two ways to do that – you can add the control to the toolbox that way you will only have to drag it to your app, and it will automatically register and add the needed reference of the control. The other way Is to add the reference and register the control by yourself.

 To add the control to your toolbox you should follow few steps:

1. Open the toolbox create a new tab or use the general tab.

2.Open the Choose Item dialog and click browse.

3.Find the dll of the control and add it.

4. Drag the control to the designer.

If you want to register it manually:

  1. <%@ Register Assembly="Infragistics.Web.QRCodeBarcode" Namespace="Infragistics.Web.UI.Barcodes" TagPrefix="ig" %>
  1. <ig:QRCodeBarcode Data="Hello" runat="server">ig:QRCodeBarcode>

Last but not least add a reference to the shared.dll file and set the copy local property to true. Now you can add your data and some other properties and generate the barcode. 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestCustomControl.WebForm1" %>
  2. <%@ Register Assembly="Infragistics.Barcodes" Namespace="Infragistics.UI.Barcodes" TagPrefix="ig" %>
  3.  
  4. <!DOCTYPE html>
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8.     
  9.     <title>title>
  10.  
  11. head>
  12. <body>
  13.     <form id="form1" runat="server">
  14.     <div>
  15.           <ig:QRCodeBarcode Data="Hello"runat="server">ig:QRCodeBarcode>
  16.     div>
  17.     form>
  18. body>
  19. html>

Keep in mind that this control (just like a CTP would) may go though some breaking changes in the future. The properties of the barcode are similar to those of the Ignite UI and the XAML QRCodeBarcode control. You can use the API for more information about its features.

Summary

A QR code is a matrix barcode and it consists of black modules arranged in a square grid on a white background. This code present different kind of information like Urls, personal data in a form of vCard or another electronic business card as well as some numeric info or just text. Those codes provides an easy way to transmit and distribute information that is why they can become a useful part of your application. We discussed two ways of creating an ASP.NET application that uses the QRCodeBarcode control. You can use either one to create a stunning ASP.NET apps.

You can download the sample using the WPF control:  XAML Project and ASP.NET project or you can download the sample with the separate ASP.NET control.

 

ASP.NET free trial download