ASP.NET MVC QR Code generator Control

19 Dec 20224 minutes to read

QR Code

A QR Code is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and also commonly used in consumer advertising.

@(Html.EJS().QRCodeGenerator("container").
Width("200px").
Height("150px").
Value("SYNCFUSION").
Render() )
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.BarcodeGenerator;

namespace EJ2CoreSampleBrowser.Controllers.Barcode
{
    public partial class BarcodeController : Controller
    {
        
        public ActionResult qrcode()
        {
           
             return View();
        }
    }
}

Customizing the QR Code color

A page or printed media with QR Code often appears colorful in the background and surrounding region with other contents. In such cases, the QR Code can also be customized to suit the needs. You can achieve this by using for forecolor property.

@(Html.EJS().QRCodeGenerator("container").
Width("200px").
foreColor("red").
Height("150px").
Value("SYNCFUSION").Render() )
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.BarcodeGenerator;

namespace EJ2CoreSampleBrowser.Controllers.Barcode
{
    public partial class BarcodeController : Controller
    {
        
        public ActionResult datamatrix()
        {
           
             return View();
        }
    }
}

Customizing the QR Code dimension

The dimension of the QR Code can be changed using the height and width properties of the QR Code Generator.

@(Html.EJS().QRCodeGenerator("container").
Width("300px").
foreColor("red").
Height("300px").
Value("SYNCFUSION").Render() )
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.BarcodeGenerator;

namespace EJ2CoreSampleBrowser.Controllers.Barcode
{
    public partial class BarcodeController : Controller
    {
        
        public ActionResult datamatrix()
        {
           
             return View();
        }
    }
}

Customizing the text

In QR Code generators, you can customize the QR Code text by using display text property.

@(Html.EJS().QRCodeGenerator("container").
Width("200px").
foreColor("red").
Height("150px").
DisplayText(s => s.text("text")).
Value("SYNCFUSION").Render() )
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.BarcodeGenerator;

namespace EJ2CoreSampleBrowser.Controllers.Barcode
{
    public partial class BarcodeController : Controller
    {
        
        public ActionResult datamatrix()
        {
           
             return View();
        }
    }
}

NOTE

View Sample in GitHub.