Question

我需要重用一个JavaScript代码，该代码在带有Razor的HTML页面中绘制一个pieChart。现在我只将一个DataTable传递给要呈现为pieChart的视图，但我想传递3个以上的DataTable，而不必重复3次JavaScript代码。

我的控制器：

public ActionResult Dashboard()
        {
            var data = db.SomeDatabaseTable;

            DataTable dt = new DataTable();

            dt.Columns.Add("Title").DataType = typeof(string);
            dt.Columns.Add("Value").DataType = typeof(int);

            DataRow firstRow = dt.NewRow();
            DataRow secndRow = dt.NewRow();
            DataRow thirdRow = dt.NewRow();

            firstRow[0] = "Invalid Mails";
            secndRow[0] = "Null Mails";
            thirdRow[0] = "Valid Mails";

            firstRow[1] = data.Where(Some Contition).Count();
            secndRow[1] = data.Where(Other Condition).Count();
            thirdRow[1] = data.Where(An Other Condition).Count();

            dt.Rows.Add(firstRow);
            dt.Rows.Add(secndRow);
            dt.Rows.Add(thirdRow);

            ViewBag.data = dt;

            return View();
        }

正如大家都能看到的那样，我在ViewBag中传递了填充了愿意值的DataTable作为变量“data”。然后，在View中，我使用foreach通过我传递的数据表（ViewBag.data）填充Javascript代码，如下所示：

<script type="text/javascript">

    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            @{int count = 0;}
            @foreach (DataRow row in ((DataTable)ViewBag.data).Rows)
                {
                    if (count > 0)
                    {
                        @Html.Raw(",['" + row[0] + "'," + row[1] +"]");
                    }
                    else
                    {
                        @Html.Raw("['" + row[0] + "'," + row[1] +"]");
                    }
                count++;
                }
        ]);

        var options = {
            'title': 'Title',
            'width': 400,
            'height': 300
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

然后，这个可视化在我的HTML中的'char_div'div中进行了渲染：

<body>
    <div class="jumbotron">
        <h1>DashBoard</h1>
        <br />
        <div class="row">
            <div id="chart_div"></div>
        </div>
    </div>
</body>

所以......问题是： ¿有一种干净的方法可以将总共4个dataTable分别传递给View并渲染4个pieCharts，而不必重复4次JavaScript代码？

我想我要为我要渲染的每个dataTable循环JavaScript 1次，但我不知道怎么回事。

非常感谢！

如何重用此JavaScript代码将不同的C＃变量作为参数传递？

0 个答案: