Search code examples
twitter-bootstrapnpmasp.net-mvc-5

Page not rendering as expected in MVC 5

I'm getting started with MVC after a long history with WebForms, and I've hit a wall right out of the gate.

Some background: I've started out with an empty MVC project, as I don't want my production application filled with all the fluff that comes with the full MVC project. But, to support my learning, I've added a full MVC project to the solution and copied over what I believe to be the necessary files/code for what I'm trying to accomplish.

First of all, here's what I'm after:

Expected

(This is from the tutorial found here.)

But here's what I'm getting instead:

Actual

According to this, the use of NuGet has been deprecated for packages like JQuery and Bootstrap. So I installed NodeJS and NPM and installed these two packages here:

enter image description here

I then set the project's pre-build event:

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

This is so only the necessary files make it into my pipeline. (There may be a better, more accepted way of doing this, but it's what I thought of at the time.)

Here's my bundle registration:

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

Here's my layout:

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

(I've commented out the _LoginPartial dependency, as I don't need that part right now.)

Here's my view:

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

@Code
  ViewBag.Title = "Index"
End Code

<h2>Index</h2>

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

...and here's the rendered 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>

All of the page's resources are loading correctly:

enter image description here

I went through all the CSS classes in my layout file and verified that they all exist in both boostrap.css and bootstrap.min.css.

It appears the Bootstrap styles aren't being applied for some reason, but I'm not 100% sure of this.

I'm at a loss. What's going wrong here? How can I begin to track this down?

Solution

  • I don't know why, but when I closed the browser tab and reloaded the page in a new tab, everything rendered as expected.