# 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 the TabPanel control to your MVC web application and adding data to it.

To accomplish this, follow these steps:

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/tabpanelqs.gif)

### 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 TabPanel control and add data

Steps to add a TabPanel control to the application, are as follows:

**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: `TabPanelController`).
    3.  Click **Add**.
4.  Replace the **Index()** method 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 `TabPanelController.`
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, and then copy the following code and paste it inside **Index.cshtml**.<br /><br />The markup used to initialize the TabPanel control is a nested collection of **div** tags. The first div tag in the markup represents the TabPanel control. In this parent div tag, there exist few more div tags where each set of div tag represents a tab. Inside every **div** tag at this level, there is an **a** tag that renders the tab header and a div tag that renders the content pane.
    
    ```razor
    <div id="tabPanel" style="width:500px">
        <div>
            <a>Product</a>
            <div>
                <p style="font-size:large"><b>FlexChart for MVC</b></p>
                <!--Add a custom image-->
                <img src="~/flexchart.png" />
            </div>
        </div>
        <div>
            <a>Overview</a>
            <div>
                <p><b>FlexChart</b>—a powerful data visualization control for Web—lets you add feature-rich and visually appealing charts to your MVC applications.
                The control empowers end-users to visualize data that resonates with their audiences. The FlexChart control provides you with numerous 2D chart types, 
                built-in tools for chart interactivity, and diversified formats for chart rendering.Whether it is storytelling with data or interpreting complex data,
                FlexChart helps you accomplish everything seamlessly.</p>
            </div>
        </div>
        <div>
            <a>Resources</a>
            <div>
                <ul>
                    <li><a href="http://developer.mescius.com/componentone/NetHelp/FlexChartWin/webframe.html">Documentation</a></li>
                    <li><a href="https://developer.mescius.com/en/demos">Demo</a></li>
                    <li><a href="https://developer.mescius.com/en/forums">Forums</a></li>
                </ul>
            </div>
        </div>
    </div>
    @(Html.C1().TabPanel("#tabPanel"))
    ```

### 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/**TabPanel/Index**) in the address bar of the browser to see the view.