ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped.

Each day, when I begin writing new HTML code, everything appears to be functioning correctly - dotnet watch run is running smoothly, and inline styling is being applied as expected. But as soon as I make changes to site.css, those modifications are not being recognized for some reason. It's puzzling because sometimes the issue resolves itself out of the blue (quite weird, but I'll take it). For instance, yesterday I was unable to update the CSS until I launched the project in JetBrains Rider, yet today it stopped working again. On another occasion, the problem disappeared when I wasn't even using my computer (strange, right?). Have any insights on what might be happening or how to resolve this hiccup? My attempts at finding answers through Google have been unfruitful so far.

P.S. Despite updating my JetBrains IDE to the latest version, the situation remains unchanged.

css.netasp.net-mvcbootstrap-4rider

Answer №1

The issue is related to browser caching. To solve this, you can add a random number or GUID at the end of your CSS file link like this: 

<link rel="stylesheet" href="style.css?v=5.2.7">
Make sure the version number is generated randomly. Before making this change, you may also want to clear your cache or do a hard reload of the page to see the updates.

For more information, check out : https://css-tricks.com/strategies-for-cache-busting-css/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to ensure uniformity in the appearance of all images with MVC Image Handling?

I'm currently developing an MVC 4 application that allows users to upload images. These uploaded images are then displayed in a different view. Users can upload images up to 10MB in size, which are then resized to 800 x ? pixels using the WebImage (Sy ...

cssimageasp.net-mvc-4

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

htmlcssangularangular-materialangular7

What is the best way to choose a single li element?

I am working on creating a reservation system using HTML, CSS, and JS. I want to customize the color of the border for each list item (li). However, I want only one li to be selected at a time. When I click on a different li, it should remove the selection ...

javascripthtmlcssarrays

What could be causing the Selenium web driver to crash while trying to navigate?

Situation : For our ASP.NET MVC application, we decided to run integration tests using Selenium's Web Driver. Issue : Upon running the tests in VS2015 with Internet Explorer Driver, an error message appears on the console (refer to screenshot below ...

c#asp.net-mvcseleniumtesting

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

htmlcss

Text stretched to its fullest height and rotated using the transform property

check out the demo Here is a demonstration of HTML elements: <div class="controller"> <div><a href="#buttton-1">Special Offer</a></div> </div> And here is the styled CSS for the demo: .controller{ width: 55px; ...

htmlcsstransform

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={this.someFunction} options={som ...

javascripthtmlcssreactjssvg

Placing a background image behind the text of an <a> tag

I am wondering if it is possible to change the position of a background-image without affecting the text in a link. <a href="#" style="background-image: url('bg.png')">text</a> Can the background-image be moved independently of ...

htmlcss

Unveiling concealed content with JQuery

Here is a link to my pen: http://codepen.io/anon/pen/IszKj I am looking to achieve the functionality where clicking on either "any status" or "any date" will reveal a hidden div containing a list of options. My main query is about the best approach to ta ...

javascriptjqueryhtmlcss

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...

javascriptjqueryhtmlcss

Position the larger element in the center of the smaller container element

Is there a way to center an image without it covering up the paragraph below? Using position: absolute; or float: left; can lead to layout issues. <p>This is the first paragraph</p> <p><img src="http://placekitten.com/600/280"/>&l ...

htmlcss

When the height of the window decreases, scrolling is not implemented

Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...

htmlcssmaterial-uifrontend

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Toggle JavaScript Query Display

Welcome to my HTML test website where I am testing show/hide JavaScript functionality. Upon loading the page, you may notice that everything is hidden until a button is clicked. <html> <head><title>Test</title> <scr ...

javascripthtmlcss

Using Ajax.BeginForm with BeforeSend functionality

My MVC website has multiple Ajax.BeginForm elements, and I am looking to handle the beforeSend event of my Ajax calls. While the code below works for manual jquery ajax calls, it does not seem to work with the Ajax.BeginForm helpers: $.ajaxSetup({ &a ...

javascriptjqueryajaxasp.net-mvc

Schedule Keeper for ASP.NET MVC

Currently, I am immersed in a project that centers around events. These events will have start dates stored in SQL SERVER through Entity Framework. As part of the frontend design, I aim to emphasize the event dates prominently. My preference is not to util ...

jqueryajaxasp.net-mvccalendar

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

javascriptcsseventsvue.js

Align Bootstrap list items vertically

I'm facing a challenge with aligning the yellow list item blocks vertically in my design. The issue arises because the black dog item is not aligning properly due to its image being shorter than the other two blocks. I've been struggling to find ...

htmlcss

Some of the picture remains concealed without spilling over

I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...

cssimage

"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...

javascriptjqueryhtmlcss