.NET MVC共享布局未生效且CSS样式失效技术求助

问题情况 #

我是.NET编程新手，在为博客页面应用Shared Layout时遇到问题：共享布局未生效，仅显示_Layout文件的文本内容，Blog.css样式也未加载。

项目文件结构 #

项目包含以下关键文件夹与文件：

• Shared文件夹：存放_Layout布局文件
• Content文件夹：存放Blog.css样式文件
• Accueil文件夹：存放Index视图文件

相关代码 #

1. Shared/_Layout文件代码 #

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title - Blog</title>
    <link rel="stylesheet" href="@Url.Content("~/Content/Blog.css")" type="text/css" />
</head>
<body>
    <header>
        <h1>Mon Blog ASP.NET MVC</h1>
        <ul id="navliste">
            <li class="premier"><a href="/Accueil/" id="courant">Accueil</a></li>
            <li><a href="/Accueil/About/">A Propos</a></li>
        </ul>
    </header>
    <div id="corps">
        @RenderBody()
    </div>
    <footer>
        <p>@DateTime.Now.Year - Mon Blog MVC</p>
    </footer>
</body>
</html>

2. Content/Blog.css代码 #

* {
    margin: 0px;
    padding: 0px;
    border: none;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FBF9EF;
    padding: 0px 6%;
}

header {
    float: left;
    width: 100%;
    border-bottom: 1px dotted #5D5A53;
    margin-bottom: 10px;
}

    header h1 {
        font-size: 18px;
        float: left;
        padding: 45px 0px 5px 0px;
    }

ul li a {
    font-size: 16px;
}

ul {
    list-style-type: square;
    margin-left: 25px;
    font-size: 14px;
}

footer {
    width: 100%;
    border-top: 1px dotted #5D5A53;
    margin-top: 10px;
    padding-top: 10px;
}

/* barre de navigation header */

ul#navliste {
    float: right;
}

    ul#navliste li {
        display: inline;
    }

        ul#navliste li a {
            border-left: 1px dotted #8A8575;
            padding: 10px;
            margin-top: 10px;
            color: #8A8575;
            text-decoration: none;
            float: left;
        }

        ul#navliste li:first-child a {
            border: none;
        }

        ul#navliste li a:hover {
            color: #F6855E;
        }

/* fin barre de navigation header*/

p {
    margin-bottom: 15px;
    margin-top: 0px;
}

h2 {
    color: #5e5b54;
}

header h1 a {
    color: #5E5B54;
}

a:link, a:visited {
    color: #F6855E;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #333333;
    text-decoration: none;
    font-weight: bold;
}

a:active {
    color: #006633;
    text-decoration: none;
    font-weight: bold;
}

3. Accueil/Index视图代码 #

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

解决步骤 #

• 指定视图引用布局：在Index视图的代码块中添加布局引用，修改后的代码如下：

  @{
      ViewData["Title"] = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  <h1>Index</h1>
  

  ASP.NET MVC默认会查找名为_Layout.cshtml的布局文件，但如果文件名或路径有偏差，必须显式指定。

• 确认布局文件后缀：确保Shared文件夹中的布局文件后缀为.cshtml，Razor视图引擎只识别该后缀的文件，否则无法解析其中的Razor语法（如@RenderBody()、@Url.Content()）。

• 验证CSS路径与文件属性：

  1. 可以简化CSS引用路径，将布局中的<link>标签改为：<link rel="stylesheet" href="~/Content/Blog.css" />，ASP.NET MVC会自动解析~为应用根路径。
  2. 检查Content文件夹下的Blog.css文件，右键文件选择“属性”，将“复制到输出目录”设置为“如果较新则复制”，确保文件能被正确部署到运行目录。

• 检查布局核心语法：确认_Layout文件中的@RenderBody()存在且位置正确，该方法负责将视图内容嵌入到布局中，缺失会导致视图内容无法显示。

内容的提问来源于stack exchange，提问作者Lorine Monfils