使用Page.ClientScript.RegisterStartupScript传递JSON至JS文件遇变量未定义问题

可能原因及对应解决方案 #

1. 脚本注册位置或参数问题

后台注册的脚本未正确输出到页面，或者执行顺序有误：

• 检查页面源代码，确认是否存在var booksData = ...这段脚本。如果不存在，修改RegisterStartupScript的类型参数，避免因页面继承/母版页导致的类型匹配问题：

  // 替换原注册脚本的代码
  Page.ClientScript.RegisterStartupScript(typeof(books_page), "booksData", $"var booksData = {jsonBooks};", true);
  

• 确保第二个参数（key值"booksData"）唯一，不会被其他脚本覆盖。

2. JSON序列化问题

JavaScriptSerializer对特殊字符的处理可能存在缺陷，导致脚本语法错误，变量无法正常定义：

• 改用Newtonsoft.Json（需先安装Newtonsoft.Json NuGet包）进行序列化，它对特殊字符的转义更可靠：

  // 引入命名空间
  using Newtonsoft.Json;
  
  // 替换序列化代码
  string jsonBooks = JsonConvert.SerializeObject(books);
  

• 可以将jsonBooks输出到Debug窗口，复制内容到在线JSON验证工具检查格式是否正确。

3. JS文件执行时机问题

如果JS文件在后台注册的脚本之前加载，立即执行的JS代码会找不到变量：

• 确保JS文件的引用放在页面底部，在</form>标签之后、</body>标签之前，保证脚本执行顺序是先定义booksData，再加载JS文件：

  <form id="form1" runat="server">
      <!-- 页面内容 -->
  </form>
  <!-- 后台注册的脚本会自动插入到form结束标签后 -->
  <script src="your-book-script.js"></script>
  </body>
  

• 或者在JS文件中延迟执行代码，确保变量已定义：

  window.addEventListener('DOMContentLoaded', function() {
      console.log(booksData);
  });
  

4. 替代方案：使用隐藏域传递数据

避免脚本注册的顺序问题，改用页面隐藏域存储JSON数据：

• 在aspx页面添加隐藏域：

  <input type="hidden" id="hdnBooksData" runat="server" />
  

• 后台代码将JSON赋值给隐藏域：

  hdnBooksData.Value = jsonBooks;
  

• JS文件中读取并解析数据：

  var booksData = JSON.parse(document.getElementById('hdnBooksData').value);
  console.log(booksData);
  

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