页面未按预期在 MVC 5 中呈现

Question

在长期使用 WebForms 之后，我开始使用 MVC，但一开始就碰壁了。

一些背景：我从一个空的 MVC 项目开始，因为我不希望我的生产应用程序充满了完整 MVC 项目附带的所有绒毛。但是，为了支持我的学习，我在解决方案中添加了一个完整的 MVC 项目，并复制了我认为对我想要完成的事情来说必要的 files/code。

首先，这是我想要的：

（这是从教程中找到的 here。）

但我得到的是：

根据，JQuery 和 Bootstrap 等包已弃用 NuGet。所以我安装了NodeJS和NPM，并在这里安装了这两个包：

然后我设置项目的预构建事件：

xcopy D:\Dev\Packages\node_modules\bootstrap\dist\css\*.* D:\MyApp\Styles\ /s /y
xcopy D:\Dev\Packages\node_modules\bootstrap\dist\js\*.*  D:\MyApp\Scripts\ /s /y
xcopy D:\Dev\Packages\node_modules\jquery\dist\*.*        D:\MyApp\Scripts\ /s /y

这样只有必要的文件才能进入我的管道。（可能有更好、更容易接受的方法，但这是我当时想到的。）

这是我的捆绑包注册：

Imports System.Web.Optimization

Public Module BundleConfig
  Public Sub RegisterBundles(Bundles As BundleCollection)
    Bundles.Add(New ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery.js"))
    Bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"))
    Bundles.Add(New StyleBundle("~/content/css").Include("~/Styles/bootstrap.css", "~/Styles/site.css"))
  End Sub
End Module

这是我的布局：

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

</head>
<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Application name", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>@Html.ActionLink("Home", "Index", "Home")</li>
          <li>@Html.ActionLink("About", "About", "Home")</li>
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        @*@Html.Partial("_LoginPartial")*@
      </div>
    </div>
  </div>
  <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
  </div>

  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  @RenderSection("scripts", required:=False)
</body>
</html>

（我已经注释掉了 _LoginPartial 依赖项，因为我现在不需要那部分。）

这是我的观点：

@Code
  Layout = "~/Views/Shared/_Layout.vbhtml"
End Code

@Code
  ViewBag.Title = "Index"
End Code

<h2>Index</h2>

<p>Hello from our View Template!</p>

...这是呈现的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - My ASP.NET Application</title>
    <link href="/Styles/bootstrap.css" rel="stylesheet"/>
    <link href="/Styles/site.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/Home/About">About</a></li>
            <li><a href="/Home/Contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container body-content">
      <h2>Index</h2>
      <p>Hello from our View Template!</p>
      <hr />
      <footer>
        <p>&copy; 2020 - My ASP.NET Application</p>
      </footer>
    </div>
    <script src="/Scripts/jquery.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
  </body>
</html>

页面的所有资源都正确加载：

我检查了布局文件中的所有 CSS 类并验证它们都存在于 boostrap.css 和 bootstrap.min.css.

中

似乎 Bootstrap 样式由于某种原因没有被应用，但我对此不是 100% 确定。

我很茫然。这里出了什么问题？我怎样才能开始追踪它？

Answer 1

我不知道为什么，但是当我关闭浏览器选项卡并在新选项卡中重新加载页面时，一切都按预期呈现。

页面未按预期在 MVC 5 中呈现

Page not rendering as expected in MVC 5

twitter-bootstrap

npm

asp.net-mvc-5