# 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 a **ListBox** control to your application. For information on how to add ASP.NET MVC Edition controls, see [Adding Controls](/componentone/docs/mvc/online-mvc/addingcontrols). Follow the given steps to get started. The example uses model **Cities.cs** added in the ComboBox [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/Input/ComboBox/ComboBoxQuickStart).

![ListBox showing a list of various cities](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/listbox-quick-start.png)

### 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 a new Controller and View

**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.  Complete the following steps in the **Add Scaffold** dialog:
    1.  Select **MVC 5 Controller - Empty** template.
    2.  Set name of the controller (for example: `ListBoxController`).
    3.  Click **Add**.A new controller is added to the application.

**Add a View for the controller**:

1.  Place the cursor inside the method `Index()`.
2.  Right click and select **Add View**. The **Add View** dialog appears.
3.  In the **Add View** dialog, verify that the View name is **Index** and View engine is **Razor (CSHTML).**
4.  Click **Add**. A view is added for the controller.

### Add the ListBox Control

1.  From the **Solution Explorer**, expand the folder **Views**.
2.  Double click `Index.cshtml` to open it.
3.  Replace the default code of the `Index.cshtml` file with the code given below to initialize a **ListBox** control.
    
    ```razor
    @{
        List<string> cities = Cities.GetCities();
    }
        <div>
            <label>Select your city:</label>
        </div>
        <div>
            @(Html.C1().ListBox()
            .Id("list")
            .Bind(cities)
            .Width(180).Height(200)
            .CaseSensitiveSearch(true)
            )
        </div>
    ```
    

### 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/ListBox/Index) in the address bar of the browser to see the view. Or link the view to the home page.