# Using Razor Syntax

## Content



Learn how to add an ASP.NET MVC control in your application using Razor syntax. Also, observe how to add a model, view and controller in an MVC application. When you use MVC Controls in your web application, it reduces the code complexity, increases flexibility, and helps in reusing the code.


> type=note
> **Note**: Make sure that the required references are included in the project. For more information about references, see [Installation](/componentone/docs/mvc/online-mvc-core/GettingStarted/Installation).

Follow the steps below to get started:

![ComboBoxEventHandling](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/combobox.gif)

### Add a Model

Models are required to fetch data for the controls. A model is to be added only where it is required. This example uses `Cities.cs` model, and steps have been given to explain how to add model in your MVC application.

1.  In the **Solution Explorer**, right click the folder **Models** and select **Add | New Item**. The **Add New Item** dialog appears.
2.  In the **Add New Item** dialog, expand the **Installed** tab towards left and select **Code | Class**.
3.  Set the name of the class (for example: `Cities.cs`), and then click **Add**.
4.  Add the following code to Cities.cs model. We are using Cities class to represent a list of countries.
    
    ```csharp
    public class Cities
        {
            public static List<string> GetCities()
            {
                return new List<string> 
                {
                    "Abidjan", "Accra", "Ahmedabad", "Alexandria", "Ankara", "Atlanta", "Baghdad", "Bandung", "Bangkok", "Barcelona", "Beijing", "Belo Horizonte",
            "Bengaluru", "Bogota", "Boston", "Buenos Aires", "Cairo", "Calcutta", "Chengdu", "Chennai", "Chicago", "Chongqung", "Dalian", "Dallas", "Delhi",
            "Detroit", "Dhaka", "Dongguan", "Essen", "Fuzhou", "Guadalajara", "Guangzhou", "Hangzhou", "Harbin", "Ho Chi Minh City", "Hong Kong", "Houston",
            "Hyderabad", "Istanbul", "Jakarta", "Johannesburg", "Karachi", "Khartoum", "Kinshasa", "Kuala Lumpur", "Lagos", "Lahore", "Lima", "London",
            "Los Angeles", "Luanda", "Madrid", "Manila", "Medellin", "Mexico City", "Miami", "Milan", "Monterrey", "Moscow", "Mumbai", "Nagoya", "Nanjing",
            "Naples", "New York", "Osaka", "Paris", "Pheonix", "Philadelphia", "Porto Alegre", "Pune", "Qingdao", "Quanzhou", "Recife", "Rio de Janeiro",
            "Riyadh", "Rome", "Saint Petersburg", "Salvador", "San Francisco", "Santiago", "Sao Paulo", "Seoul", "Shanghair", "Shenyang", "Shenzhen",
            "Singapore", "Surabaya", "Surat", "Suzhou", "Sydney", "Taipei", "Tehran", "Tianjin", "Toronto", "Washington", "Wuhan", "Xi'an-Xianyang", "Yangoon",
            "Zhengzhou", "Tokyo"
                };
            }
        }
    ```
    
    A new class is added to the application.
    

### Add a Controller

Controllers are simple class files. They are responsible for handling incoming requests to the application, retrieve data, and then specify view templates that return a response to the client.

1.  In the **Solution Explorer**, right click the folder **Controllers.**
2.  From the context menu, select **Add | New Item**. The **Add New Item** dialog appears.
3.  Complete the following steps in the **Add New Item** dialog:
    1.  In the **Installed** tab, select **ASP.NET Core | Controller Class**.
    2.  Set name of the controller (For example: `ComboBoxController`).
    3.  Click **Add**.
4.  Add the following code to replace the Index() method.
    
    ```csharp
    using <ApplicationName>.Models
    public ActionResult Index()
    {
        ViewBag.Cities = Cities.GetCities();
        return View();
    }
    ```
    
    A new controller is added to the application within the folder **Controllers**.
    

### Add the Control

View helps the user to view a visual representation of the model. View is most commonly associated with model and retrieves the data required with the help of controllers. We will add a code in the `Index.cshtml` to view **ComboBox** control in the browser.

1.  From the **Solution Explorer**, right click the folder **Views** and select **Add | New Folder**.
2.  Name the new folder. Provide the same name as the name of your controller, minus the suffix Controller (in our example: ComboBox).
3.  Right click the folder ComboBox, and select **Add | New Item**. The **Add New Item** dialog appears.
4.  Complete the following steps in the **Add New Item** dialog:
    1.  In the **Installed** tab towards left, and select **ASP.NET Core | Razor View**.
    2.  Set name of the view (for example: Index.cshtml).
    3.  Click **Add**.

**For View**

In the `Index.cshtml` file, replace the default code with the code given below to initialize **ComboBox** control.

```razor
@{List<string> cities = ViewBag.Cities;}
<div>
<c1-combo-box selected-index = "0">
<c1-items-source source-collection = "@cities"></c1-items-source>
</c1-combo-box>
</div>
```

### Apply custom CSS

The appearance of the controls is defined using CSS classes. These classes can be customized further using custom CSS rules to change the appearance of controls. The following example illustrates how you can apply custom CSS to the ComboBox control to customize its appearance. For more information on using custom css, see [Styling and CSS](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/InputCommonFeatures/inputStyling).

```csharp
<style>
    .wj-combobox {
        color: brown;
    }
    .wj-listbox-item {
        font-size: 11pt;
        font-weight: bold;
        font-family:Calibri;
        background-color:burlywood;
    }
</style>
```

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