将.net项目转换为使用布局后,页面顶部的空白区域

时间:2017-03-28 16:42:32

标签: asp.net asp.net-mvc asp.net-mvc-4 asp.net-mvc-3 razor

我最近改变了我的.net项目以使用母版页/布局页面。现在,当我的所有页面都被渲染时,在导航栏之前页面顶部有一些空间。

enter image description here

我在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:我刚刚注意到我的很多页面都有这样的间距和引号,所以它们可能来自布局文件,或者这些部分可能导致问题,但我不知道如何解决它

编辑:第二页实际上定义了布局页面要呈现的两个部分,实际上是其中的三个&#34;&#34;&#34;引号&# 34;&#34;&#34;

  • 在第一个renderSection(additionalStyles)
  • 的末尾
  • 由renderBody()
  • 放置的内容结尾处的一个
  • 和一个在renderSection(additionalScripts)放置的内容的末尾

这是一种模式吗?

3 个答案:

答案 0 :(得分:2)

看起来你的布局中有一个散乱的分号(;)。我会检查任何杂散或重复的分号的布局页面(例如,它们可能被错误地重复;;)。另请检查_ViewStart.cshtml文件。

答案 1 :(得分:2)

如果仔细观察,就会插入分号;

@RenderSection("additionalStyles", required: false);

@RenderBody();

您的代码在@RenderSection之后有不必要的分号,并且正在生成它们以供显示。删除它们和#34;空间&#34;走了。

请参阅https://docs.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c的第3节,了解分号的用法。

  
      
  1. 在块中,您以分号结束每个代码语句

         

    在代码块中,每个完整的代码语句必须以分号结尾。内联表达式不以分号结尾。

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

答案 2 :(得分:2)

我认为问题出在@RenderSection@RenderBody末尾的分号。那些不参加半决赛的人:

@RenderSection("additionalStyles", required: false)
@RenderBody()