Easily Use a JavaScript Control in a Blazor Server App
Tags: blazor, csharp, dotnet, webdev
Published: 2022-01-05 13:07:54

---
title: Easily Use a JavaScript Control in a Blazor Server App
published: true
date: 2022-01-05 11:00:28 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/easily-use-a-javascript-control-in-a-blazor-server-app.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thwa249x7avie6aiputv.png
---

[Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor "Link to Blazor") is an open-source web development framework. It is used to build interactive single-page web apps using C# instead of JavaScript. It supports components, lifecycle, routing, bindings, validations, templates, dependency injection, error handling, and more features to quickly create real-time apps. Although Blazor avoids using JavaScript when building an application, it still supports using JavaScript controls when needed. To demonstrate this, we are going to include the Syncfusion [JavaScript Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "Link to JavaScript Spreadsheet") control in a Blazor application.

## Prerequisites

To create and run a Blazor server-side web app, we need the following prerequisites:

- [Visual Studio 2022 / Visual Studio 2019](https://visualstudio.microsoft.com/vs/ "Link to Visual Studio")
- [.NET 6.0 SDK](https://dotnet.microsoft.com/download/dotnet/6.0 "Link to download .NET 6.0") / [.NET 5.0 SDK](https://dotnet.microsoft.com/download/dotnet/5.0 "Link to download .NET 5.0") / [.NET Core SDK 3.1.8](https://dotnet.microsoft.com/download/dotnet-core/3.1 "Link to download .NET Core 3.1")

**Note:**

.NET Core SDK 3.1.8 requires Visual Studio 2019 16.7 or later.

.NET 5.0 requires Visual Studio 2019 16.8 or later..

.NET 6.0 requires Visual Studio 2022 17.0 Preview 4.1 or later.

## Create a new Blazor server-side project in Visual Studio 2022

Follow these steps to easily create a Blazor server-side app in Visual Studio 2022:

1. First, open Visual Studio 2022. Then, choose the  **Create a new project**  option.  
Refer to the following image.  
 ![Create a new project in Visual Studio 2022](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Choose-Create-a-new-project-option.png)
2. Now, the **Create a new project** window will appear. Choose the  **Blazor Server App**  as the template, and then click  **Next**.  
 ![Create Blazor Server App using Visual Studio 2022](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Choose-the-Blazor-Server-App-from-the-template.png)
3. Now, the project configuration window will pop up. Provide a name to the project and click **Next**.  
 ![Configure Blazor Server App in Visual Studio 2022](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Configure-your-new-project-window.png)
4. The Additional information window will appear. Select your required target framework as  **.NET Core 3.1** ,  **.NET 5.0** , or **.NET 6.0**. The **Configure for HTTPS** checkbox will be enabled by default. Now, click the  **Create** button to create a new Blazor server app. Here, we are going to select **.NET 6** as the target framework.  
 ![Adding Additional information to Blazor Server App](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Additional-information-window.png)

We have created our Blazor server-side app. Let’s see how to add the JavaScript Spreadsheet control in it.

## Add style and script for the JavaScript Spreadsheet

To integrate the JavaScript Spreadsheet control within our Blazor app, we need to add the required client-side style and scripts through CDN references in the  **<head>**  element of the  **~/Pages/\_Layout.cshtml**  page.

Refer to the following code.

**[\_Layout.cshtml]**

```html
<head>
    <link href=" https://cdn.syncfusion.com/ej2/19.4.38/bootstrap5.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/19.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>
```

## Initialize the JavaScript Spreadsheet control

We can invoke a [JavaScript API from .NET and a .NET method from JavaScript](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-6.0 "Documentation link to Blazor JavaScript interoperability"). Here, we will invoke the JavaScript API from Blazor by injecting the  **IJSRuntime**  service into our **Index.razor** page.

Then, we will add the Spreadsheet target element and invoke the **RenderSpreadsheet** function in the **OnAfterRenderAsync** method in the **Index.razor** page.

Refer to the following code example.

**[Index.razor]**

```csharp
@inject IJSRuntime JSRuntime

<div id="spreadsheet" @ref="spreadsheetElem"></div>

@code{
    ElementReference spreadsheetElem;

    List<Order> orders = new List<Order>
    {
        new Order { OrderID = 10001, OrderDate = "12/16/2021", ShipAddress = "Kirchgasse 6", ShipCity ="Berlin", ShipCountry = "Denmark" },
        new Order { OrderID = 10002, OrderDate = "12/16/2021", ShipAddress = "Avda. Azteca 123", ShipCity ="Madrid", ShipCountry = "Brazil" },
        new Order { OrderID = 10003, OrderDate = "12/17/2021", ShipAddress = "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", ShipCity ="Cholchester", ShipCountry = "Germany" },
        new Order { OrderID = 10004, OrderDate = "12/18/2021", ShipAddress = "Magazinweg 7", ShipCity ="Marseille", ShipCountry = "Austria" },
        new Order { OrderID = 10005, OrderDate = "12/20/2021", ShipAddress = "1029 - 12th Ave. S.", ShipCity ="Tsawassen", ShipCountry = "Switzerland" }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("RenderSpreadsheet", spreadsheetElem, orders);
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string OrderDate { get; set; }
        public string ShipAddress { get; set; }
        public string ShipCity { get; set; }
        public string ShipCountry { get; set; }
    }
}
```

To initialize the Syncfusion JavaScript Spreadsheet control, specify the following code in the  **<script>**  element of the  **~/Pages/\_Layout.cshtml**  page.

**[\_Layout.cshtml]**

```html
<script>
        function RenderSpreadsheet(spreadsheetElem, data) {
            new ej.spreadsheet.Spreadsheet({
                sheets: [{
                    ranges: [{
                        dataSource: data,
                        showFieldAsHeader: false
                    }]
                }],
                openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
                saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',
            }, spreadsheetElem);
        }
</script>
```

### Output

After executing the above code, the JavaScript Spreadsheet control will be rendered in our Blazor server-side app.

![JavaScript Spreadsheet Control in Blazor Application](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/JavaScript-Spreadsheet-Control-in-Blazor-Application-1.png)
<figcaption>JavaScript Spreadsheet Control in Blazor Application</figcaption>

**Note:** For more details, refer to the [Getting started with JavaScript Spreadsheet control documentation](https://ej2.syncfusion.com/documentation/spreadsheet/getting-started/ "Documentation link to Getting started with JavaScript Spreadsheet control").

## Resource

For a detailed look at the code, refer to the complete example on GitHub: [Adding a JavaScript Spreadsheet control in a Blazor server app](https://github.com/SyncfusionExamples/Add-a-JavaScript-Spreadsheet-Component-in-Blazor-Server-App "Link to add a JavaScript Spreadsheet control in Blazor server app demo on GitHub").

## Conclusion

Thanks for reading! I hope you now have a better understanding of how to add a JavaScript control in your Blazor server app. Try out the steps provided in this blog post and leave your feedback in the comments section below!

The Syncfusion [Blazor suite](https://www.syncfusion.com/blazor-components "Link to Syncfusion Blazor UI components") offers over 70 components that work with both Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. Use them to build astonishing applications!

For existing customers, the newest version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out the available features.

Also, you can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Link to the Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/javascript "Link to Syncfusion Feedback Portal"). As always, we are happy to assist you!

## Related blogs

- [What’s New in 2021 Volume 4: Blazor](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-4-blazor.aspx "Link to What’s New in 2021 Volume 4: Blazor blog")
- [4 Easy Steps to Embed a JavaScript Control into a Blazor App](https://www.syncfusion.com/blogs/post/4-easy-steps-to-embed-a-javascript-control-into-a-blazor-app.aspx "Link to 4 Easy Steps to Embed a JavaScript Control into a Blazor App blog")
- [Simple Steps to Validate Data in a JavaScript Spreadsheet](https://www.syncfusion.com/blogs/post/simple-steps-to-validate-data-in-a-javascript-spreadsheet.aspx "Link to Simple Steps to Validate Data in a JavaScript Spreadsheet blog")
- [Create an Org Chart to Elegantly Visualize Hierarchical Data in Blazor WebAssembly](https://www.syncfusion.com/blogs/post/create-an-org-chart-to-elegantly-visualize-hierarchical-data-in-blazor-webassembly.aspx "Link to Create an Org Chart to Elegantly Visualize Hierarchical Data in Blazor WebAssembly blog")