New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Getting Started with the QRCode

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC QRCode and highlights the major steps in the configuration of the component.

You will initialize a QRCode component that will display a Card with a vacation offer when the QR code is scanned. Next, you will dynamically update the QRCode value through a single button click.

Sample Telerik UI for ASP.NET MVC QRCode


To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

  • To use the Telerik UI for ASP.NET MVC HtmlHelpers:

    @using Kendo.Mvc.UI

Optionally, you can structure the View content by adding the desired HTML elements like headings, divs, paragraphs, and others.

    @using Kendo.Mvc.UI
    <div id="qr-wrap" style="text-align: center;">
        <h4>Scan the QR code to review a vacation offer.</h4>

2. Initialize the QRCode

Use the QRCode HtmlHelper to add the component to a page:

  • The Name() configuration method is mandatory as its value is used for the id and the name attributes of the QRCode element.
  • The Value() options specifies the QRCode value.
  • Customize the component appearance by using the Size(), Color(), and Border() methods.
    @using Kendo.Mvc.UI

        .Border(border => border.Color("#000000").Width(5))

3. Configure the Card

The next step is to define the Card component with the vacation information that will be displayed when you scan the QR code.

    <div class="card-container">
        <div class="k-card k-card-vertical">
            <img class="k-card-image" alt="Telerik UI for ASP.NET Core Cards Africa" src=""/>
            <div class="k-card-body">
                <h5 class="k-card-title">African Safari</h5>
                <p>Africa provides some of the most epic wildlife diversity on the planet. Not many vacations involve sleeping in close quarters with lions, leopards, elephants, buffaloes, rhinos, giraffes and hippos.</p>
            <div class="k-card-actions k-card-actions-vertical k-card-actions-stretched">
                <span class="k-button k-button-flat-primary k-button-flat k-button-md k-rounded-md">Book now</span>
                <span class="k-button k-button-flat-primary k-button-flat k-button-md k-rounded-md">Check rates</span>

Add the Card declaration in a Telerik REPL sample and insert its URL in the QRCode Value() method.

    @using Kendo.Mvc.UI

        ... // Other configuration.

4. (Optional) Reference Existing QRCode Instances

You can reference the QRCode instances that you have created and build on top of their existing configuration:

  1. Use the id attribute of the component instance to get its reference.

            $(document).ready(function() {
                var qrCodeReference = $("#vacationQrCode").data("kendoQRCode"); // qrCodeReference is a reference to the existing QRCode instance of the helper.
  2. Use the QRCode client-side API to control the behavior of the component. In this example, you will use the value() method to dynamically change the value of the QRCode (for example, when a button is clicked).

            .Content("Update QRCode")
            .Events(ev => ev.Click("onBtnClick"))
            function onBtnClick() {
                var qrCodeReference = $("#vacationQrCode").data("kendoQRCode");

For more information on referencing specific helper instances, see the Methods and Events article.

Next Steps

See Also

In this article