【问题标题】:Layout page and views conflict MVC5布局页面和视图冲突 MVC5
【发布时间】:2019-04-04 09:43:46
【问题描述】:

所以我刚刚第一次发布了一个网站,我遇到了一个问题。看起来 _Layout.cshtml 页面和视图相互冲突,因为它没有加载所有的 CSS 和 JS。我在控制台选项卡中收到一些错误,上面写着:

" HTML1503:意外的开始标签, HTML1512:不匹配的结束标记, HTML1506:意外的令牌。 "

当我转到发生错误的页面源时,布局和视图页面组合在一起,它在秒头标签处给出错误。第一个第一个 head 标签来自布局页面,第二个 head 标签来自视图页面。因此在 1 个页面中有 2 个 head 标签,它会发生冲突。

在发布之前我错过了什么吗?因为在 localhost 上运行良好,没有这些冲突。

希望有人可以帮助我,在此先感谢! :)

【问题讨论】:

  • 您必须在 Layout 中定义 head 标签的部分并在视图页面中使用它。例如在布局头标签@RenderSection("HeadTag", false) 中使用@section HeadTag { /*Some things...*/ }
  • 谢谢@EsatARSLAN 会尝试的:) 但是有一个问题,你说:“例如在布局头标签@RenderSection("HeadTag", false)”中,你为什么希望它在那里?我有一个样式表,用于布局页面而不是普通视图。那么我的布局页面将没有正确的 CSS。
  • RenderSection 第二个参数是必需的。如果需要,您可以定义为“true”,但如果设置为“true”并在视图页面中点定义 HeadTag,则会出现错误。您可以在布局头标签中添加样式表或js文件。

标签: html asp.net asp.net-mvc asp.net-mvc-5


【解决方案1】:

我建议您在使用 Razor 的布局页面上通读此 MSDN article

听起来你在重复你的标题信息。

从文章中,

许多网站都有显示在每个页面上的内容,例如 页眉和页脚,或一个告诉用户他们已登录的框。 ASP.NET 允许您创建一个带有内容块的单独文件,该文件可以 包含文本、标记和代码,就像普通网页一样。你可以 然后在您所在网站的其他页面中插入内容块 希望信息出现。这样你就不必复制和 将相同的内容粘贴到每个页面中。

换句话说,布局页面包含您希望在每个页面上重复的所有标记。这样,您不必手动重复。

一个内容页面可以有多个部分,如果您愿意,这很有用 使用具有可替换内容的多个区域的布局。在 内容页面,您给每个部分一个唯一的名称。 (默认 部分未命名。)在布局页面中,添加一个 RenderBody 方法来指定未命名(默认)部分应出现的位置。 然后,您添加单独的 RenderSection 方法以呈现命名 单独的部分。

由于每个页面可能有多个部分,您可以使用 RenderSection 方法在布局中区分它们。

这是文章中的一个示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <div>This content will repeat on every view that uses this layout.</div>
      @RenderSection("header", required: false)
    </div>
    <div id="main">
      @RenderBody()
    </div>
  </body>
</html>

如您所见,任何标题信息都将使用 RenderSection 方法加载。在您看来,您可以使用类似于以下的代码来定义该部分:

@section header {
  <div>
    This content will only repeat on the page that it is declared in.
  </div>
}

所以,当你运行它时,你会得到:

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <div>This content will repeat on every view that uses this layout.</div>
      <div>
         This content will only repeat on the page that it is declared in.
      </div>
    </div>
    <div id="main">
      ...
    </div>
  </body>
</html>

@RenderSection("header", required: false)required:false 部分意味着您不必在使用该布局的每个视图中都包含Section“标题”。它是可选的。如果您没有将 required 设置为 false,则需要在使用该布局的每个页面上声明它。

附带说明,请确保您仅在其中一个位置声明您的 css 和 javascript,如果要重复,最好是布局页面。然而,这并不意味着你不能同时拥有 css 和 javascript。例如,如果您在项目中使用引导程序,则应将其包含在布局页面中,这样您就不会在整个视图中重复包含。但是,例如,您可以仅在您的视图中而不是布局中包含视图特定的 javascript 文件。

【讨论】:

  • 感谢您的回答。但有一件事:“在旁注中,确保你只在其中一个位置声明你的 css 和 javascript,如果要重复,最好是布局页面。”,这正是问题所在,有些页面使用不同的 CSS .
  • 我对该部分添加了一些额外的解释。本质上,如果您希望它们在每个页面上重复,CSS 和 JS 应该只在布局上。如果页面使用不同的 CSS 和 JS,您将只包括页面上的内容而不包括布局。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-05-01
  • 1970-01-01
  • 2016-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多