Easily Generate QR Codes with Telerik’s ASP.NET AJAX Barcode Control

by ASP.NET AJAX Team | Comments 4

A typical scenario is for someone to browse a website on his computer, and then to wish to open a link of the site on his cellphone. It would be easier for the person to open it, if it’s encoded as an image that the phone can directly read, because smartphones cannot understand human readable text, but most of them can read images, called QR codes.

What are QR (Quick Response) codes and how are they used?

The QR is a two-dimensional code. It looks like a matrix which consists of black square dots (modules) on a white background. Text information can be encoded into such QR Codes, called just symbols. These code symbols can be used to encode data that needs to be easily scanned using a QR Code scanner.

QR Codes are becoming more and more popular each day, because a variety of information can be stored inside them. Text, Phone numbers, Emails, URL and all kind of taking numbers can be stored in such symbols. If a link is encoded as a QR Code, a person can just take a snapshot of it with his cellphone and use a QR Code scanner application to read the symbol instead of retyping the URL by hand. Most of these apps are free and anyone can use them, so practically every smartphone can become a scanner.

RadBarcode now supports QR Code generating 

In Q3 2012 we implemented QR Code rendering for our ASP.NET AJAX Barcode control. Our goal was to make the generation of such codes as easy as possible. So generally all you have to do is to set Type and Text of the RadBarcode control and a QR Code symbol will be generated.

Example ASP markup:

<telerik:RadBarcode runat="server" Type="QRCode" Text="an example">
</telerik:RadBarcode>

Result:

 'an example' encoded as QR Code

At the same time the QR code is highly customizable. A collection called QRCodeSettings is holding properties for further customization of the control. It includes the following ones: ErrorCorrectionLevel, ApplicationIndicator, FNC1, Mode, ECI, Version, DotSize. You can read information for all of them in our documentation. You can test the different configurations of the QR code in our demos.

QR code rendering types

The QR code also has two types of rendering: SVG and PNG.  By default the SVG rendering is used. And you can set OutputType="EmbeddedPNG" to make it render as Data URL, in this case the PNG image will be embedded into the HTML markup using base 64 encoding.

What’s next?

PNG output for the rest of the barcode types is currently under development. For the next release it will be supported for all RadBarcode types as is now supported for the QRCode mode.

We are also planning to release an export support for RadBarcode. So if you have barcodes inside your grid, you will be able to export them to PDF.

If you have any suggestions or questions join in the discussions in our forum, we will be glad to hear your feedback.

About the author

Vasil Raev

Vasil Raev

is a Software Developer at Telerik's ASP.NET AJAX divisions. He enjoys swimming and riding his bike.  Also knows how to use his programming skills for solving complex math problems.

 

Posted in: qr-code visualization aspnet-ajax

4 Comments

Jon E
Will the code for generating them also be incorporated into the Reporting tools? Or has it already been added?
Regards,
Jon
Vassil Petev, Telerik
Hello Jon E,
The QR code generator is not yet included in Telerik Reporting, but this is in our plans. Hopefully, we will have it for Q1'13.
anil
I have one requirement generate QR COde like this
<html>
<head runat="server">
</head>
<body>
<asp:RadioButton ID="RadioButton1" runat="server" ForeColor="#006600" GroupName="coupon" Text="QR Code" />
                                <br />
                                <asp:RadioButton ID="RadioButton2" runat="server" ForeColor="#006600" GroupName="coupon" Text="Bar Code" />
                                <br />
                                <asp:RadioButton ID="RadioButton3" runat="server" ForeColor="#006600" GroupName="coupon" Text="Coupon Code" />
                            
<asp:DropDownList ID="DropDownList1" runat="server" Height="24px" style="color: #0000FF; background-color: #66CCFF" Width="147px">
                                    <asp:ListItem>Select type of value</asp:ListItem>
                                    <asp:ListItem>$</asp:ListItem>
                                    <asp:ListItem>%</asp:ListItem>
                                </asp:DropDownList>

 <asp:TextBox ID="TextBox1" runat="server" Height="24px" style="color: #0000FF" >               </asp:TextBox>

                                <asp:Button ID="Button1" runat="server" BackColor="#FF99CC" BorderStyle="Double" ForeColor="#003300" Height="31px" Text="Generate" OnClick="Button1_Click" />

<asp:Image ID="Image2" runat="server" Height="96px" Width="126px" />

</body>
</html>

3 Radio butons,1 DropDown list,1textBox,1 Image

I want to select perticular (ex:Bar,QR codeetc),Select Type of One dropdown list value,Enter Value in textBox AND I want to click on the Genarate button Generate QR code(OR)Bar code image display in the button below Image control 
After scan that Image display total values what i am selecting in the above,
Plz help me
Vasil Raev
Hi Anil,
In your Button1_Click you can set the settings to your RadBarcode Control similar way as it is done in http://demos.telerik.com/aspnet-ajax/barcode/examples/qrcode/defaultcs.aspx. If you have further questions http://www.telerik.com/account/support-tickets/available-support-list.aspx contact the support team  or ask in the http://www.telerik.com/community/forums/aspnet-ajax/barcode.aspx forums.

Regards,
Vasil

Comments

  1.    
     
    		 
    		  
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by ASP.NET AJAX Team - or - read latest articles in Developer Tools
Bloggers Archive Tags
Product Families