Combining Versioning with BundleConfig.cs: A Comprehensive Guide

Encountering a recurring issue where changes made to CSS or Javascript files do not reflect in client browsers unless they manually refresh the page with ctrl+F5. This poses a challenge, especially in a school system with numerous users who may not be aware of when updates are made and how to refresh their browsers.

Research suggests appending a version number like "java.js?v=1.0" at the end of the file to address this caching problem. However, implementing this solution within bundling has proven tricky. Adding the version parameter in the .cs config file leads to missing references after deployment.

Here's an example of bundled files:


bundles.Add(new ScriptBundle("~/bundles/utilitiesJs").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.dynatable.js",
"~/Scripts/js-cookie.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-multiselect.js",
"~/Scripts/bootstrap-toolkit.min.js",
"~/Scripts/common.js?v=1.0",
"~/Scripts/dropdown.js?v=1.0",
"~/Scripts/waitingFor.js",
"~/Scripts/analytics.js"));

While I've added "?v=1.0" to common.js and dropdown.js, these files are mysteriously absent in the Page Source post-deployment:

<script src="/DMC/Scripts/jquery-3.1.1.js"></script>
<script src="/DMC/Scripts/jquery.dynatable.js"></script>
<script src="/DMC/Scripts/js-cookie.js"></script>
<script src="/DMC/Scripts/bootstrap.js"></script>
<script src="/DMC/Scripts/bootstrap-multiselect.js"></script>
<script src="/DMC/Scripts/bootstrap-toolkit.min.js"></script>
<script src="/DMC/Scripts/waitingFor.js"></script>
<script src="/DMC/Scripts/analytics.js"></script>

If anyone can shed light on what might be going wrong here, whether it involves renaming the common and dropdown files or another approach entirely, your assistance would be greatly appreciated!

Answer №1

Perhaps you haven't considered the option of disabling caching at the page level, or adjusting the cache window to a smaller size - although it may not be the most efficient solution.

In addition, if both your browsers and server are compatible, HTTP/2 could greatly benefit in your controlled environment. Features like bundling would no longer pose an issue.

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

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...

Steps to transfer text from one input field to another by clicking a button using JavaScript

Hello, I am new to Javascript so please forgive me if my question seems silly. I have been tasked with creating a form containing two input fields and a button. When the button is clicked, the text entered in the first field should move to the second field ...

What could be causing the issue with this basic THREE.js javascript particle system?

{/*I'm not sure if there are any errors in this code. I'm using the latest version of Chrome for testing purposes. Previously, I created a similar program that displayed a wireframe cube without any issues. It ran smoothly at that time. However, ...

Fetching the jquery variable within an HTML document: A step-by-step guide

Here is the content of my check.js JavaScript file, which includes a function: function fun2(userid) { $.ajax({ type: 'POST', url: 'ex.php', data: {userid: userid}, success: function (data) { ...

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...

Select a specific division element using a pseudo element

My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div n ...

Place the emoji where the cursor is located

My query was already posted on stack overflow but unfortunately, I did not receive a response. The issue revolves around 2 links named "add emoji 1" and "add emoji 2". As mentioned earlier, my question can be accessed here: Insert smiley at cursor positio ...

Having trouble setting $scope after redirecting to a partial template via routing

Looking to create a website that loads all necessary templates upon the initial visit. Currently, I only have one partial template but plan to add more in the future. Despite having just this one template, I'm struggling with binding the data from my ...

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

Collapse in Bootstrap without any Animation

How can I add animation to the Bootstrap Collapse feature on my website? I am using an icon from the Font Awesome library to trigger the collapse effect, but currently, it just pops up without any animation. What could be causing this issue? You can view ...

What are the limitations when using React's forwardRef with Material UI's styled components?

While working with forwardRef and styled, I encountered a strange issue : "React Hook ... cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function." Here is an example: import { styled } ...

Incorporate data from a CSV file into an HTML table on the fly with JavaScript/jQuery

I have a CSV file that is generated dynamically by another vendor and I need to display it in an HTML table on my website. The challenge is that I must manipulate the data from the CSV to show corrected values in the table, only displaying products and not ...

Mapping JSONP responses for jQuery UI autocomplete

Attempting to implement jqueryUI autocomplete. After alerting the response, it shows: ([ { "id": "test", "label": "test", "value": "test" } ]); However, when trying to map the result, the dropdown remains empty. Here is the code being used: <script> ...

How to use Ionic 3 to automatically scroll ion-scroll content all the way to the bottom

My ion-scroll component is experiencing some challenges <ion-scroll scrollY="true" style="height: 52vh;"> {{ text }} </ion-scroll> The content inside the ion-scroll keeps expanding, exceeding the designated height. Users can manually scroll ...

Vertically align the left div in the center, while maintaining the standard alignment of the right div

I have been experimenting with Bootstrap 4 and attempting to implement the Vertical alignment feature as outlined on the webpage: https://getbootstrap.com/docs/4.0/layout/grid/ Despite reviewing my code multiple times, I am unable to identify the mistake ...

Incorrect rendering of the <li> tag

I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...

The process of inserting data using NextJS Mysql works seamlessly when executed through phpMyAdmin, however, it encounters issues when

My SQL query works perfectly in phpmyadmin, but I'm encountering an issue when making a request from the API. The API uses the MySQL package which was installed using: npm i mysql This is the SQL code that is causing the problem: BEGIN; INSERT INTO A ...

Steps to creating a nested function

I'm still learning the ropes of Javascript, and I've been working on creating a personal library to streamline my coding process. Here's the code snippet I've come up with. function myLibrary() { let _this = this; this.addString = ...

Tips on accessing a browser cookie in a Next.js API endpoint

I've set a cookie in the layout.js component and it's visible in the browser. Now, I need to be able to retrieve that cookie value when a post request is made to my API and then perform some action based on that value. Despite trying different ...

Guidelines for executing a Vue directive when the page is initially loaded

I am iterating through an array of objects containing map svg paths and locales, and I want to execute a function on load. The function needs to take the locale keys from the paths array as a parameter and perform some operation: <p v-for="(country ...