ASP.NET Core：加载Java依赖项时出现问题
[英]ASP.NET Core: Problems loading dependencies of Javascript
问题描述
The problem: 
问题：
I've been trying to resolve some issues with my dependencies of Javascript such as jQuery and bootstrap for my project. 我一直在尝试解决我的Javascript依赖项的一些问题，例如我的项目的jQuery和bootstrap。
However, at this moment, none of these are working properly. 但是，目前，这些都无法正常工作。
Diagnosis: 诊断：
All started with jQuery not being loaded working locally and I detected that it was because of the order of these componentes: bootstrap was being called before jQuery inside the _Layout file. 一切始于jQuery无法在本地工作，并且我检测到这是由于这些组件的顺序造成的：在_Layout文件中的jQuery之前调用了bootstrap。
For this, I made the following changes to my _Layout file: 为此，我对_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>© 2017 - Plataforma Fantasy Park</p>
</footer>
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
With this the error of 404: resource not found was over. 出现此错误404：找不到资源已结束。 However now the components are not working: Navbars, modals, and such. 但是，现在这些组件无法正常工作：导航栏，模态等。
This is an example of a View: 这是一个视图的示例：
@model IEnumerable<Application.Models.Store>
@using Application.Models
@{
ViewData["Title"] = "Index";
}
@Html.Partial("_NavBar")
@section scripts{
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/js/jquery-3.2.1.js">
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 = '@Url.Content("~/")' + "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>
}
<h2>Tiendas</h2>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create" data-target="#modal-action-store"
class="btn btn-primary">
<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>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.StoreName)
</td>
<td>
@Html.DisplayFor(modelItem => item.StoreAddress)
</td>
<td>
@Html.DisplayFor(modelItem => item.StoreArea)
</td>
<td>
@Html.DisplayFor(modelItem => item.Districts.DistrictName)
</td>
<td>
@Html.DisplayFor(modelItem => item.StoreChains.ChainName)
</td>
<td>
<div class="btn-group" id="modalbuttonedit">
<a id="editStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" asp-route-id="@item.StoreID" class="btn btn-info">Edit</a>
</div>
</td>
</tr>}
</tbody>
</table>
@Html.Partial("_Modal", new BootstrapModel
{
ID = "modal-action-store",
AreaLabeledId = "modal-action-store-label",
Size = ModalSize.Medium
})
Update: 更新：
In this View, if I take out this reference src="~/js/jquery-3.2.1.js" and leave it like this: 在此视图中，如果我删除此参考src="~/js/jquery-3.2.1.js"并保留如下：
@section scripts{
<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">
I get the error on the line for store-index.js: 我在store-index.js的行上收到错误：
Failed to load resource: the server responded with a status of 404 (Not Found).
This is the code for the Navbar called: 这是导航栏的代码，称为：
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<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 asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Plataforma Fantasy Park</a>
</div>
{...}
</div>
</nav>
I'm hoping to find some help and what might be wrong for these components to stop working. 我希望找到一些帮助，以及这些组件停止工作可能有什么问题。 What else can I check besides the _Layout? 除了_Layout之外，我还能检查什么？
Update: 更新：
Continuing with the validations this is the result of the Network Tab: 继续进行验证，这是“网络”选项卡的结果：
1 个解决方案
解决方案1
1 已采纳 2017-12-02 00:25:42
- There is a reference to jquery twice, once in your '_layout' and once in your view. 有两次引用jquery，一次在您的“ _layout”中，一次在您的视图中。 Only one in the layout should be required. 布局中仅需要一个。
- I cannot see a boostrap.css or boostrap.min.css file. 我看不到boostrap.css或boostrap.min.css文件。 You have one for datatables, one for 'lumen', but not the primary bootstrap css file (ie https://getbootstrap.com/dist/css/bootstrap.min.css ). 您有一个用于数据表，一个用于“流明”，但没有主引导css文件（即https://getbootstrap.com/dist/css/bootstrap.min.css ）。
- Looks like you have two bootstrap.js references too (once in layout and once near your navbar - again, only one should be required). 看起来您也有两个bootstrap.js引用（一次在布局中，一次在您的导航栏附近-再次，只需要一个）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.