Changes in css file not reflecting in the view in ASP.NET MVC

Question

The changes I make in the css file are not reflecting in the view. The view remains the same. I thought this may be due to browser cache and tried refreshing with F5. Even then it doesn't work. I removed @Styles.Render("~/Content/css") from _Layout.cshtml and it removes the already remaining styles too. Therefore, I assume bundling works properly. What is wrong here? Just help me to turn the h1 in the Index.cshtml to red color.

site.css

.logo {
    margin: auto;
    width: 60%;
    padding: 10px;
 }

.nav.navbar-nav.navbar-right a {
    color: red;
}

#h {
    color:red;
}

h1 {
    color: red;
}

body {
    min-height: 100vh;
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: lightblue;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

portfolio-item {
   padding-bottom: 20px;
}

footer{
    height: 400px;
    background-color:blueviolet;
}

BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace diversity
{
    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js",
                      "~/Scripts/jsScripts.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.css",
                      "~/Content/site.css"));

        }
    }
}

_Layout.cshtml

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <img src="~/Images/logo.PNG" class="img-fluid" alt="Responsive image">
        <nav class="navbar container navbar-expand-md py-md-10">
            <a class="navbar-brand" id="x" href="#">theDiversity</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Ecosystems
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Species
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
                <ul class="nav navbar-nav ml-auto">
                    <li>
                        <a href="#" class="nav-link"><i class="fa fa-camera-retro fa-lg"></i></a>
                    <li>
                        <a href="#" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a>
                    <li>
                        <a href="#" class="nav-link"><i class="fa fa-pinterest fa-lg"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>



    <div class="container">


        <div>
            <main class="col-xs-11 p-l-2 p-t-2">
                <br/>
                @RenderBody()

            </main>
        </div>


    </div>


    <footer class="app-footer">
        <div>
            <a href="https://coreui.io">CoreUI</a>
            <span>&copy; 2018 creativeLabs.</span>
        </div>
        <div class="ml-auto">
            <span>Powered by</span>
            <a href="https://coreui.io">CoreUI</a>
        </div>
        <div>
            <a href="https://coreui.io">CoreUI</a>
            <span>&copy; 2018 creativeLabs.</span>
        </div>
        <div class="ml-auto">
            <span>Powered by</span>
            <a href="https://coreui.io">CoreUI</a>
        </div>
        <div>
            <a href="https://coreui.io">CoreUI</a>
            <span>&copy; 2018 creativeLabs.</span>
        </div>
        <div class="ml-auto">
            <span>Powered by</span>
            <a href="https://coreui.io">CoreUI</a>
        </div>   
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

    @model IEnumerable<diversity.Models.RSSFeed>
@{
    ViewBag.Title = "Home Page";
}

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="~/Images/bg1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="~/Images/bg1.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="~/Images/bg1.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<br/>

<div class="row">

    <!-- Blog Entries Column -->
    <div class="col-md-9">
        <h1 id="h">Heading01</h1>

        @{
            Html.RenderAction("RSSFeed");
        }

        <hr>

        <!-- Pagination -->
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </a>
            </li>
        </ul>
    </div>
    <br />

    <!-- Sidebar Widgets Column -->
    <div class="col-md-3">

        <!-- Search Widget -->
        <div class="card my-6">
            <h5 class="card-header">Search</h5>
            <div class="card-body">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>

        <!-- Categories Widget -->
        <div class="card my-4">
            <h5 class="card-header">Categories</h5>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6">
                        <ul class="list-unstyled mb-0">
                            <li>
                                <a href="#">Web Design</a>
                            </li>
                            <li>
                                <a href="#">HTML</a>
                            </li>
                            <li>
                                <a href="#">Freebies</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-6">
                        <ul class="list-unstyled mb-0">
                            <li>
                                <a href="#">JavaScript</a>
                            </li>
                            <li>
                                <a href="#">CSS</a>
                            </li>
                            <li>
                                <a href="#">Tutorials</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <div class="card border-success my-4">
            <div class="card-header">Header</div>
            <div class="card-body text-success">
                 <a class="card-title">hhhhhhhhhhhhhhhhh</a><br/><br/>
            </div>
        </div>

    </div>

</div>
<!-- /.row -->

try as he said ctrl +f5 or ctrl +shift+R if not try adding <style>h1#h{color:red}</style> — Nambi N Rajan
– Nambi N Rajan, Commented Oct 8, 2018 at 11:31
@PratheeshNambi I mentioned that for an example. I want to have this style in the site.css file. Currently from this file styles are loading in Edge browser and not in Chrome and Opera. I can't figure out why is this — Kabilesh
– Kabilesh, Commented Oct 8, 2018 at 13:13

Wisual Estudio · Accepted Answer · 2018-10-08 11:24:01Z

2

Just now tried. Works for me try CTRL+F5 in Google Chrome.

PS: Can't add it as a comment to your question due to low reputation

answered Oct 8, 2018 at 11:24

Wisual Estudio

236 bronze badges

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

3 Comments

Kabilesh Over a year ago

Styles are loading in Edge browser. But in Chrome and Opera even with CTRL + F5 styles are not loading. Why is this ??

Wisual Estudio Over a year ago

I would suggest you give a try as Pratheesh Nambi said to try inline styling.

Kabilesh Over a year ago

Please have a look at the reply for @Pratheesh Nambi's comment

Collectives™ on Stack Overflow

Changes in css file not reflecting in the view in ASP.NET MVC

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related