如何在ASP.NET MVC4的Kendo UI柱状图中从服务端获取系列名称

Hey there! Let's figure out how to grab those chart series names from your server instead of hardcoding them in your Kendo UI Chart config. Since you're using ASP.NET MVC 4, there are a few clean ways to do this—here are the most common approaches:

This is the simplest option if you just need to pass a small set of values from your controller to the view.

Server-Side (Controller) #

In your action method, fetch the series names (from a database, API, or service) and store them in ViewBag:

public ActionResult YourChartPage()
{
    // Replace this with your actual server-side data retrieval logic
    var seriesNames = new List<string> 
    { 
        "Oddo Avenir Euro CI-EUR", 
        "Indicateur de référence *" 
    };
    ViewBag.ChartSeriesNames = seriesNames;
    
    return View();
}

Client-Side (View) #

In your Kendo Chart configuration, reference the ViewBag values directly using Razor syntax:

$("#yourChartElement").kendoChart({
    seriesColors: ["#f0c300", "#484b42"],
    series: [{ 
        name: '@ViewBag.ChartSeriesNames[0]', 
        field:"PerfSP", 
        categoryField: "date", 
        border: { width: 0 } 
    }, { 
        name: '@ViewBag.ChartSeriesNames[1]', 
        field:"PerfBench", 
        categoryField: "date", 
        border: { width: 0 } 
    }],
    // Rest of your chart configuration...
});

For more structured code (especially if you have other chart-related data to pass), use a strongly-typed model. This avoids magic strings and makes your code easier to maintain.

Step 1: Create a Model Class #

Add a model to hold your series names (and any other chart data you need):

public class ChartSeriesSettings
{
    public string MainSeriesName { get; set; }
    public string BenchmarkSeriesName { get; set; }
}

Step 2: Pass the Model from Controller #

In your action method, populate the model and pass it to the view:

public ActionResult YourChartPage()
{
    var seriesSettings = new ChartSeriesSettings
    {
        MainSeriesName = "Oddo Avenir Euro CI-EUR", // Fetch from server
        BenchmarkSeriesName = "Indicateur de référence *" // Fetch from server
    };
    return View(seriesSettings);
}

Step 3: Use the Model in the View #

First, declare the model at the top of your view:

@model YourNamespace.ChartSeriesSettings

Then reference the model properties in your Kendo config:

$("#yourChartElement").kendoChart({
    seriesColors: ["#f0c300", "#484b42"],
    series: [{ 
        name: '@Model.MainSeriesName', 
        field:"PerfSP", 
        categoryField: "date", 
        border: { width: 0 } 
    }, { 
        name: '@Model.BenchmarkSeriesName', 
        field:"PerfBench", 
        categoryField: "date", 
        border: { width: 0 } 
    }],
    // Rest of your chart configuration...
});

If you need to load the series names after the page has already rendered (e.g., based on user actions), use an Ajax call to fetch the data from the server, then initialize the chart.

Server-Side (Controller) #

Add an action that returns the series names as JSON:

public JsonResult GetChartSeriesNames()
{
    var seriesNames = new List<string> 
    { 
        "Oddo Avenir Euro CI-EUR", 
        "Indicateur de référence *" 
    };
    return Json(seriesNames, JsonRequestBehavior.AllowGet);
}

Client-Side (View) #

Use jQuery to make the Ajax call, then initialize the chart once you have the names:

$(document).ready(function() {
    $.ajax({
        url: '@Url.Action("GetChartSeriesNames", "YourControllerName")',
        type: 'GET',
        success: function(seriesNames) {
            // Initialize the chart with the fetched names
            $("#yourChartElement").kendoChart({
                seriesColors: ["#f0c300", "#484b42"],
                series: [{ 
                    name: seriesNames[0], 
                    field:"PerfSP", 
                    categoryField: "date", 
                    border: { width: 0 } 
                }, { 
                    name: seriesNames[1], 
                    field:"PerfBench", 
                    categoryField: "date", 
                    border: { width: 0 } 
                }],
                // Rest of your chart configuration...
            });
        }
    });
});

All three methods will replace your static string names with server-generated values—pick the one that best fits your project's structure and needs!

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