如何解决页面未按MVC 5中的预期呈现
在使用WebForms已有很长的历史之后,我才开始使用MVC,而我已经碰壁了。
一些背景:我开始时是一个空的MVC项目,因为我不希望我的生产应用程序充满整个MVC项目随附的所有内容。但是,为了支持我的学习,我在解决方案中添加了一个完整的MVC项目,并复制了我认为是我想要完成的必要文件/代码的文件。
首先,这是我的追求:
(这是从教程here中获得的。)
但是这是我要得到的:
根据this,对于诸如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","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>© @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>© 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样式,但我对此不完全确定。
我很茫然。这是怎么了我该如何开始追踪呢?
解决方法
我不知道为什么,但是当我关闭浏览器选项卡并将页面重新加载到新选项卡中时,所有内容都会按预期呈现。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。