MVC 视图传递模型到 JavaScript 函数 - JavaScript

在使用 MVC 模式开发 web 应用程序时，我们通常需要将数据从服务器传递到客户端的 JavaScript 函数中，以便进行一些操作，例如数据可视化、动态更新等。

本文将介绍如何在 MVC 视图中传递模型数据到 JavaScript 函数中，让您可以更轻松地实现这些操作。

1. 传递方式

1.1 通过 HTML 属性传递

在 MVC 视图中，我们可以使用 HTML 属性将模型数据传递到 JavaScript 函数中。例如，可以将查询结果作为 JSON 格式的字符串嵌入在 HTML 属性中，然后将该属性传递给 JavaScript 函数。如下所示：

<div id="data" data-json=@Html.Raw(Json.Encode(Model.Data))></div>

这里我们使用 ASP.NET MVC 的 Razor 引擎生成了一个 HTML 属性，其中 @Html.Raw(Json.Encode(Model.Data)) 表示将模型数据转换为 JSON 格式的字符串，并将其插入到 data-json 属性中。

然后在 JavaScript 中，您可以通过 data() 方法或 dataset 属性获取该属性的值，如下所示：

var data = $('#data').data('json'); // 使用data()方法
var data = $('#data')[0].dataset.json; // 使用dataset属性

2. 示例

下面是一个简单的示例，展示了如何将 MVC 视图中的模型数据传递到 JavaScript 函数中，并使用 CanvasJS 库绘制柱形图。

2.1 MVC 视图

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

@section scripts {
    <script>
        var chartData = @Html.Raw(Json.Encode(Model.ChartData));

        drawChart(chartData);

        function drawChart(data) {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",
                title:{
                    text: "Monthly Sales"
                },
                axisY: {
                    title: "Sales (in USD)",
                    includeZero: false
                },
                data: [{
                    type: "column",
                    yValueFormatString: "$#,###",
                    dataPoints: data
                }]
            });
            chart.render();
        }
    </script>
}

在上面的代码中，我们将柱形图的数据作为一个 JSON 格式的对象传递给了名为 chartData 的 JavaScript 变量。然后，我们在 drawChart() 函数中使用了该变量，传递给 CanvasJS 库绘制柱形图。

2.2 控制器

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var data = new List<DataPoint>
        {
            new DataPoint("Jan", 500),
            new DataPoint("Feb", 700),
            new DataPoint("Mar", 600),
            new DataPoint("Apr", 800),
            new DataPoint("May", 900),
            new DataPoint("Jun", 1400),
            new DataPoint("Jul", 1200),
            new DataPoint("Aug", 1800),
            new DataPoint("Sep", 1400),
            new DataPoint("Oct", 1000),
            new DataPoint("Nov", 900),
            new DataPoint("Dec", 1100)
        };

        ViewBag.ChartData = data;

        return View();
    }
}

public class DataPoint
{
    public string Label { get; set; }
    public int Y { get; set; }

    public DataPoint(string label, int y)
    {
        Label = label;
        Y = y;
    }
}

在上述代码中，我们生成了一个 DataPoint 类型的列表，表示某一年中每个月的销售额。然后，我们使用 ViewBag 将该数据传递给视图。

3. 结论

本文介绍了如何将 MVC 视图中的模型数据传递到 JavaScript 函数中，使我们能够更加简单地实现数据可视化和动态更新等操作。我们可以使用 HTML 属性将模型数据嵌入视图中，然后在 JavaScript 中获取该属性的值，并将其传递给相关的库进行操作。

您可以根据您的需要进行更改和扩展，以实现更复杂的功能和交互体验。