ASP.NET 8 MVC视图中JS动态生成3列表格时出现空对象错误

我基于ASP.NET 8.0开发MVC应用，试图从控制器获取List数据，在视图中通过JavaScript生成每行3列的表格，但执行到代码tableau.appendChild(tbl)时，抛出错误：Uncaught TypeError: Cannot read properties of null (reading 'appendChild')。之前试过foreach循环实现未成功，改用for循环编写JavaScript代码，相关代码及报错截图如下：

@model List<ViewListTable>
<head>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
  <script type="text/javascript">
    function f() {
      var myArray = [];
      @foreach(var d in Model) {
        @: myArray.push("@d.Name");
      }

      var cptData = myArray.length;
      var tableau = document.getElementById('tableau');
      var tbl     = document.createElement("table");
      var x       = 0;

      for (var i = 0; i < cptData / 3; i++) {
        var tr = document.createElement('tr');
        for (j = 0; j < 3; j++) {
          var td = document.createElement('td');
          if (x < cptData) {
            var a        = document.createElement('a');
            var el_span  = document.createElement('span');
            var linkText = document.createTextNode(myArray[x]);
            var tab      = myArray[x];

            //console.log(tab);
            el_span.setAttribute('style', 'color: #07C');
            a.setAttribute('href', "'" + tab + "'");
            a.setAttribute('class', 'button');
            a.title = "Éditer les données de la table:";
            a.appendChild(linkText);
            el_span.appendChild(a);
            td.appendChild(el_span);
          };
          x += 1;
          tr.appendChild(td)
        };
        tbl.appendChild(tr);
      }
      tableau.appendChild(tbl);
    }
    f();
  </script>
</head>
<body>
  <div id="tableau"></div> 
</body>

问题原因及解决办法 #

核心问题 #

你在<head>标签内直接调用了f()函数，此时<body>中的<div id="tableau"></div>还未完成DOM加载，导致document.getElementById('tableau')返回null，无法执行appendChild方法。

解决方式（任选其一） #

1. 将JS代码移至<body>末尾
   确保DOM元素加载完成后再执行JavaScript，把<script>标签放到<div id="tableau"></div>之后：

   @model List<ViewListTable>
   <head>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
   </head>
   <body>
     <div id="tableau"></div> 
     <script type="text/javascript">
       function f() {
         var myArray = [];
         @foreach(var d in Model) {
           @: myArray.push("@d.Name");
         }
   
         var cptData = myArray.length;
         var tableau = document.getElementById('tableau');
         var tbl     = document.createElement("table");
         var x       = 0;
   
         for (var i = 0; i < Math.ceil(cptData / 3); i++) {
           var tr = document.createElement('tr');
           for (j = 0; j < 3; j++) {
             var td = document.createElement('td');
             if (x < cptData) {
               var a        = document.createElement('a');
               var el_span  = document.createElement('span');
               var linkText = document.createTextNode(myArray[x]);
               var tab      = myArray[x];
   
               el_span.setAttribute('style', 'color: #07C');
               a.setAttribute('href', tab);
               a.setAttribute('class', 'button');
               a.title = "编辑表格数据:";
               a.appendChild(linkText);
               el_span.appendChild(a);
               td.appendChild(el_span);
             };
             x += 1;
             tr.appendChild(td)
           };
           tbl.appendChild(tr);
         }
         tableau.appendChild(tbl);
       }
       f();
     </script>
   </body>
   

2. 监听DOM加载完成事件
   保留JS在<head>中，修改函数调用时机，等待DOM全部加载完成后执行：

   // 替换原来的f();
   document.addEventListener('DOMContentLoaded', function() {
     f();
   });
   

额外优化建议 #

• 循环条件i < cptData / 3可能因小数导致数据遗漏，建议用Math.ceil(cptData / 3)确保所有数据都能渲染；
• 可以直接用Razor语法生成表格，无需依赖JavaScript，代码更简洁：

  <div id="tableau">
    <table>
      @for (int i = 0; i < Model.Count; i += 3)
      {
        <tr>
          @for (int j = i; j < i + 3 && j < Model.Count; j++)
          {
            <td>
              <span style="color: #07C">
                <a href="@Model[j].Name" class="button" title="编辑表格数据:@Model[j].Name">@Model[j].Name</a>
              </span>
            </td>
          }
          @* 补全不足3列的空单元格 *@
          @for (int k = Model.Count - i; k < 3; k++)
          {
            <td></td>
          }
        </tr>
      }
    </table>
  </div>
  

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