Syncfusion EJ图表：C#控制器属性访问及网格图表联合导出Excel

Got it, let's walk through how to get your Syncfusion EJ Grid and Chart exported together into a single Excel file from your C# controller. Here's a step-by-step breakdown tailored to your setup:

1. First: Validate Frontend Parameter Passing #

You're already converting the Chart instance to a JSON string (with a circular reference handler, which is smart for avoiding serialization issues). Just make sure you're passing this data via POST to your controller (GET has length limits):

var data = { 
    "ClientID": $scope.Model.ClientID, 
    // Add your other parameters here...
    "Chart": JSON.stringify($("#MyChart").ejChart("instance"), getCircularReplacer()) 
}; 
var grid = $("#" + table).ejGrid("instance"); 
// Use POST for larger payloads (third parameter = true)
grid.export(url, data, true);

2. Set Up C# Controller & Model Binding #

First, create a view model to capture the incoming parameters:

public class ExportRequestModel
{
    public int ClientID { get; set; }
    // Mirror all your other frontend parameters here
    public string Chart { get; set; }
}

Then, create a POST action to handle the export. We'll use Syncfusion's XlsIO library for Excel generation, and deserialize the Chart JSON into Syncfusion's native ChartProperties class to access all frontend Chart settings:

using Syncfusion.JavaScript.Models;
using Syncfusion.XlsIO;
using Newtonsoft.Json;
using System.IO;

[HttpPost]
public ActionResult ExportGridAndChart(ExportRequestModel model)
{
    // 1. Deserialize the Chart JSON into Syncfusion's ChartProperties object
    // This lets you access every property of your frontend Chart
    var chartConfig = JsonConvert.DeserializeObject<ChartProperties>(model.Chart);

    // 2. Fetch your Grid data (reuse the logic you already have for Grid-only exports)
    var gridDataSource = GetGridData(model.ClientID); // Replace with your data fetch method

    // 3. Create an Excel workbook with two sheets: one for Grid, one for Chart
    using (var excelEngine = new ExcelEngine())
    {
        IApplication excelApp = excelEngine.Excel;
        excelApp.DefaultVersion = ExcelVersion.Excel2016;
        IWorkbook workbook = excelApp.Workbooks.Create(1);

        // --- Export Grid to first sheet ---
        IWorksheet gridSheet = workbook.Worksheets[0];
        gridSheet.Name = "Grid Data";
        // Import Grid data into the sheet (adjust range as needed)
        gridSheet.ImportData(gridDataSource, 1, 1, true);

        // --- Export Chart to second sheet ---
        IWorksheet chartSheet = workbook.Worksheets.Create("Chart");
        // First, import the Chart's data into the sheet (use your Chart data source logic)
        var chartDataSource = GetChartData(model.ClientID); // Replace with your data fetch method
        chartSheet.ImportData(chartDataSource, 1, 1, true);

        // Create the Excel Chart and map properties from your frontend ChartConfig
        IChartShape excelChart = chartSheet.Charts.Add();
        // Map Chart type (adjust based on your supported types)
        excelChart.ChartType = MapEjChartTypeToExcel(chartConfig.ChartType);
        // Set data range (update to match your imported data's bounds)
        excelChart.DataRange = chartSheet.Range["A1:D10"];
        // Map title, axes labels, etc. from the frontend Chart
        excelChart.ChartTitle.Text = chartConfig.Title.Text;
        if (chartConfig.PrimaryXAxis != null)
        {
            excelChart.PrimaryCategoryAxis.Title.Text = chartConfig.PrimaryXAxis.Title.Text;
        }
        if (chartConfig.PrimaryYAxis != null)
        {
            excelChart.PrimaryValueAxis.Title.Text = chartConfig.PrimaryYAxis.Title.Text;
        }
        // Add more mappings (legend visibility, series colors, etc.) as needed

        // 4. Save the workbook and return it as a download
        MemoryStream stream = new MemoryStream();
        workbook.SaveAs(stream);
        stream.Position = 0;
        return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Grid_And_Chart_Export.xlsx");
    }
}

// Helper method to map Syncfusion EJ Chart types to Excel Chart types
private ExcelChartType MapEjChartTypeToExcel(string ejChartType)
{
    return ejChartType.ToLower() switch
    {
        "column" => ExcelChartType.ColumnClustered,
        "line" => ExcelChartType.Line,
        "pie" => ExcelChartType.Pie,
        "bar" => ExcelChartType.BarClustered,
        // Add other supported types here
        _ => ExcelChartType.ColumnClustered // Default fallback
    };
}

3. Accessing Syncfusion EJ Chart Properties in C# #

Once you deserialize the JSON into ChartProperties, you can access every configuration from your frontend Chart:

• Title & Subtitle: chartConfig.Title.Text, chartConfig.SubTitle.Text
• Axes: chartConfig.PrimaryXAxis.LabelIntersectAction, chartConfig.PrimaryYAxis.Range.Min
• Series: chartConfig.Series[0].Name, chartConfig.Series[0].Color
• Legend: chartConfig.Legend.Visible, chartConfig.Legend.Position

All properties mirror what you set in your frontend EJ Chart configuration.

4. Required NuGet Packages #

Make sure you have these installed in your project:

• Syncfusion.EJ (for the ChartProperties class)
• Syncfusion.XlsIO.AspNet.Mvc (for Excel generation)
• Newtonsoft.Json (for JSON deserialization)

内容的提问来源于stack exchange，提问作者user742102