jquery - 我想在 razor 中循环遍历我的模型列表以填充 jquery 列

Question

我想从列表中生成一个表，但我不知道该怎么做。这是我收到的错误的图片。

这是我的 html 代码

<table id="extracionTable" class="display nowrap" style="width: 100%;">
    <thead>
        <tr>
            @foreach (var item in Model.contactos)
            {
                <th>@item.nombre_contacto</th>
            }
    </thead>
</table>

这是 jQuery 代码

<script>

    $(document).ready(function () {
        var table = $('#extracionTable').DataTable({
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true,
            "ajax": {
                "url": "/gestionDeEmpleados/loadEmployeTable",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                @foreach (var item in Model.contactos) { 
                { "data": @item, "autoWidth": true },/* index = 0 */
                }
            ]
        });
    });
    $("#open-new").click(function (event) {
        event.stopPropagation();
    });
</script>

我该如何解决这个问题。

Answer 1

首先，问题是您的代码使 Razor 感到困惑。例如，您有用于 javascript 对象的大括号，但 Razor 认为它们是 C# 代码的一部分。

我认为最好的方法是将数据转换为 JSON 并以这种方式将其发送到 View 。然后让您的 jQuery 访问此 JSON 并使用它。这种方法的优点是你的 JavaScript 不再需要存在于不属于它的 View 上。如果您愿意我可以进一步扩展这一点吗？

如果您确实想按照您所展示的方式执行此操作，则可以完成的一种方法是将您的第二个 foreach 更改为此。

@foreach (var item in Model.contactos) 
            {
                <text>
                    { "data": "@(item.nombre_contacto)", "autoWidth": true },
              </text>
           }

我用过<text>这里的元素可帮助 Razor 破译什么是 C# 代码以及什么是它应该忽略的字符串。

编辑 我刚刚使用一些测试数据运行了此代码，并且在更改 ajax 属性之前代码无法工作。像这样尝试一下

"ajax": {
            "url": "/gestionDeEmpleados/loadEmployeTable",
            "type": "GET",
            "datatype": "json",
            "dataSrc":""
        }

注意我已经添加了 dataSrc 属性。阅读数据表文档，它说 dataSrc 选项用于告诉 DataTables 数据数组在 JSON 结构中的位置，因此空字符串可能不适合您。请参阅their ajax docs了解更多。