Syncfusion AI Assistant

How can I help you?

Getting Started with ASP.NET MVC Spreadsheet Control

18 May 20263 minutes to read

This section briefly explains about 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. Alternatively, you can utilize the following package manager command to achieve the same.

NOTE

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

Install-Package Syncfusion.EJ2.MVC5 -Version 33.2.3

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 in ~/Views/Web.config file, as shown in the following example.

...
<namespaces>
    ...
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add stylesheet and script resources

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

<head>
    ...
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/33.2.3/fluent.css" />
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js"></script>
</head>

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> element in the ~/Views/Shared/_Layout.cshtml file, as shown in the following example.

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

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