脚本标签无法加载资源状态 404答案

【问题标题】：Script tags failed to load resource status 404脚本标签无法加载资源状态 404
【发布时间】：2019-03-16 15:31:41
【问题描述】：

我有一个 ASP.NET MVC 项目，在其中一个页面上我有以下代码，底部有一个脚本...

@model IEnumerable<PixelBox.Dtos.ItemGetDto>

@{
    ViewBag.Title = "Index";
}
<body>
    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    @foreach (var item in Model)
    {
        var dateString = item.DateListed.ToShortDateString();
        var imagePath = item.ImagePath.ToString() + ".png";



        <div class="card" style="width: 18rem; display:inline-block;">
            <img class="card-img-top" src="~/ItemImages/@imagePath" + alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"> @Html.DisplayFor(modelItem => item.Name) </h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Price:   @Html.DisplayFor(modelItem => item.Price)</li>
                <li class="list-group-item">Date Listed:  @dateString</li>
            </ul>
            <div class="card-body">
                <input type="button" value="Use Shipping Address" id="AddToBasket" />
            </div>
        </div>
    }
</body>
<script type="text/javascript" >
    $(document).ready(function () {

        function AddToBasket(id) {
            debugger;
        }

    })
</script>

但是，当它呈现时，它在 DEV 工具上显示它未能加载资源

我的布局页面中有以下代码...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

</head>

还有我的捆绑配置...

 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"));

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

我检查了文件的路径，它是正确的

【问题讨论】：

图片中的脚本缺少}) - 这也会导致控制台错误
这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。
@mplungjan 对不起，我发布了错误的代码，我现在重新编辑了干净的外观
仅供参考：在</body> 之后唯一允许出现的是</html>。将您的 <script> 放在 </body> 之前。
也没有与函数相同的ID或名称。您当前也没有执行该函数并且该函数为空

标签： javascript jquery asp.net-mvc razor

【解决方案1】：

你应该为你的页面添加布局

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

因为你在布局中有部分脚本，你应该把你的脚本移到里面。

@section scripts {
 <script>
    $(document).ready(function () {
        alert('ok?')
        function AddToBasket(id) {
            debugger;
        }
    })
</script>
}

【讨论】：