Я хотел бы l oop через мой список моделей в бритве, чтобы заполнить 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

как сказал Дэйв, у вас есть скобки для кода foreach в бритве, за которыми следуют скобки для javascript. Вы должны сказать бритве, как интерпретировать это. Аналогичный способ сделать это более крилящим был бы следующим:

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

Таким образом, я думаю, что это более читабельно, @() выведет значение того, что внутри

Answer 2

Во-первых, проблема в том, что ваш код сбивает с толку Razor. Например, у вас есть фигурные скобки, предназначенные для объекта javascript, но Razor считает, что они являются частью вашего C# кода.

Я думаю, что ваш лучший путь вперед - преобразовать ваши данные в JSON и отправьте его на просмотр таким образом. Затем получите ваш jQuery для доступа к этому JSON и работайте с ним. Преимущество этого подхода заключается в том, что вашему javascript больше не нужно жить в представлении, которое на самом деле не соответствует его положению. Если вы хотите, я могу расширить это дальше?

Если вы действительно хотите сделать это так, как вы показали, то один из способов сделать это - изменить свой второй foreach на этот.

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

Я использовал <text> элементы, чтобы помочь Razor расшифровать, что такое C# код и какую строку он должен игнорировать.

Edit Я только что выполнил это с некоторыми тестовыми данными, и код не будет работать, пока я не изменил свойство ajax. Попробуйте это так

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

Примечание. Я добавил свойство dataSr c. При чтении документов с данными, он говорит, что опция dataSr c используется, чтобы сообщить DataTables, где массив данных находится в структуре JSON, поэтому пустая строка может не сработать. См. их ajax документы для получения дополнительной информации.