如何将 MVC 模型的 Razor 合并到 DataTables 方法中——子行（显示额外/详细信息）？

Question

我有一个使用 MVC 制作的网站。它有一个使用 DataTables 构建的表。但是，列太多了，看起来真的很乱，挤在一起。所以我决定通过使用DataTables Child rows (show extra/detailed information) feature来减少列数。

这是我的代码现在的样子：

@using MyWebSite
@model IEnumerable<TableModel>


<!--DATATABLE-->  
@section scripts{
    <script type="text/javascript">
    $(document).ready(function () {

        //create table
        var table = $('#example').DataTable({

            //child row code -- show and hide extra row details
            //this is the default code from the data tables site. need to change. I'm not using ajax -- objects.txt -- i'm using a model
            "ajax": "../ajax/data/objects.txt", 
            "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },


                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "salary" }
            ],
            "order": [[1, 'asc']],

            dom: 'Bfrtip',
            select: true,

            //Get Site Selected Data button
            buttons: [
            {
                text: 'Get selected site info',
                action: function (e) {
                    e.preventDefault();

                    var data1 = $.map(table.rows(['.selected']).data(), function (item) {
                        return item[1]
                    });

                    var postData = { hosts: data1 }

                    // Submit form data via Ajax
                    $.ajax({
                        type: "POST",
                        url: '/Site/PrepWebsiteSelections',
                        data: postData,
                        dataType: "text",
                        success: function (response) {
                            alert(response);
                        },
                        error: function (xhr) {
                            alert("Error " + xhr);
                        }

                    });
                }
            }]

        });

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }

        });
    });

</script>

<script type="text/javascript">


    $(function () {
        var status = $.connection.webSiteHub;
        status.client.updateSiteStatus = function (site, message) {
            var table = $('#example').DataTable();

            var indexes = table.rows().eq(0).filter(function (rowIdx) {
                return table.cell(rowIdx, 1).data() === host ? true : false;
            });

            table.rows(indexes).every(function (rowIdx, tableLoop, rowLoop) {
                var d = this.data();
                d[8] = message;
                //table.fnUpdate(message, this, undefined, false);
                $('#example').dataTable().fnUpdate(d,table.row(this).index(),undefined,false);
            });
        };

        $.connection.hub.start()
    });

</script>


<form name="frm-example" id="frm-example">
    <table class="display" id="example">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Apple)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Orange)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Banana)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Avocado)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Peach)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Strawberry)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Plum)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Grape)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Tomato)
                </th>
            </tr>
        </thead>

        <tbody>
            @{
                var models = Model.ToList();
                for (var i = 0; i < models.Count; i++)
                {
                    <tr>
                        <td>
                            @Html.CheckBoxFor(modelItem => models[i].Apple)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Orange)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Banana)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Avocado)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Peach)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Strawberry)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Plum)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Grape)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => models[i].Tomato)
                        </td>
                    </tr>
                }
            }

        </tbody>
    </table>
</form>

如您所见，我复制并粘贴了 jquery code from the DataTables site 并没有真正更改任何内容。我碰壁了，因为我不确定如何使用 Razor 代码获取当前表并更改它以容纳隐藏的子行。我想保持我的设置。主要是为了避免很多不同的编码风格和语言都混乱起来。

这是我第一个使用 MVC 的项目，所以如果这个问题看起来有点琐碎，我很抱歉。

Answer 1

嗯，实际上做起来很简单，你只需要建立一个简单的表，我要做的是使用 responsive 扩展，它基本上可以完成子行（显示额外/详细信息）但代码更少：

@model IEnumerable<TableModel> <!--Our model-->
<!--We build our table-->
<table class="table table-condensed table-hover table-striped dt-responsive table-bordered">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Field1)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field2)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field3)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field4)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field5)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field6)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Field7)
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>

            <td>
                @Html.DisplayFor(model => item.Field1)
            </td>

            <td>
                @Html.DisplayFor(model => item.Field2)
            </td>

            <td>
               @Html.DisplayFor(model => item.Field3)
            </td>

            <td>
                @Html.DisplayFor(model => item.Field4)
            </td>

            <td>
                @Html.DisplayFor(model => item.Field5)
            </td>

            <td>
                @Html.DisplayFor(model => item.Field6)
            </td>

            <td>
                @Html.DisplayFor(model => item.Field7)
            </td>
        </tr>
    }
</tbody>

@section Scripts {
//Of course you will need to include your scripts of datatable and the styles
<script>
  $('.table').DataTable({ responsive: true });
</script>
}