时间戳

首页 > 解决方案 > ASP.Net Core 项目找不到它的 Javascript 文件

asp.net - ASP.Net Core 项目找不到它的 Javascript 文件

问题描述

我正在使用 Visual Studio 2019 和 Win10完成“The Little ASP.Net Core Book” 。该项目设置为为 w64 构建。我以调试模式将其构建为可执行文件并从命令窗口运行该文件。我没有使用“dotnet”命令运行它。

我已经了解了我的程序使用我的数据库来填充屏幕的情况，我可以使用该屏幕将新项目添加到我的数据库中。每个项目都以自己的小形式显示，带有它的名称和一个复选框。项目的下一步是为每个复选框提供一个事件处理程序，而不是为数据库中的每个项目都有一个“提交”按钮，这真的很笨重。这是我应该使用的 Javascript 文件。它被命名为 site.js，它位于我项目的 wwwroot/js 中。

$(document).ready(function () {
    // Wire up all of the checkboxes to run markComnpleted()
    alert("Document ready function");
    $('.done-checkbox').on('click', function (e) {
        markCompleted(e.target);
    });
});

function markCompleted(checkbox) {
    alert("Mark completed function.");
    checkbox.disabled = true;
    var row = checkbox.closest('tr');
    $(row).addClass('done');
    var form = checkbox.closest('form');
    form.submit();
}

我添加了警报调用，以便我可以看到这个脚本实际上正在执行。首次生成网页时应出现“文档就绪功能”消息，单击复选框时应出现“标记已完成功能”。两条消息都没有发生。我猜我错过了一个告诉网页使用这个脚本的步骤（或者教程错过了一个步骤）。这是 Index.cshtml 文件：

<!DOCTYPE html>

@model ToDoViewModel
@using Humanizer 

@{
    ViewData["Title"] = "Manage your ToDo list";
}

<div class="panel panel-default todo-panel">
    <div class="panel-heading"> @ViewData["Title"]</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <td>&#x2714;</td>
                <td>Item</td>
                <td>Due</td>
            </tr>
        </thead>

        @foreach (var item in Model.Items)
        {
            <tr>
                <td>
                    <form asp-action="MarkDone" method="post">
                        <Input type="checkbox" class="done-checkbox" />
                        <input type="hidden" name="id" value="@item.Id" />
                    </form>
                </td>
                <td>@item.Title</td>
                <td>@item.DueAt.Humanize()</td>
            </tr>
        }
    </table>

    <div class="panel-footer add-item-form">
        @await Html.PartialAsync("AddItemPartial", new ToDoItem()) 
    </div>
</div>

在定义页面的页脚之后，我的布局文件最后指定了文件。以下是相关行：

<script src="/lib/jquery/dist/jquery.min.js"></script> 
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js"></script>

我的布局文件 shared/_layout.cshtml 以这个结尾：

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

当我运行我的程序并尝试使用https://localhost:5001/todo并打开 DevTools 时，它显示我的程序查找 Javascript 文件的所有尝试都导致了 404（未找到）错误。当我将鼠标悬停在 DevTools 网络选项卡上的名称 site.js 上时，工具提示会显示完整的文件名https://localhost:5001/js/site.js。

Reddit 上一位乐于助人的人说，所有这些看起来都是正确的。为什么它不起作用？你还需要我给你看什么？

在我发布上述内容后，我在 Microsoft Edge 中进行了尝试。那里的 DevTools 告诉我我有第二条 DOCTYPE 行。页面源向我展示了这一点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manage your ToDo list - AspNetCoreTodo</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" href="/">AspNetCoreTodo</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a href="/ToDo">My ToDos</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <!DOCTYPE html>

我的 _layout.cshtml 文件有这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - AspNetCoreTodo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">AspNetCoreTodo</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a asp-controller="ToDo" asp-action="index">My ToDos</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

因此，看起来对 RenderBody() 的调用不起作用。我在我的项目中没有看到该方法的定义。它是我需要自己写的东西，还是应该自动生成？

我被要求提供 csproj 文件。这里是：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Humanizer" Version="2.7.9" />
    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.1.3">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.1" />
  </ItemGroup>

  <ItemGroup>
    <Folder Include="Data\" />
  </ItemGroup>

  <ItemGroup>
    <None Include="Views\ToDo\AddItemPartial.cshtml" />
  </ItemGroup>



</Project>

标签： asp.netasp.net-core

解决方案

推荐阅读