如何从JavaScript调用Razor函数？解决FillTheList调用失败问题

你这里踩了一个服务器端/客户端代码混淆的典型坑哦～Razor的@functions里定义的FillTheList()是运行在服务器端的C#函数，而<script>标签里的代码是页面加载后在浏览器客户端跑的JavaScript，两者的运行时机、环境完全不搭，直接把Razor代码块塞到<script>里肯定行不通。

下面分两种常见场景给你解决方案：

场景1：页面渲染时就执行服务器端函数 #

如果你的需求是让服务器在生成HTML页面的过程中就执行FillTheList()（比如填充ViewBag、生成服务器端的列表元素），那根本不需要碰<script>，直接在页面的Razor代码块里调用就行：

@{
    // 服务器渲染页面时会自动执行这个函数
    FillTheList();
}

<!-- 后续页面内容可以直接用函数生成的数据 -->
<div>@ViewBag.FilledListContent</div>

场景2：客户端触发事件时调用服务器端函数 #

如果是想在用户做了某个操作（比如点击按钮）之后再执行这个服务器端函数，那得通过AJAX请求来实现——相当于客户端向服务器发一个请求，让服务器执行函数后返回结果：

1. 先把FillTheList()的逻辑迁移到Controller的Action里（或者单独写一个可被AJAX调用的端点）：

// 假设你的Controller叫HomeController
public IActionResult RunFillTheList()
{
    // 把原来FillTheList()里的代码移到这里
    // some part of code
    
    // 可以返回JSON数据给客户端做反馈
    return Json(new { success = true, msg = "列表填充完成" });
}

2. 然后在页面的<script>里写AJAX代码，绑定事件触发请求：

<button id="fillBtn">点击填充列表</button>

<script>
document.getElementById('fillBtn').addEventListener('click', () => {
    // 用原生fetch发起请求，也可以用jQuery的$.ajax
    fetch('/Home/RunFillTheList')
        .then(res => res.json())
        .then(data => {
            console.log(data.msg);
            // 如果需要更新页面内容，这里可以操作DOM
        })
        .catch(err => console.error('请求失败:', err));
});
</script>

额外补充：如果你的函数只是用来生成客户端需要的列表数据，也可以让服务器把数据序列化后传给客户端JS：

@{
    FillTheList();
    // 假设函数把数据存在ViewBag.ListData里
}

<script>
// 把服务器端数据转成客户端可直接用的JS变量
const clientListData = @Html.Raw(Json.Serialize(ViewBag.ListData));
// 之后客户端JS就能直接操作这个变量了
console.log(clientListData);
</script>

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