将按钮的原始 html 从控制器传递到 jquery 数据表的列中答案

【问题标题】：Pass raw html for button into column of jquery datatable from controller将按钮的原始 html 从控制器传递到 jquery 数据表的列中
【发布时间】：2017-11-29 17:48:57
【问题描述】：

我有一个控制器，它返回一个通用的DataTable 给一个视图。我想将此表显示为jquery 数据表。其中一列中有一个 html 按钮，到目前为止只是一个字符串：

<button class='editbtn'>edit</button>

jquery 数据表显示它就像那样，而不是显示一个可点击的按钮。当我查看页面源代码时，我看到特殊字符已被转义：

<td>&lt;button class=&#39;editbtn&#39;&gt;edit&lt;/button&gt;</td>

我可以做些什么来将此显示作为一个按钮？请记住，我没有使用ajax，只是将DataTable 从控制器传递到视图，这是我视图中的表格：

<table id="onHandDataTable" class="display compact row-border cell-border hover tablefont">
            <thead>
        <tr>
            @foreach (DataColumn col in Model.Columns)
            {
                <th>@col.ColumnName</th>
            }
        </tr>
    </thead>
            <tbody>
                @foreach (DataRow row in Model.Rows)
                {
                    <tr>
                        @foreach (DataColumn col in Model.Columns)
                        {
                            <td>@row[col.ColumnName]</td>

                        }
                    </tr>
                }
            </tbody>
        </table>

这是用于数据表的 javascript：

$(document).ready(function () {
    var table = $('#onHandDataTable').DataTable({
        "iDisplayLength": 100,
        "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "oLanguage": {
            "sSearch": "Filter Results: ",
            "sLengthMenu": "Entries per page: _MENU_",
        },
    });

});

【问题讨论】：

"其中一列中有一个 html 按钮，" .所以你的数据有一个按钮的 html 标记？为什么？为什么不在剃刀表渲染代码中渲染按钮？
您可以使用Html.Raw，这样剃须刀就不会根据需要对 HTML 进行编码
是的，我的数据有一个按钮的 html 标记。我猜是因为我不知道该怎么做。
看不起 Html.Raw，谢谢
您可以将其设置为答案并将其标记为正确，它工作得很好，谢谢。不知道我是怎么到处找的，却从来没有发现。

标签： c# jquery asp.net-mvc razor datatables

【解决方案1】：

Html.Raw 是一个选项；我想知道为什么按钮首先在列中？如果您将其设置在控制器中，请不要；在整张桌子上使用 Html.Raw 可以打开 html 注入

相反，您可以在 .cshtml 中设置它，类似这样

            <tr>
                @foreach (DataColumn col in Model.Columns)
                {
                    <td>@row[col.ColumnName]</td>
                }
                <td><button class='editbtn'>edit</button></td>
            </tr>

.. 您可能还想在表格标题中添加一个 th。

【讨论】：