Version

Adding igQRCodeBarcode to an ASP.NET MVC Application

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igQRCodeBarcode™ to an ASP.NET MVC application using the Ignite UI for MVC.

Required background

The following table lists the concepts and topics required as a prerequisite to understanding this topic.

  • jQuery
  • jQuery UI
  • ASP.NET MVC
  • ASP.NET MVC HTML Helpers

Topics

  • Adding Controls to an MVC Project: This topic explains how to get started with Ignite UI for jQuery™ components in an ASP.NET MVC application.

  • igQRCodeBarcode Overview: This topic provides conceptual information about the igQRCodeBarcode control including its main features and minimum requirements.

In this topic

This topic contains the following sections:

Adding igQRCodeBarcode to an ASP.NET MVC Application – Conceptual Overview

Adding igQRCodeBarcode summary

The igQRCodeBarcode control can be added to an ASP.NET MVC view using the Ignite UI for MVC. In order to successfully display the barcode, data should be fed to the helper as well as the dimensions of the control should be specified. When instantiating the igQRCodeBarcode control, there are several helper methods that should be set for basic rendering including the following:

Ignite UI for MVC Method Purpose
Data() Sets the string data to be encoded by the igQRCodeBarcode
Height() Sets the string height of the igQRCodeBarcode
Width() Sets the string width of the igQRCodeBarcode

Requirements

To complete the procedure, you need the following:

  • An ASP.NET MVC application
  • A reference to the Infragistics.Web.Mvc.dll assembly added to the application project. For details, refer to the Adding Controls to an MVC Project topic.

  • The dependencies of the View:

    • The Infragistics.Web.Mvc namespace added to the ASP.NET MVC View

    In ASPX:

    <%@ Import Namespace="Infragistics.Web.Mvc" %>

    In Razor:

    @using Infragistics.Web.Mvc
    • References to the combined files for all data visualization controls added to the <head> tag of the ASP.NET MVC View

    In ASPX:

    <script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>

    In Razor:

    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/infragistics.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/js/infragistics.dv.js")" type="text/javascript"></script>

    Alternatively, you can use the Infragistics Loader (the igLoader component) or explicitly include all igQRCodeBarcode-related files as explained in the Adding igQRCodeBarcode to an HTML Page topic.

Steps

  1. Adding the Ignite UI for MVC control

  2. Instantiating the igQRCodeBarcode control

Adding igQRCodeBarcode to an ASP.NET MVC Application – Procedure

Introduction

This procedure adds an instance of igQRCodeBarcode to an ASP.NET MVC application using the Ignite UI for MVC and configures its basic options - data, width and height. The string data to encode is http://www.infragistics.com. The procedure presumes that a reference to the Infragistics.Web.Mvc.dll assembly has been added to project and the control is rendered to the View with the helper’s Render() method.

Preview

The following screenshot is a preview of the result.

Prerequisites

An ASP.NET MVC application configured with the required JavaScript files, CSS files and ASP.NET MVC assembly as defined in the Prerequisites of the Adding igQRCodeBarcode to an ASP.NET MVC Application procedure.

Steps

The following steps demonstrate how to instantiate igQRCodeBarcode in an ASP.NET MVC application using the Ignite UI for MVC.

  1. Add using the HTML Helper.

    Add the HTML helper to the body of your ASP.NET page.

    In ASPX:

     <%=(Html.Infragistics().QRCodeBarcode()
 .Render())%>

    In Razor:

     @(Html.Infragistics().QRCodeBarcode()
 .Render())

  2. Instantiate the igQRCodeBarcode control.

    Instantiate the igQRCodeBarcode control. As with all Ignite UI for MVC controls, you must call the Render method to render the HTML and JavaScript to the View.

    In ASPX:

     <%=(Html.Infragistics().QRCodeBarcode()
     .Height("200px")
     .Width("200px")
     .Data(“http://www.infragistics.com”).Render())
 %>

    In Razor:

     @(Html.Infragistics().QRCodeBarcode()
     .Height("200px")
     .Width("200px")
     .Data(“http://www.infragistics.com”).Render())

Full code

Following is the full code for this procedure.

In ASPX:

<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
    <head>
        <title>QR Barcode</title>
        <script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
        <script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
        <script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
        <script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>
    </head>
    <body>
        <%=(Html.Infragistics().QRCodeBarcode()
        .Height("200px")
        .Width("200px")
        .Data(“http://www.infragistics.com”).Render())%>
    </body>
</html>

In Razor:

@using Infragistics.Web.Mvc
<head>
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/js/infragistics.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/js/infragistics.dv.js")" type="text/javascript"></script>
</head>
<body>
    @(Html.Infragistics().QRCodeBarcode()
    .Height("200px")
    .Width("200px")
    .Data(“http://www.infragistics.com”).Render())
</body>

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following sample provides additional information related to this topic.

  • MVC Initialization: This sample demonstrates using the Ignite UI for MVC for adding the igQRCodeBarcode control to an HTML page.

View on GitHub