HighCharts无法在Partial View中显示，Ajax加载后页面为空求助

Let's walk through the key issues that might be causing your partial view to render empty, and fix them step by step:

1. Fix the Ajax Target Element #

Your Ajax.ActionLink is set to update the body element, but your partial view is supposed to load into the MainGraph div. This mismatch means the partial content is being injected into the wrong place (or overwriting the entire body incorrectly). Update the UpdateTargetId to point to your intended container:

@Ajax.ActionLink("Team", "Index", "Home", null, new AjaxOptions { 
    HttpMethod = "GET", 
    LoadingElementId = "divLoading", 
    UpdateTargetId = "MainGraph", // Target the correct div
    InsertionMode = InsertionMode.Replace, 
    OnSuccess = "initHighCharts" // Add callback to initialize the chart after load
}, new { })

2. Ensure HighCharts Initializes Correctly for Dynamic Content #

When loading content via Ajax, any scripts in the partial view won't execute automatically. You need to wrap your HighCharts initialization logic in a function, then trigger it after the partial loads. Here's how your _Graph.cshtml should look:

<div id="chartContainer" style="width:100%; height:400px;"></div>

<script>
function initHighCharts() {
    // Convert ViewData to usable JSON
    var chartData = @Html.Raw(Json.Encode(ViewData["tokyoData"]));
    
    // Initialize HighCharts
    Highcharts.chart('chartContainer', {
        chart: { type: 'column' },
        title: { text: 'Monthly Average Rainfall' },
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },
        yAxis: { min: 0, title: { text: 'Rainfall (mm)' } },
        series: [{
            name: 'Tokyo',
            data: chartData.map(item => item.Y) // Extract the Y values from your model
        }]
    });
}
</script>

3. Fix Data Assignment Mismatch in Controller #

In your Ajax request branch, you're assigning nyData to ViewData["tokyoData"] which is confusing and could lead to unexpected data (or no data if the model expects a different structure). Correct the key name to match your intent:

public ActionResult Index() { 
    if (Request.IsAjaxRequest()) { 
        List<double> nyValues = new List<double> { 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 }; 
        List<ColumnSeriesData> nyData = new List<ColumnSeriesData>(); 
        nyValues.ForEach(p => nyData.Add(new ColumnSeriesData { Y = p })); 
        ViewData["nyData"] = nyData; // Use a matching key name
        return PartialView("~/Views/Home/_Graph.cshtml"); 
    } else { 
        List<double> tokyoValues = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 }; 
        List<ColumnSeriesData> tokyoData = new List<ColumnSeriesData>(); 
        tokyoValues.ForEach(p => tokyoData.Add(new ColumnSeriesData { Y = p })); 
        ViewData["tokyoData"] = tokyoData; 
        return View(); 
    } 
}

Don't forget to update the ViewData key in your partial view if you change it here (e.g., use ViewData["nyData"] instead of "tokyoData").

4. Verify HighCharts Script is Loaded #

Make sure your main view includes the HighCharts script before the Ajax request runs. Without this, the initHighCharts function won't recognize the Highcharts object:

<script src="https://code.highcharts.com/highcharts.js"></script>

(Use a local script file path if you're hosting HighCharts locally.)

5. Confirm Partial View Path is Correct #

Double-check that the path to your partial view (~/Views/Home/_Graph.cshtml) is accurate. A wrong path will cause the controller to return an empty result, leading to a blank page. You can verify the path by right-clicking the _Graph.cshtml file in Visual Studio and checking the "Full Path" in its properties.

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