ASP.NET MVC login layout page not displaying CSS

Question

I have created a new login layout for my login page and cannot get the css file to link.

I have tried not using a layout page at all, using @{Layout = null} and rendering an entire HTML page (header tags...etc) and linking the CSS in the header tags and nothing. I have also moved the login.css link above the bootstrap link and it still isn't rendering any CSS. Now I have a LoginLayout with the CSS and bootstrap files linked in the header tags. Still nothing.

My bootstrap is rendering, but not my CSS. Can anyone help with linking the login.css file to _LoginLayout.cshtml?

_LoginLayout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title | Knowledgebase</title>
    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/login.css")" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
         @RenderBody()
    </div>
</body>
</html>

Login.cshtml View:

@model ITKnowledgebase.Models.LoginModel

@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
}


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="container">
        <div class="form-horizontal">
            <br>
            <img src="~/Content/Images/logo.png">
            <br> <br>
            <h2>Knowledgebase Sign In</h2>

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="pnlMain">
                <label class="sr-only">ID</label>
                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { placeholder = "ID", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
                <label class="sr-only">Username</label>
                @Html.EditorFor(model => model.Username, new { htmlAttributes = new { placeholder = "Username", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-danger" })
                <label class="sr-only">Password</label>
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { placeholder = "Password", @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
            <input type="submit" value="Sign In" class="btn btn-primary" id="btnSubmit" />
        </div>
    </div>
}
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>


    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    <hr />
    <footer>
        <p>&copy; | All rights reserved.</p>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

AccountController:

namespace ITKnowledgebase.Controllers
{
    public class AccountController : Controller
    {
        // GET: Account
        public ActionResult Login()
        {
            var login = new LoginModel();
            return View(login);
        }

        [HttpPost]
        public ActionResult Login(LoginModel login)
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Index", "Home", login);
            }
            return View(login);
        }
    }
}

I am expecting the background to turn blue as my login.css file includes:

body {
    font-size: 27px;
    background-color: lightblue;
}

Klyc Creative · Accepted Answer · 2019-05-28 00:20:39Z

2

1.Try giving the source like this:

Instead of this

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

Use this

 <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />

If you are using visual studio it will be better do drag and drop the css file so you'll be sure that the source is correct.

Try refreshing your site if you're not. ( Refresh with CTRL + F5 )
Instert !important after your attribute to overwrite the same attr in another css file. Like this

body { font-size: 27px !important; background-color: lightblue !important; }

answered May 28, 2019 at 0:20

Klyc Creative

1669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Reese Over a year ago

Wow, CTRL + F5 did the trick. I guess it was holding the cache of my previous tries. Thank you. I totally forgot how important it is to do a hard refresh when making changes. Also, +1 for the tip of dragging the CSS files. I didn't know you could do that.

Collectives™ on Stack Overflow

ASP.NET MVC login layout page not displaying CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related