ASP.NET Core MVC中如何将Model数据传递给JavaScript函数？

一、内联JavaScript方案 #

1. 预处理数据并序列化JSON #

不要直接在JS事件中嵌套LINQ查询，先在Razor视图顶部完成数据计算，再序列化为合法的JSON格式传递给JS函数：

@{
    // 提前在视图层处理好统计数据
    var doneCount = Model.Context.Meetings.Where(c => c.Status == "Done").Count();
    var pendingCount = Model.Context.Meetings.Where(c => c.Status == "Pending").Count();
    var canceledCount = Model.Context.Meetings.Where(c => c.Status == "Canceled").Count();

    // 封装为对象并序列化为JSON
    var chartData = new { Done = doneCount, Pending = pendingCount, Canceled = canceledCount };
    var jsonData = Newtonsoft.Json.JsonConvert.SerializeObject(chartData);
}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 用@Html.Raw确保JSON不被HTML转义
    chartMaker(@Html.Raw(jsonData));
});

function chartMaker(data) {
    // 示例：基于Chart.js生成柱状图
    new Chart(document.getElementById('meetingChart'), {
        type: 'bar',
        data: {
            labels: ['已完成', '待处理', '已取消'],
            datasets: [{
                label: '会议数量',
                data: [data.Done, data.Pending, data.Canceled]
            }]
        }
    });
}
</script>

2. 直接嵌入简单变量 #

如果仅传递单个数值，确保Razor输出的内容符合JS语法：

<script>
window.onload = function() {
    // 用@Html.Raw输出纯数字，避免多余引号
    var doneCount = @Html.Raw(doneCount);
    chartMaker(doneCount);
};
</script>

二、外部JavaScript文件方案 #

外部JS无法直接访问Razor变量，可通过以下方式传递数据：

1. 使用HTML Data属性 #

在页面元素上存储数据，外部JS读取这些属性：

<!-- 页面中添加存储数据的容器 -->
<div id="chartData" 
     data-done="@doneCount"
     data-pending="@pendingCount"
     data-canceled="@canceledCount">
</div>

<!-- 引入外部JS文件 -->
<script src="/js/chartMaker.js"></script>

外部JS文件chartMaker.js代码：

document.addEventListener('DOMContentLoaded', function() {
    const dataElement = document.getElementById('chartData');
    const chartData = {
        Done: parseInt(dataElement.dataset.done),
        Pending: parseInt(dataElement.dataset.pending),
        Canceled: parseInt(dataElement.dataset.canceled)
    };
    renderChart(chartData);
});

function renderChart(data) {
    // 图表生成逻辑
}

2. 定义全局变量 #

在视图内联脚本中定义全局变量，供外部JS引用：

<script>
// 命名空间化全局变量，避免污染
window.appData = {
    meetingStats: @Html.Raw(jsonData)
};
</script>
<script src="/js/chartMaker.js"></script>

外部JS文件代码：

document.addEventListener('DOMContentLoaded', function() {
    if (window.appData?.meetingStats) {
        chartMaker(window.appData.meetingStats);
    }
});

3. AJAX异步获取数据 #

适合数据量大或需动态更新的场景，在Controller中编写API接口：

[HttpGet]
public IActionResult GetMeetingStats()
{
    var stats = new {
        Done = _context.Meetings.Where(c => c.Status == "Done").Count(),
        Pending = _context.Meetings.Where(c => c.Status == "Pending").Count(),
        Canceled = _context.Meetings.Where(c => c.Status == "Canceled").Count()
    };
    return Json(stats);
}

外部JS文件代码：

document.addEventListener('DOMContentLoaded', function() {
    fetch('/Home/GetMeetingStats')
        .then(res => res.json())
        .then(data => chartMaker(data))
        .catch(err => console.error('获取统计数据失败:', err));
});

• 视图层避免业务逻辑：所有数据计算（如Count、Where查询）应在Controller或Service层完成，封装为ViewModel传递给视图，禁止在视图中直接操作DbContext。
  示例ViewModel：

  public class MeetingStatsViewModel
  {
      public int DoneCount { get; set; }
      public int PendingCount { get; set; }
      public int CanceledCount { get; set; }
  }
  

• 避免全局变量污染：若使用全局变量，需命名空间化（如window.appData），减少命名冲突。
• 确保JSON序列化正确：使用@Html.Raw()或ASP.NET Core内置的@Json.Serialize()方法，避免JSON被HTML转义。
• 数据类型校验：从Data属性或全局变量读取数据时，显式转换为JS对应类型（如parseInt处理数字）。
• 添加错误处理：在JS中增加异常捕获逻辑，避免数据缺失导致图表渲染失败。

内容的提问来源于stack exchange，提问作者Tuğcan Topaloğlu