ASP.NET Core：项目在线版出现 jQuery 错误 404答案

【问题标题】：ASP.NET Core: jQuery Error 404 for the online version of the projectASP.NET Core：项目在线版出现 jQuery 错误 404
【发布时间】：2017-12-02 06:36:29
【问题描述】：

问题：

最近我一直在修改我的项目中的 Javascripts 引用，因为它们在多个视图（_Layout 和视图之间）重复导致错误。

目前在本地工作时没有可见的错误，但是一旦项目在线（通过 Azure），错误 404: failed to load resource 将出现在脚本部分。

信息：

这是当前项目的_Layout：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8" http-equiv="content-type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Plataforma Fantasy Park</title>

    <environment names="Development">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/jquery.dataTables.min.js" asp-append-version="true"></script>
        <script src="~/js/dataTables.bootstrap.min.js" asp-append-version="true"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>


        <link rel="stylesheet" href="~/css/bootstrap-lumen.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="~/css/nestednavbar.css" />
        <link rel="stylesheet" href="~/css/dataTables.bootstrap.min.css" />
    </environment>

    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"
                asp-fallback-src="~js/jquery-3.2.1.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="~/js/site.min.js" asp-append-version="true"></script>

        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="/css/bootstrap-sand.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>





    @RenderSection("css", required: false)
</head>
<body>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Plataforma Fantasy Park</p>
        </footer>
    </div>

    @RenderSection("Scripts", required: false)
</body>
</html>

可以看出，Development 和 Staging,Production 环境都有 jquery 的引用，但为了这个项目的目的，我将只使用 Development 环境的引用。

但是，在在线版本中会出现此错误：

我遇到了这些错误，这通常是因为在视图中多次定义了 jQuery，或者在声明了诸如 bootstrap 之类的依赖项之后，但情况似乎并非如此。作为consecuence，在线版本上没有一个 jQuery 脚本可以正常执行。

这是网络选项卡的结果：

看起来 jquery 库正在正确加载。

以下代码是视图的源代码：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8" http-equiv="content-type" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index - Plataforma Fantasy Park</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/jquery.dataTables.min.js?v=qcV1wr-bn4NoBtxYqghmy1WIBvxeoe8vQlCowLG-cng"></script>
        <script src="/js/dataTables.bootstrap.min.js?v=X_58s5WblGMAw9SpDtqnV8dLRNCawsyGwNqnZD0Je_s"></script>
        <script src="/js/site.js?v=ViqmmChOp_51fH3dM_KEQAFClKU0vp0UrxlREwyHKHc"></script>

        <link rel="stylesheet" href="/css/bootstrap-lumen.css" />
        <link rel="stylesheet" href="/css/site.css" />
        <link rel="stylesheet" href="/css/nestednavbar.css" />
        <link rel="stylesheet" href="/css/dataTables.bootstrap.min.css" />    

</head>
<body>

    <div class="container body-content">


<nav class="navbar navbar-inverse navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Plataforma Fantasy Park</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                                    <li><a href="/HechosLiquidadors/IndexAdmin">Liquidaciones</a></li>
                                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Máquinas <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-item" tabindex="-1">Registro</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-item"><a tabindex="-1" href="/Machines">Datos Comerciales</a></li>
                                <li class="dropdown-item"><a tabindex="-1" href="/Machines/Workshop">Datos de Fabricación</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li><a href="/Machines/Familias">Familias y Tipos</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-item" tabindex="-1">Gestión</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-item"><a tabindex="-1" href="/Machines/Management">Máquinas</a></li>
                                <li class="dropdown-item"><a tabindex="-1" href="/Machines/Contadores">Contadores</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Tiendas <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/Stores">Registro</a></li>
                        <li class="divider"></li>
                        <li><a href="/Stores/Management">Liquidadores</a></li>
                    </ul>
                </li>
                                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Proveedores <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/Suppliers/Supplier">Fabricantes y Marcas</a></li>
                        <li><a href="/Suppliers/Dealer">Dealers</a></li>
                    </ul>
                </li>
                                <li><a href="/">Gastos</a></li>
                                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Usuarios <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/User">Usuarios</a></li>
                        <li><a href="/ApplicationRole">Roles</a></li>
                    </ul>
                </li>
                <li><a href="/Home/About">About</a></li>
            </ul>


    <form method="post" id="logoutForm" class="navbar-right" action="/Account/SignOff">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a title="Manage" href="/Manage">Hello adelgado!</a>
            </li>
            <li>
                <button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
            </li>
        </ul>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8P12Ot7bDOBImhnZFhlI8qHJtKdMI-7lr8LhbUsd_y-3eQSYnYA19_MyhKx_JGsHcwdpm_ZQCqHibSVsLLwXaJ-PRiZg6VJXvFUtHaAK6IAPSBfOgrVrEBeimgbOvB60ahTqLMUeuUsFEXIIrmYiyBgxQVeQJEkPBbIEsMlFv-8A91-ULjKZlim2P0NZaUuLSA" /></form>

            </div>
        </div>
</nav>




<h2>Tiendas</h2>

<div class="btn-group" id="modalbutton">
    <a id="createEditStoreModal" data-toggle="modal" data-target="#modal-action-store" class="btn btn-primary" href="/Stores/Create">
            <i class="glyphicon glyphicon-plus"></i>  Nueva Tienda
        </a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>
                Tienda
            </th>
            <th>
                Dirección
            </th>
            <th>
                Área
            </th>
            <th>
                Distrito
            </th>
            <th>
                Cadena
            </th>
            <th>Editar</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


<div aria-hidden="true" aria-labelledby="modal-action-store-label" role="dialog" tabindex="-1" id="modal-action-store" class="modal fade">
    <div class="modal-dialog ">
        <div class="modal-content">
        </div>
    </div>
</div>


        <hr />
        <footer>
            <p>&copy; 2017 - Plataforma Fantasy Park</p>
        </footer>
    </div>


<script src="/js/store-index.js?v=xMseET7-q434oUXfBjpd5QKjSw8t0R0P_mGdZorHwB0"></script>
<script type="text/javascript">

    var global = this;
    var wasclicked = 0;

    $(document).ready(function () {

        document.getElementById("modalbutton").onclick = function () {
            global.wasclicked = 1;
        };

        $('#modal-action-store').on('hidden.bs.modal', function () {
            global.wasclicked = 0;
        });

        $('#modal-action-store').on('shown.bs.modal', function () {
            if (global.wasclicked == 1) {
                var items = "<option value='0'>-- Seleccione Distrito --</option>";
                $('#DistrictID').html(items);
            }
            $('#DepartmentID').change(function () {
                var url = '/' + "Stores/GetDistrict";
                var ddlsource = "#DepartmentID";
                $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                    var items = '';
                    $("#DistrictID").empty();
                    $.each(data, function (i, district) {
                        items += "<option value='" + district.value + "'>" + district.text + "</option>";
                    });
                    $('#DistrictID').html(items);
                });
            });
        });
    });
</script>


</body>
</html>

我一直在尝试检测在线版本可能出现的问题，以产生一些在本地测试项目时未显示的错误，但我没有成功尝试找出。希望任何人都可以帮助我了解在这种情况下可能出了什么问题。

更新：

对于我的测试，jQuery 似乎工作了几秒钟，然后突然停止工作，但没有显示与此相关的错误消息。

需要注意的是，错误信息也会出现在 html 的顶部：

但这可能与缺少这些文件的事实有关：

【问题讨论】：

如果您在浏览器中按 f12 并转到网络选项卡。你能确认加载 jquery 库时的 404 吗？或者发布生产版本的网址。
@JPHellemons 你好。我刚刚添加了网络选项卡结果的屏幕截图。这是一个需要用户名和密码的项目，但如果您需要其他信息，请告诉我。谢谢！
这是本地版的截图吗？还是生产？因为 jquery.min.js 有一个 200（ok）
生产，是的，这似乎很好。我开始怀疑 store-index.js 中包含的脚本是否可以，只是因为我不知道在哪里看
如果它对任何事情都有帮助，只是提到错误消息也出现在html页面的顶部i.imgur.com/rL4OEIx.png

标签： jquery twitter-bootstrap azure asp.net-core-mvc

【解决方案1】：

为什么不只使用布尔变量？

而不是

var global = this;
var wasclicked = 0;

类似这样的：

var isClicked = false;

$(document).ready(function () {

    $("#modalbutton").on("click", function () {
        isClicked = true;
    });

    $('#modal-action-store').on('hidden.bs.modal', function () {
        isClicked = false;
    });

    $('#modal-action-store').on('shown.bs.modal', function () {
        if (isClicked) {
            var items = "<option value='0'>-- Seleccione Distrito --</option>";
            $('#DistrictID').html(items);
        }
        $('#DepartmentID').change(function () {
            var url = '/' + "Stores/GetDistrict";
            var ddlsource = "#DepartmentID";
            $.getJSON(url, { DepartmentID: $(ddlsource).val() }, function (data) {
                var items = '';
                $("#DistrictID").empty();
                $.each(data, function (i, district) {
                    items += "<option value='" + district.value + "'>" + district.text + "</option>";
                });
                $('#DistrictID').html(items);
            });
        });
    });
});

【讨论】：

你好 JP。经过一些尝试，我相信导致 jQuery 无法正常工作的原因是代码的某些部分可以改进，并且这个错误分散了我们对其他问题的注意力，我在这里详细介绍了 stackoverflow.com/questions/47611622/…