将.net项目转换为使用布局后的页面顶部的空白区域
我最近将我的.net项目更改为使用母版页/布局页面。现在,当我的所有页面都被渲染时,在导航栏之前的页面顶部有一些空间。将.net项目转换为使用布局后的页面顶部的空白区域
我检查该网页在Chrome中,有在机身顶部一些空行情,删除那些在检查解决了这个问题。但我无法理解它们来自哪里?这是我的索引的页面结构。
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "my title";
}
<!--HERO IMAGE-->
<div>
//index page's code comes here
</div>
@section additionalStyles{
//adding external stylesheets
}
我在我的索引页面中使用渲染部分来加载一些样式表,在其余页面中没有用。这些会在布局页面的结束标记之前加载,如下所示:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<!-- All STYLESHEETS ARE ADDED AT THIS PLACE-->
@RenderSection("additionalStyles", required: false);
</head>
<body>
<div class="navbar">
//navbar's code comes here
</div>
@RenderBody();
<!-- FOOTER -->
@RenderSection("additionalScripts", required: false);
<!-- ALL SCRIPTS ARE ADDED HERE-->
</body>
</html>
什么可能导致引号?
PS:我刚刚注意到我的许多网页都得到那个间距和引号所以他们可能是从布局文件即将或可能这些部分导致了问题,但我不知道究竟如何解决呢
编辑:第二页实际上定义了布局页面要呈现的两个部分,实际上是获取其中三个“”“引号”“”。
- 在第一renderSection的端部(additionalStyles)
- 一个在()放置在由renderBody内容的端
- 和一个在位于由renderSection内容的端部(additionalScripts)
这是一些模式?
如果仔细观察它会插入分号;
。
@RenderSection("additionalStyles", required: false);
@RenderBody();
您的代码在@RenderSection
之后有不必要的分号,正在生成它们供显示。删除它们,“空间”消失。
请参阅https://docs.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c的第3部分以了解分号的用法。
开始=“3”>
里面一个块,就以分号结束
里面一个代码块中的每个代码语句,每一个完整的源代码语句必须以分号结束。内联表达式不以分号结尾。
<!-- Single-statement block -->
@{ var theMonth = DateTime.Now.Month; }
<!-- Multi-statement block -->
@{
var outsideTemp = 79;
var weatherMessage = "Hello, it is " + outsideTemp + " degrees.";
}
<!-- Inline expression, so no semicolon -->
<p>Today's weather: @weatherMessage</p>
它看起来像你在布局中有一个杂散的分号(;)。我会检查布局页面是否有任何杂散或重复的分号(例如,它们可能会被错误地重复;;)。同时检查_ViewStart.cshtml文件。
我相信这个问题是在你@RenderSection
S和@RenderBody
结束分号。那些不采取半决赛:
@RenderSection("additionalStyles", required: false)
@RenderBody()
请提供更多的代码。 –
我也添加了布局页面的结构。 –
也许会添加Chrome检查器的屏幕截图,以便我们可以看到引号的插入位置。 – sleeyuen