In this article I will explain with an example, how to generate
QRCode from database in ASP.Net using C# and VB.Net.
Installing QRCoder package and System.Drawing.Common using Nuget
Database
I have made use of the following table Links with the schema as follow.
I have already inserted few records in the table.
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The HTML Markup consists of following control:
GridView – For displaying data.
Columns
The GridView consists of two BoundField columns and a TemplateField column.
The TemplateField consists of an ASP.Net Image control which will be used for displaying QRCode.
The GridView has been assigned with an OnRowDataBound event handler.
<asp:GridView runat="server" ID="gvQRCode" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:BoundField HeaderText="Link Id" DataField="LinkId" />
<asp:BoundField HeaderText="Link" DataField="Link" />
<asp:TemplateField HeaderText="QRCode">
<ItemTemplate>
<asp:Image ID="imgQRCode" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using QRCoder;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Imaging
Imports QRCoder
Binding the GridView control in ASP.Net
Inside the Page Load event handler, the BindGrid method is called.
BindGrid
Inside this method, the connection string is read from Web.Config file.
The records are fetched from the
Customers Table of
SQL ServerServer database and copied to DataTable object using
Fill method of
SqlDataAdapter class.
Finally, DataTable is assigned to the DataSource property of GridView and the GridView is populated.
C#
protected void Page_Load(object sender,EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
protected void BindGrid()
{
string sql = "SELECT LinkId, Link FROM Links";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(sql, con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
gvQRCode.DataSource = dt;
gvQRCode.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)Handles Me.Load
If Not Me.IsPostBackThen
Me.BindGrid()
End If
End Sub
Protected Sub BindGrid()
Dim sql As String = "SELECT LinkId, Link FROM Links"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand(Sql, con)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Using dt As DataTable = New DataTable()
sda.Fill(dt)
gvQRCode.DataSource = dt
gvQRCode.DataBind()
End Using
End Using
End Using
End Using
End Sub
Displaying QR Code Images from database in GridView using C# and VB.Net
Inside the OnRowDataBound event handler, the Image control is referenced.
Then, the value of the Link is retrieved from the Cell and passed to the CreateQrCode method of the QRCoder library which returns a Bitmap image.
Finally, the Bitmap image is saved as PNG image in MemoryStream class, which is later converted to a BASE64 string and assigned to the ImageUrl property of the Image control.
C#
protected void OnRowDataBound(object sender,GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
System.Web.UI.WebControls.Image imgQrCode = (e.Row.FindControl("imgQRCode")as System.Web.UI.WebControls.Image);
imgQrCode.Height = 100;
imgQrCode.Width = 100;
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(e.Row.Cells[1].Text,QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
using (Bitmap bitMap = qrCode.GetGraphic(20))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms,ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgQrCode.ImageUrl = "data:image/png;base64," +Convert.ToBase64String(byteImage);
}
}
}
}
VB.Net
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRowThen
Dim imgQrCode As System.Web.UI.WebControls.Image = (TryCast(e.Row.FindControl("imgQRCode"), System.Web.UI.WebControls.Image))
imgQrCode.Height = 100
imgQrCode.Width = 100
Dim qrGenerator As QRCodeGenerator = New QRCodeGenerator()
Dim qrCodeData As QRCodeData = qrGenerator.CreateQrCode(e.Row.Cells(1).Text,QRCodeGenerator.ECCLevel.Q)
Dim qrCode As QRCode = New QRCode(qrCodeData)
Using bitMap As Bitmap = qrCode.GetGraphic(20)
Using ms As MemoryStream = New MemoryStream()
bitMap.Save(ms,ImageFormat.Png)
Dim byteImage As Byte() = ms.ToArray()
imgQrCode.ImageUrl = "data:image/png;base64," &Convert.ToBase64String(byteImage)
End Using
End Using
End If
End Sub
Screenshot
Downloads
