Getting Started with ASP.NET MVC Spreadsheet Control

20 Jul 20262 minutes to read

This section briefly explains how to include Syncfusion® ASP.NET MVC Spreadsheet control in your ASP.NET MVC application using Visual Studio.

Prerequisites

System requirements for Syncfusion® ASP.NET MVC controls

Create ASP.NET MVC Application with HTML Helper

Install Syncfusion® ASP.NET MVC package in the application

Open the NuGet package manager UI in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.MVC5 and then install it or run the following command to achieve the same.

Make sure that the Microsoft.AspNet.Mvc package and its dependency packages are updated to the latest version.

Install-Package Syncfusion.EJ2.MVC5 -Version 34.1.29

NOTE

Syncfusion® ASP.NET MVC controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments.

Add namespace

Add Syncfusion.EJ2 namespace reference to the <namespaces> section in the ~/Views/Web.config file.

<add namespace="Syncfusion.EJ2"/>

Register a Syncfusion License Key

Before initializing the Syncfusion ASP.NET MVC Spreadsheet control, generate a Syncfusion license key and register it in the application.

Add stylesheet and script resources

Add the stylesheet and script references at the end of the <head> section in the ~/Views/Shared/_Layout.cshtml file, as shown in the following example.

<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.29/fluent.css" />

<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js"></script>

To use a different theme, replace fluent.css with the theme of your choice (for example, tailwind3.css, bootstrap5.css, etc.) in the above code.

NOTE

To learn other ways to load themes or scripts (such as NPM packages or CRG), see the Themes topic and Adding Script Reference documentation.

Register Syncfusion® script manager

Register the script manager EJS().ScriptManager() at the end of the <body> section in the ~/Views/Shared/_Layout.cshtml file, as shown in the following example.

<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()

Add Syncfusion® ASP.NET MVC Spreadsheet control

Add the Syncfusion® ASP.NET MVC Spreadsheet control in ~/Views/Home/Index.cshtml page.

@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open").SaveUrl("https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save").Render()

Note: The openUrl and saveUrl endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the Open and Save section.

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Spreadsheet control will be rendered in the default web browser.

ASP.NET MVC Spreadsheet Control

NOTE

View Sample in GitHub.

See also