# Quick Start

Develop powerful and lightweight web applications using ASP.NET MVC FlexPie control. Learn more about creating a simple application with FlexPie in MVC documentation.

## Content

The quick start guides you through the steps of adding a FlexPie control to your MVC web application and add data to it.

![FlexPie chart](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/piequickstart.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.

### Create a Data Source for FlexPie

1. Add a new class to the folder **Models** (for example: `FlexPieDataSource.cs`). See [Adding controls](/componentone/docs/mvc/online-mvc/addingcontrols#step2) to know how to add a new model.
2. Add the following code to the new model to define the classes that serve as a datasource for the FlexPie control. **csharp**

    ```csharp
    public class FlexPieDataSource
     {
       public string Country { get; set; }
       public int Sales { get; set; }
     public static IEnumerable<FlexPieDataSource> GetData()
      {
        var countries = new[] { "US", "UK",   "China", "France", "German", "Italy" };
        var rand = new Random(0);
        List<FlexPieDataSource> list = new List<FlexPieDataSource>();
         for (int i = 0; i < 6; i++)
          {
            var sales = rand.Next(1, 5);
            list.Add(new FlexPieDataSource {  Sales = sales, Country = countries[i] });
                }
                return list;
            }
        }
    ```

    **VB**

    ```vbnet
    Public Class FlexPieDataSource
        Public Property Country() As String
            Get
                Return m_Country
            End Get
            Set
                m_Country = Value
            End Set
        End Property
        Private m_Country As String
        Public Property Sales() As Integer
            Get
                Return m_Sales
            End Get
            Set
                m_Sales = Value
            End Set
        End Property
        Private m_Sales As Integer
        Public Shared Function GetData() As IEnumerable(Of FlexPieDataSource)
            Dim countries = New String() {"US", "UK", "China", "France", "German", "Italy"}
            Dim rand = New Random(0)
            Dim list As New List(Of FlexPieDataSource)()
            For i As Integer = 0 To 5
                Dim sales = rand.[Next](1, 5)
                list.Add(New FlexPieDataSource() With {
                    Key.Sales = sales,
                    Key.Country = countries(i)
                })
            Next
            Return list
        End Function
    End Class
    ```

### Add a FlexPie control

Complete the following steps to initialize a FlexPie control.

**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: `Default1Controller`).
    3. Click **Add**.
4. Include the MVC references as shown below.

    ```csharp
    using C1.Web.Mvc;
    using C1.Web.Mvc.Serializition;
    using C1.Web.Mvc.Chart;
    ```
5. Replace the method `Index()` with the following method. **csharp**

    ```csharp
    public ActionResult QuickStart()
    {
        return View(FlexPieDataSource.GetData());
    }
    ```

    **VB**

    ```vbnet
    Public Function QuickStart() As ActionResult
    Return View(FlexPieDataSource.GetData())
    End Function
    ```

**Add a View for the Controller**

1. From the **Solution Explorer**, expand the folder **Controllers** and double click the controller `QuickStartController` to open it.
2. Place the cursor inside the method `QuickStart()`.
3. Right click and select **Add View**. The **Add View** dialog appears.
4. In the **Add View** dialog, verify that the view name is **QuickStart** and View engine is **Razor (CSHTML).**
5. Click **Add**. A view is added for the controller.
6. Instantiate a FlexPie control in the view QuickStart as shown below.

    ```razor
    @using MvcApplication1.Models
    @model IEnumerable<FlexPieDataSource>
    @(Html.C1().FlexPie<FlexPieDataSource>()
    .Bind("Country", "Sales", Model)
    )
    ```

    ```INDEX.vbnethtml
    @ModelType IEnumerable(Of FlexPieDataSource)
    @(Html.C1().FlexPie(Of FlexPieDataSource) _
    .Bind("Country", "Sales", Model) _
    .Height("300px"))
    ```

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