ASP.NET Core:项目的在线版本的jQuery错误404 [英] ASP.NET Core: jQuery Error 404 for the online version of the project
问题描述
问题:
最近，我一直在修改项目中的Javascript引用，因为它们重复出现在多个视图中(在_Layout和视图之间)会导致错误.
Recently I've been modifying my Javascripts references in my project since they were repeting in several views (between the _Layout and views) causing errors.
此刻，在本地工作时没有可见的错误，但是一旦项目联机(通过Azure)，则在脚本部分显示错误404:无法加载资源.
At this moment there are no visible errors while working locally but once the project is online (thru Azure) the error 404: failed to load resource appears in the scripts section.
信息:
这是项目的当前_Layout:
This is the current _Layout of the project:
<!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>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
可以看出，Development和Staging,Production环境都具有jquery的引用，但是出于本项目的目的，我将仅使用Development环境的引用.
As it can be seen, both the Development and Staging,Production enviroments have the references for jquery but for the purpose of this project I'll be working only with the references of the Development enviroment.
但是，在在线版本中会显示此错误:
However, in the online version this errors show up:
我有这些错误，通常是因为在视图中多次定义了jQuery，或者在声明了诸如bootstrap之类的依赖项之后，但似乎并非如此.作为一种安全性，所有jQuery脚本都无法在在线版本上正确执行.
I had these errors and it usually was because the jQuery was defined more than once in the view, or after a dependency such as bootstrap was declared, but this does not seem the case. As a consecuence none of the jQuery scripts is executing properly on the online version.
这是网络"标签的结果:
This is the result of the Network tab:
jquery librery似乎已正确加载.
It looks like the jquery librery is being loaded correctly.
以下代码是视图的源代码:
The following code is the source code of the view:
<!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>© 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>
我一直在尝试检测在线版本可能出了什么问题，从而产生一些错误，这些错误在本地测试项目时未显示，但我没有成功地找出来.希望任何人都可以帮助我了解在这种情况下可能出什么问题.
I have been trying to detect what could be wrong for the online version to produce some errors that were not shown while the project was tested locally but I haven't succeeded in trying to find out. Hope anyone can help me understand what could be wrong in this case.
更新:
对于我进行的测试，似乎jQuery可以工作几秒钟，然后突然停止工作，但没有显示与此相关的错误消息.
For what I tested, it seems like jQuery works for a few seconds and then suddenly stops working but no error message related to this is displayed.
请注意，错误消息也出现在html的顶部:
Note to mention, the error message appears at the top of the html too:
但这可能与缺少这些文件有关:
But that can be related to the fact that is missing these files:
推荐答案
为什么不只使用布尔变量?
Why not just use a boolean var?
代替
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);
});
});
});
});
这篇关于ASP.NET Core:项目的在线版本的jQuery错误404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
