syncfusion-aspnetmvc-spreadsheet-editor

Original🇺🇸 English
Translated

Use this skill for ASP.NET MVC apps needing Excel-like UI using the Syncfusion Spreadsheet Component. Trigger for creating, viewing, editing Excel (.xlsx, .xls, .xlsb) and CSV files; embedding spreadsheet editors; data binding from APIs/JSON; using formulas, charts, validation, filtering, or conditional formatting. Also trigger when users reference spreadsheet files ("open xlsx", "load Excel file", "add Syncfusion spreadsheet", "bind data to spreadsheet"). Do NOT trigger for standalone file processing without UI components.

2installs

NPX Install

npx skill4agent add syncfusion/spreadsheet-editor-sdk-skills syncfusion-aspnetmvc-spreadsheet-editor

Tags

Translated version includes tags in frontmatter

Syncfusion ASP.NET MVC Spreadsheet Editor

Overview

This skill helps developers generate ASP.NET MVC (cshtml) code for integrating the Syncfusion Spreadsheet Editor into their applications. It provides ready-to-use code snippets, API guidance, and best practices for building Excel-like functionality in ASP.NET MVC projects.

Key Capabilities

  • File Operations: Import/export Excel files (
    xlsx
    ,
    xls
    ,
    xlsb
    ), CSV files, and PDF export
  • Data Management: Data binding, editing, sorting, filtering, and validation
  • Cell Operations: Formatting (fonts, colors, borders, alignment), merge cells, wrap text
  • Formulas & Calculations: Built-in Excel formulas, custom functions, named ranges
  • Collaboration: Notes, comments, and threaded discussions
  • Advanced Features: Charts, images, hyperlinks, conditional formatting, freeze panes, sheet protection, virtualization for large datasets

Quick Start Examples

Example 1: Generate Spreadsheet with Formatting

User: "Create a Spreadsheet with data and apply cell styles"
Result: A ASP.NET MVC (cshtml) code snippet is generated that loads provide data into the Spreadsheet and applies basic cell formatting.

Example 2: Generate Code for Loading a File

User: "Create a Spreadsheet and load an Excel file initially"
Result: A ASP.NET MVC (cshtml) code snippet is generated that initializes the Spreadsheet and programmatically opens an Excel file on startup.

Getting Started — Minimal ASP.NET MVC Code

Minimal ASP.NET MVC Spreadsheet setup for a plain ASP.NET MVC project:
Controller (
HomeController.cs
):
csharp
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Syncfusion.EJ2.Spreadsheet;

namespace YourApp.Controllers
{
    public class SpreadsheetController : Controller
    {
        public ActionResult Index()
        {
            List<object> data = new List<object>()
            {
                new { Name = "Sample", Value = "Data" }
            };
            ViewData["DefaultData"] = data;
            return View();
        }

        public ActionResult Open(OpenRequest openRequest)
        {
            return Content(Workbook.Open(openRequest));
        }
 
        public void Save(SaveSettings saveSettings)
        {
            if (saveSettings != null && saveSettings.JSONData != null)
            {
                Workbook.Save(saveSettings);
            }
        }
    }
}
View (
Index.cshtml
):
cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Spreadsheet

<div class="control-section">
    @Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").SaveUrl("Save").Sheets(sheet =>
    {
        sheet.Name("Sheet1").Ranges(ranges =>
        {
            ranges.DataSource((IEnumerable<object>)ViewData["DefaultData"]).Add();
        }).Add();
    }).Render()
</div>

Generate ASP.NET MVC(cshtml) Code for the User's Project

Trigger keywords: "aspnet-mvc spreadsheet", "spreadsheet editor", "syncfusion spreadsheet", "excel component", "load excel file", "open excel file", "import excel", "export excel file", "save excel", "export to pdf", "export to csv", "view excel", "configure spreadsheet", "create spreadsheet", "add spreadsheet", "spreadsheet data", "cell formatting", "apply formulas", "insert chart", "data binding", "spreadsheet validation", "freeze panes", "protect sheet"
Workflow:
  1. Identify the requested Spreadsheet feature (data binding, formulas, charts, export, etc.).
  2. Read the relevant
    references/*.md
    file(s) to understand the APIs and code patterns for the requested feature.
  3. STOP before generating code. Check if the user has already chosen a delivery mode.
  4. If no delivery mode is chosen yet, you MUST ask the user first using this concise multiple-choice question:
    "How would you like to receive the generated Spreadsheet code?"
    • Option 1: Replace the code in a specific project file (you'll need to provide the file path and confirm)
    • Option 2: Save the code in this skill's output folder at
      {skill-root}/syncfusion-aspnetmvc-spreadsheet-editor/output/Index.cshtml
      (view) and
      {skill-root}/syncfusion-aspnetmvc-spreadsheet-editor/output/SpreadsheetController.cs
      (controller)
    • Option 3: Share the code directly in the chat window
  5. Only after the user selects a delivery mode, proceed to generate ASP.NET MVC(cshtml) code using the APIs and snippets from
    references/*.md
    , substituting concrete placeholders from the user's project.
  6. Do NOT make changes to workspace project files unless the user explicitly chose Option 1 and provided the file path with permission.
  7. Provide complete ASP.NET MVC snippets and concise integration steps after delivering the code.
Refer to
## Rules
section for operational constraints (output directory, temporary files, allowed libraries, etc.)

Code References

All code snippets and examples are in the
references/
folder. Each file contains:
  • Minimal ASP.NET MVC(cshtml) Code — a working, ready-to-use snippet
  • Placeholders — values the user must customize
  • Notes — ASP.NET MVC best practices and constraints
FileTopic
initialization.mdBasic ASP.NET MVC setup and options
data-binding.mdLocal arrays, JSON, remote (DataManager)
formulas.mdFormulas, aggregates, named ranges
formatting.mdCell formatting, borders, wrap text
number-formatting.mdNumber formatting, decimals, currency, date
conditional-formatting.mdRules, highlights based on conditions
data-validation.mdValidation rules, invalid highlights
sorting-filtering.mdSorting, filtering
find-replace.mdFind, replace
import-export.mdSave (XLSX/CSV/PDF), open, openFromJson
charts.mdInsert, edit, delete charts
images.mdInsert, modify pictures
hyperlink.mdAdd, remove hyperlinks
comments.mdThreaded comments, replies, resolve threads
notes.mdSimple cell notes, sticky visibility, add/edit/delete
protection.mdSheet protection, cell locking, permissions
edit-cell.mdstartEdit, endEdit, updateCell, edit modes
freeze-panes.mdFreeze rows/columns, split panes
row-column.mdInsert, delete, resize rows/columns, hide
merge-cells.mdMerge, unmerge cells, spanning
print.mdPage setup, headers/footers, scaling, margins
misc-operations.mdAutofill, clear, sheet management, goTo
clipboard.mdCopy, cut, paste with different paste types
selection.mdSelect cells/ranges, multi-select, getSelectedRange
scrolling-virtualization.mdVirtual scrolling, large datasets, performance
wrap.mdText wrapping, multi-line display, row height
defined-names.mdNamed ranges, define names, refersTo format
custom-functions.mdCustom calculation functions, addCustomFunction
ribbon-customization.mdRibbon tabs, toolbar items, file menu customization
context-menu.mdRight-click context menu, contextMenuBeforeOpen
localization.mdMulti-language, locale, RTL, number/date formats
events.mdEvent handling, event properties, event patterns
autofill.mdAutofill patterns, fill types, series

Key Rules for Code Generation (ASP.NET MVC (cshtml)-first)

  1. ASP.NET MVC (cshtml)-first snippets — All examples and snippets must be written in ASP.NET MVC cshtml and compile with the current
    https://cdn.syncfusion.com/ej2/{product_version}/dist/ej2.min.js
    npm package. If the user asks for providing ASP.NET MVC cshtml, provide ASP.NET MVC cshtml codes.
  2. No inline code in this manifest — Refer to
    references/*.md
    for runnable snippets; keep this file as the concise policy and index.
  3. Reference file requirements — Each reference must include:
    • Minimal ASP.NET MVC (cshtml) Code (complete, runnable)
    • Placeholders (clearly marked values to replace)
    • Notes (ASP.NET MVC integration steps and best practices)
  4. License handling — Do not hardcode license keys; refer users to env variables or project config.
  5. Preserve data integrity — Preserve existing formulas, references, and formatting when generating or editing sheets.
  6. No hallucinated APIs — Use verified Syncfusion Spreadsheet Editor method names only.
  7. Read references first — For any requested feature, always read the relevant
    references/*.md
    file(s) first before generating code.
  8. Build strictly from references — Build ASP.NET MVC code strictly from the APIs, methods, properties, events, and snippets found in the reference files. Do NOT invent, guess, or suggest any API, method, property, or event not explicitly present in the reference files.

Rules

  • Output files must go in
    {skill-root}/syncfusion-aspnetmvc-spreadsheet-editor/output/
    directory when user selects Option 2
  • Only use Syncfusion Spreadsheet APIs — never recommend or use alternative spreadsheet libraries (e.g., aspnet-mvc-spreadsheet, handsontable, ag-grid)
  • No temporary files — never create temporary scripts, intermediate files, or scaffolding outside the output directory
  • ASP.NET MVC-only code — all generated code must be valid ASP.NET MVC (cshtml), never generate vanilla JavaScript, jQuery, or non-ASP.NET MVC patterns