ComponentOne QRCode for ASP.NET Web Forms
User Scenarios / Store Form Data in QRCode
In This Topic
    Store Form Data in QRCode
    In This Topic

    One of the many uses of a QRCode can be used to store data entered by a user in any form. By doing so, the information can be retrieved by simply scanning the QRCode. This topic demonstrate how to create an application to store information added to a form, in a QRCode.

    In Visual Studio, create a new ASP.Net Web Application and add a new Web Form. Then, complete the following steps:

    In the Designer

    1. Place three labels, two text boxes, a combobox and a button onto the Web Form and set their properties, as shown below:

      Control Name Property Value
      Label1 Text Name:
      Label2 Text Phone:
      Label3 Text Gender:
      ComboboxItem1 Text, Value Male
      ComboboxItem1 Text, Value Female
      Button1 ID, Text Submit

      The form will appear as shown in the image below:

    2. Locate the C1QRCode control in the toolbox and place it onto the Web Form.
      If you cannot locate the control in the toolbox, right click and select Choose items. The Choose Toolbox Items dialog appears. Locate the control and click OK.
    3. Open the Properties window and set the DisplayVisible property to false, so that the control is not visible until the submit button is clicked.

    In Source View

    Following will be your code for the form, in the Source View, after you have added all controls and set all the properties:

    Source View
    Copy Code
            <p>
                <asp:Label ID="Label1" runat="server" Text="Name:"></asp:Label>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </p>       
            <p>
                <asp:Label ID="Label2" runat="server" Text="Phone:"></asp:Label>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </p>
            <p>
                <asp:Label ID="Label3" runat="server" Text="Gender:"></asp:Label>      
                <cc1:C1ComboBox ID="C1ComboBox1" runat="server" Width="160px">
                    <Items>
                        <cc1:C1ComboBoxItem ID="C1ComboBoxItem1" runat="server" Text="Male" Value="Male" />
                        <cc1:C1ComboBoxItem ID="C1ComboBoxItem2" runat="server" Text="Female" Value="Female" />
                    </Items>
                </cc1:C1ComboBox>
            </p>
            <p>
                <asp:Button ID="Submit" runat="server" Text="Submit" /><br/>
                <cc1:C1QRCode ID="C1QRCode1" runat="server" DisplayVisible="false" />
            </p>
    

    In Code

    Add the following code to the Submit button's click event, to generate the QRCode when the user fills in the information and clicks the Submit button.

    C#
    Copy Code
    protected void Submit_Click(object sender, EventArgs e)
    {
        C1QRCode1.Text = Label1.Text + " " + TextBox1.Text + '\n' + Label2.Text + 
        "  " + TextBox2.Text + '\n' + Label3.Text + "  " + C1ComboBox1.SelectedValue;
        C1QRCode1.DisplayVisible = true;
    }
    
    VB
    Copy Code
    Protected Sub Submit_Click(sender As Object, e As EventArgs) Handles Submit.Click
        C1QRCode1.Text = Label1.Text + " " + TextBox1.Text + ControlChars.Lf + Label2.Text +
        "  " + TextBox2.Text + ControlChars.Lf + Label3.Text + "  " + C1ComboBox1.SelectedValue
        C1QRCode1.DisplayVisible = True
    End Sub
    

    What You've Accomplished

    When you run the project, fill in the details into the form and click the Submit button. A QRCode containing the details is generated, as shown below:

    When you scan the above QRCode, the reader will decode the following data:

    Name: Smith Anderson

    Phone: 1.800.858.2739

    Gender: Male