如何从 MVC 中的 jQuery 访问 PartialView 中的 ViewData？

Question

我有一个通过 jQuery 加载 PartialView 的视图。 PartialView 有 jQuery 需要访问的 ViewData，但我似乎无法从 jQuery 访问它。下面的代码使用 HighChart jQuery 插件（它只是从 HighChart 示例页面获取的测试代码）：

<script type="text/javascript">
        var chart1; // globally available
        $(document).ready(function () {
            $('#reportButton').click(function (event) {
                var actionUrl = '<%= Url.Action("UserReport") %>';
                var customerId = $('#customersId').val();
                var month = $('#monthsId').val();
                var employees = '<%= ViewData["Employees"] %>'
                alert(employees);
                $.get(actionUrl, { customerId: customerId, month: month }, function (data) {
                    $('#result').html(data);
                    getHighChart();
                });
            });
        });

        function getHighChart() {
            var employees = '<%= ViewData["Employees"] %>'
            alert(employees);
            chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart-container-1',
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: [employees]
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, {
                    name: 'John',
                    data: [5, 7, 3]
                }]
            });
        }


    </script>

这个 jQuery 位于主视图中，因为我不知道如何将其放入具有文档就绪功能的 PartialView 中。但是，通过将对 HighChart 函数的调用放在 get() 函数的回调中，它可以在分部视图中工作。但访问 ViewData 并不...

我怎样才能实现这一点？我需要从 PartialView 操作方法获取数据才能填充 HighChart 数据...

Answer 1

问题在于 ASP.NET 在呈现时遍历 HTML 文档的方式。

即使您在 $.get 调用完成后执行此代码：

var employees = '<%= ViewData["Employees"] %>'

ViewData 属性仍将在渲染时求值（例如在此之前）代码被执行）。

我的建议：

在局部视图中声明一个隐藏字段，并将 ViewData 放入其中：

<input type="hidden" id ="Employees_ViewData" value="<%: ViewData["Employees"] %>" />

渲染局部视图时将对其进行评估 >。

然后你可以通过 jQuery 访问它：

var employees = $('#Employees_ViewData').val();