# Quick Start

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



The quick start guides you through the steps of adding different barcodes to your MVC web application and display them as the output. In the following example, we have added three barcodes, namely Codabar, Code39 and Gs1-128, and these barcodes can be displayed using the [Codabar](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Codabar.html), [Code39](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Code39.html) and [Gs1\_128](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Gs1_128.html) barcode classes respectively. Similarly, you can use any of the 26 barcodes supported by the Barcode control. For the complete list of supported barcodes, see [Barcode Encodings](/componentone/docs/mvc/online-mvc/workwithcontrols/barcode-overview/barcode-encodings).

![MVC Barcode displaying Codabar, Code39, and Gs1_128 barcodes](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/barcode-quick-start.png)

To accomplish this, follow these steps:

## Create an MVC Application

Create a new MVC application using the ComponentOne or VisualStudio templates. For more information about creating an MVC application, see [Configuring your MVC Application](/componentone/docs/mvc/online-mvc/CreatingaNewProject) topic.

## Add Barcodes

To add the Barcode control to your application, add **C1.Web.MVC** reference and follow these steps:

### **Add a new Controller**

1.  In the **Solution Explorer**, right click the folder **Controllers.**
2.  From the context menu, select **Add | Controller**. The **Add Scaffold** dialog appears.
3.  In the **Add Scaffold** dialog, follow these steps:
    1.  Select the **MVC 5 Controller - Empty** template.
    2.  Set name of the controller (for example: `BarcodeController`).
    3.  Click **Add**.
4.  Replace the method **Index()** with the following method.
    
    ```csharp
    public ActionResult Index()
    {
        return View();
    }
    ```
    

### **Add a View for the Controller**

1.  From the **Solution Explorer**, expand the folder **Controllers** and double click the `BarcodeController.`
2.  Place the cursor inside the method `Index()`.
3.  Right click and select **Add View**. The **Add View** dialog appears.
4.  In the **Add View** dialog, verify that the View name is **Index** and View engine is **Razor (CSHTML).**
5.  Click **Add** to add a view for the controller. Copy the following code and paste it inside **Index.cshtml**.
    
    ```razor
    @model object[]
    <table class="table">
        <thead>
            <tr>
                <th>BarCodes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div>
                        <div style="font-weight:bold">Codabar</div>
                        <div>@Html.C1().Codabar().Value("A15126893B").AutoWidthZoom(2)</div>
                    </div>
                    <br />
                    <div>
                        <div style="font-weight:bold">Code39</div>
                        <div>@Html.C1().Code39().Value("A1312BCV").AutoWidthZoom(2)</div>
                    </div>
                    <br />
                    <div>
                        <div style="font-weight:bold">Gs1_128</div>
                        <div>@Html.C1().Gs1_128().Value("GS1128Demo").AutoWidthZoom(2)</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    ```
    

## Build and Run the Project

1.  Click **Build | Build Solution** to build the project.
2.  Press **F5** to run the project. 
	> type=note
	> Append the folder name and view name to the generated URL (for example: http://localhost:1234/Barcode/Index) in the address bar of the browser to see the view.