个人中心
gpt4 book ai didi

javascript - ASP.NET核心: Problems loading dependencies of Javascript

转载 作者：行者123 更新时间：2023-12-03 02:56:14 25 4
gpt4 key购买 nike

问题:

我一直在尝试解决项目中 Javascript 依赖项的一些问题，例如 jQuery 和 bootstrap。

但是，目前这些都无法正常工作。

诊断:

一切都是从 jQuery 没有在本地加载开始的，我发现这是因为这些组件的顺序:bootstrap 在 _Layout 文件中的 jQuery 之前被调用。

为此，我对 _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>

至此，404:资源未找到的错误就结束了。然而现在这些组件无法工作:导航栏、模态框等。

这是 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
})

更新:

在此 View 中，如果我取出此引用 src="~/js/jquery-3.2.1.js" 并将其保留为这样:

@section scripts{

<script src="~/js/store-index.js" asp-append-version="true"></script>
<script type="text/javascript">

我在 store-index.js 线上收到错误:

Failed to load resource: the server responded with a status of 404 (Not Found).

这是导航栏的代码:

<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>

我希望找到一些帮助以及这些组件停止工作可能出现的问题。除了 _Layout 之外我还能检查什么？

更新:

继续验证，这是“网络”选项卡的结果:

enter image description here

最佳答案

  1. 有两次对 jquery 的引用，一次在您的“_layout”中，一次在您的 View 中。布局中只需要一个。
  2. 我看不到 boostrap.css 或 boostrap.min.css 文件。您有一个用于数据表，一个用于“流明”，但没有主 Bootstrap css 文件(即 https://getbootstrap.com/dist/css/bootstrap.min.css )。
  3. 看起来您也有两个 bootstrap.js 引用(一次在布局中，一次在导航栏附近 - 同样，只需要一个)。

关于javascript - ASP.NET核心: Problems loading dependencies of Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47602909/

25 4 0
文章推荐： javascript - jqGrid onCellSelect 从本地数据返回属性
文章推荐： macos - 在 macos 上用brew安装ant出错了？
文章推荐： python - 创建 numpy 数组时 dtype=object 是什么意思？
文章推荐： javascript - 为什么在计划开始新的一个月后月份开始增加？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com