Question

当在实体框架中使用jquery DataTable.js插件时，出现以下错误。已经进行测试，而没有来自实体的数据并且无法工作。

我遇到的另一个问题是，当我要在DataTable.js中使用此jquery功能时，我需要在子页面上进行声明，而当我在父页面上进行声明时，子页面无法识别。 / p>

女儿页面

<h2>Lista de Cidades</h2>

<br />
@if (Model.Message != null)
{
    <div class="alert alert-info alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-hidden="true">&times;</span>
        </button>
        @Model.Message
    </div>
}
<a asp-page="Create" class="btn btn-primary">Criar nova Cidade</a>
@if (Model.Cidades.Count() > 0)
{
    <form method="post">
        <div>
            <br />
            <table class="table table-condensed table-hover" id="minhaTabela">
                <tr>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Nome)
                    </th>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Estado)
                    </th>

                    <th></th>
                </tr>
                @foreach (var item in Model.Cidades)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(m => item.Nome)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Estado)
                        </td>

                        <td>
                            <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-success">Editar</a>

                            <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">Excluir</button>
                        </td>
                    </tr>

                }
            </table>
        </div>
    </form>
    <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script>

    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#minhaTabela').DataTable({
                "language": {
                    "lengthMenu": "Mostrando _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado",
                    "info": "Mostrando página _PAGE_ de _PAGES_",
                    "infoEmpty": "Nenhum registro disponível",
                    "infoFiltered": "(filtrado de _MAX_ registros no total)"
                }
            });
        });
    </script>

}
else
{
    <p>Nenhuma cidade encontrada.</p>
}

父页面上的声明：

<environment include="Development">

    <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/jquery-mask-plugin/src/jquery.mask.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
   <script src="~/lib/jquery-mask-plugin/src/jquery.mask.js" type="text/javascript" asp-append-version="true"></script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)

在这种情况下该怎么办？

Answer 1

<a asp-page="Create" class="btn btn-primary">Criar nova Cidade</a>
@if (Model.Cidades.Count() > 0)
{
    <form method="post">
        <div>
            <br />
            <table class="table table-condensed table-hover" id="minhaTabela">
	<thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Nome)
                    </th>
                    <th>
                        @Html.DisplayNameFor(m => m.Cidades.FirstOrDefault().Estado)
                    </th>

                    <th></th>
                </tr>
	<thead>
	<tbody>
                @foreach (var item in Model.Cidades)
                {
	
                    <tr>
                        <td>
                            @Html.DisplayFor(m => item.Nome)
                        </td>
                        <td>
                            @Html.DisplayFor(m => item.Estado)
                        </td>

                        <td>
                            <a asp-page="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-success">Editar</a>

                            <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">Excluir</button>
                        </td>
                    </tr>

                }
	</tbody>
            </table>
        </div>
    </form>
    <script src="~/lib/jquery/dist/jquery-3.2.1.min.js"></script>

    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
   
}

对于该错误，请尝试在html中设置thead和tbody

使用DataTable.js和实体时出错

1 个答案: