如何将C#后端的allRecords数组传递至客户端JavaScript？

嘿，我来给你分享几个实用的实现方案，都是项目里常用的，你可以根据自己的项目类型来选：

方案1：通过Web API返回JSON（前后端分离首选） #

如果你的后端是ASP.NET Web API或者ASP.NET Core Web API，这是最标准的解耦方式：

1. 先确保你的GetUserNames是普通的POCO类（不需要额外配置，默认就能被JSON序列化）
2. 在API控制器里写一个Action来返回数据：

[HttpGet]
public IActionResult GetUserNames()
{
    // 这里放你读取SQL数据生成allRecords的逻辑
    var allRecords = new List<GetUserNames>();
    // ... 你的SQL查询、reader读取代码 ...
    
    return Ok(allRecords); // 框架会自动把数组序列化为JSON返回给前端
}

3. 前端用JS的fetch或者axios请求这个接口：

// 用fetch的例子
fetch('/api/YourControllerName/GetUserNames')
  .then(res => res.json())
  .then(allRecords => {
      // 拿到数组啦，随便造作～
      console.log('后端返回的用户列表:', allRecords);
      // 比如遍历显示每个用户名
      allRecords.forEach(item => {
          console.log(item.users);
      });
  })
  .catch(err => console.error('请求失败:', err));

方案2：ASP.NET MVC视图直接传递（适合服务器端渲染场景） #

如果是ASP.NET MVC项目，可以直接把数据注入到视图的JS里：

1. 在Controller的Action里把数据存到ViewBag或者ViewModel：

public ActionResult Index()
{
    var allRecords = new List<GetUserNames>();
    // ... 你的SQL读取逻辑 ...
    
    ViewBag.UserRecords = allRecords;
    return View();
}

2. 在Razor视图里把后端对象转成JS可用的JSON：

<script>
    // 用@Html.Raw避免JSON被HTML编码
    const allRecords = @Html.Raw(Json.Encode(ViewBag.UserRecords));
    
    // 现在就能用这个数组了
    allRecords.forEach(user => {
        alert('用户名：' + user.users);
    });
</script>

注意：ASP.NET Core里要用Json.Serialize代替Json.Encode哦

方案3：传统ASP.NET Web Forms的实现方式 #

如果是Web Forms项目，有两种简单的方式：

方法一：用隐藏字段存JSON #

后台代码：

protected void Page_Load(object sender, EventArgs e)
{
    var allRecords = new List<GetUserNames>();
    // ... 你的SQL读取逻辑 ...
    
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string jsonData = serializer.Serialize(allRecords);
    // 假设页面上有个runat="server"的HiddenField控件
    hfUserRecords.Value = jsonData;
}

前端JS读取：

const jsonStr = document.getElementById('hfUserRecords').value;
const allRecords = JSON.parse(jsonStr);
// 开始使用数组...

方法二：直接注册客户端脚本 #

后台代码：

protected void Page_Load(object sender, EventArgs e)
{
    var allRecords = new List<GetUserNames>();
    // ... 你的SQL读取逻辑 ...
    
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string jsonData = serializer.Serialize(allRecords);
    string script = $"var allRecords = {jsonData};";
    ClientScript.RegisterStartupScript(this.GetType(), "UserRecordsScript", script, true);
}

这样页面加载完成后，全局作用域里就直接有allRecords变量可以用了～

最后给你提几个小提醒：

• 确保GetUserNames类的属性名和JS里访问的一致（比如你类里的users属性，JS里就用item.users）
• 如果数据里有特殊字符或者敏感内容，ASP.NET的序列化器会自动处理转义，不用太担心
• 优先选Web API的方式，前后端完全解耦，后续维护和扩展都更方便

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