Question 335813 in Html Question posted in
Some basic documentation can be found here.

Html – I don't understand why my layout doesn't show

I’m new to .NET programming and I’m having trouble applying a Shared Layout to a blog page.

My project contains the following files:
enter image description here

I’ve created a file named _Layout in the Shared folder, which contains the following code:

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

And the file Blog.css contains the following code:

* {
    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;
}

I’m trying to display the Index view from the Accueil folder, which contains the following code.

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

<h1>Index</h1>

Unfortunately, the previously defined layout isn’t being applied, and I only see the text of the _Layout file but without the style of the Blog.css,

Can you help me ?

Tags:

2

Answers


  1. 0

    You can use F12 to see if any error in the console tab.
    it shows:
    enter image description here

    If you want to serve Blog.css outside of web root, want it in the Content folder, you can try to add access the Blog.css file by configuring the Static File Middleware in Program.cs as follows:

    app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
           Path.Combine(builder.Environment.ContentRootPath, "Content")),
    RequestPath = "/Content"
});

    result:

    enter image description here
    Note add the layout in the Index like:

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

    Or try to add Blog.css into the wwwroot css folder , then change below :

    <link rel="stylesheet" href="@Url.Content("~/Content/Blog.css")" type="text/css" />

    into:

    <link rel="stylesheet" href="~/css/Blog.css" asp-append-version="true" />
    Login or Signup to reply.
  2. 0

    If you’re using multiple layouts, i think this could help you:

    @{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = "Page Title";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search