Visual Studio 插件中的 jquery 數據表不起作用

Question

嘿，我正在嘗試在 Visual Studio 2019 中為我的代碼創建一個 jquery 數據表，但數據表不會顯示我已經成功安裝了“Install-Package bootbox”和“Install-Package jQuery.DataTables”，但是當我運行代碼時，數據表沒有出現。 我翻遍了整個網絡都沒有找到答案。 任何幫助，將不勝感激。

編輯：當我右鍵單擊“檢查”項目時，出現此錯誤：

jquery.dataTables.js:1197 Uncaught TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.js:1197)
    at Function.each (jquery-3.4.1.js:367)
    at jQuery.fn.init.each (jquery-3.4.1.js:202)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1194)
    at Function.each (jquery-3.4.1.js:367)
    at jQuery.fn.init.each (jquery-3.4.1.js:202)
    at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
    at jQuery.fn.init.$.fn.DataTable (jquery.dataTables.js:15172)
    at Index:153

捆綁配置文件

using System.Web;
using System.Web.Optimization;

namespace AuditoriskaMVC1
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/bootbox.js",
                      "~/Scripts/DataTables/jquery.dataTables.js",
                      "~/Scripts/DataTables/dataTables.bootstrap.js"
                    ));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/DataTables/css/dataTables.bootstrap.css"));
        }
    }
}

索引.html

@model IEnumerable<AuditoriskaMVC1.Models.Movie>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="moviesTable">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DownloadURL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ImagedURL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Rating)
            </th>
        
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    <a href="@item.DownloadURL">Download Here!</a>

                </td>
                <td>
                    <img style="max-width:200px" src="@item.ImagedURL" />

                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Rating)

                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>
</table>

@section  scripts{
     <script>
         $("#moviesTable").DataTable();
     </script>   
    
}

Answer 1

好吧，我想通了，但以防萬一其他人遇到這個問題，我會留下這篇文章。

解決辦法是桌頭和桌身需要有相同數量的

在這種情況下，表頭少了 1 個，因此即使您在 Visual Studio 中由於某種原因沒有收到任何錯誤，后台也會有一個，您只能在右鍵單擊並檢查頁面時才能看到它。 如果您在頭部或身體中的數量較少，則修復只是添加一個空的。