# Adding a Component to a Web Site using Visual Studio 2015 or 2017

This topic describes the steps required to add a Spread component to a Web Form in Visual Studio 2015. Learn more in documentation.

## Content

Use the following steps to add a Spread component to a Web Form in Visual Studio. You can either open an existing Web Site or create a new one.

> !type=note
> **Note:**
> Spread, as a child control of the page, is affected by the style settings on that page (similar to placing a table on a web form, and setting a master CSS for everything inside the page). If you create a default web application with Visual Studio 2015 or higher, the default master page contains CSS style settings. Spread, once placed on this default page, can be affected by the style settings and the layout may change. Avoid the following HTML tags to prevent the layout change: TD, TH, TABLE, INPUT, and TEXTAREA.

Step 1. Start Visual Studio.
Step 2. Create a new Web site.

1. Select **New Project** or from the **File** menu, choose **New**, **Web Site**.
2. Under **Templates**, select **Web** under **Visual Basic** or **Visual C#.**
    ![New Project dialog: Selecting Web](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/spreadwebvs2015.png)
3. Select **ASP.NET Web Application**.
4. Specify a location and name for the project.
5. Select **OK**.
6. Select a template such as **Empty**.
    ![New ASP.NET Project dialog](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/spwebtemplate.png)
7. Select **OK**.
    If your project does not display the **Solution Explorer**, from the **View** menu, choose **Solution Explorer**. If you used an empty site, you may wish to add a web form to the project (choose **Add**, **Web Form** after right-clicking on the project name in the **Solution Explorer**).
    Specify the **Item name**. Select **OK**.
    ![Item](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/spwebform.png)

Step 3. Add the FpSpread component to the toolbox if the component is not displayed in the toolbox.

1. If the **Toolbox** is not displayed, from the **View** menu choose **Toolbox**.
2. Once the **Toolbox** is displayed, look in the **Spread** category (or in other categories if you have installed Spread and placed the toolbox icon in a different category).
3. If the FpSpread component is not in the **Toolbox**, right-click in the **Toolbox**, and from the pop-up menu choose **Choose Items**.
4. In the **Choose Toolbox Items** dialog, click the **.NET Framework Components** tab.
5. In the **.NET Framework Components** tab, the FpSpread component should be displayed in the list of components. Select the FpSpread component check box and click **OK**.
    If the FpSpread component is not displayed in the list of components, click **Browse** and browse to the installation path for the Spread component. Once there, select FarPoint.Web.Spread.dll and click **Open**. The FpSpread component is now displayed in the list of components. Select it and click **OK**. Select FarPoint.Web.Chart.dll if you wish to add FpChart at design time.
6. You can test that the component has been added by opening a project and inserting the component.

Step 4. Add the FpSpread component to the Web site.

1. With an open project, in the **Toolbox** under **Web Forms**, select the FpSpread component. Select FpChart if you wish to add the chart at design time.
2. On your Web Forms page, draw an FpSpread component by dragging a rectangle the size that you would like the initial component or simply double-click on the page.
3. The FpSpread component appears (as shown in this Visual Studio project).

![FpSpread component](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/spwebselect.png)