CODEWITHSUNDEEP
javascriptasp.net-mvc-3razorurl-rewritingbrowser-cache
SPR
SPR

Reputation: 116

Force browser to reload the Javascript files

I am trying to achieve the below in ASP.NET MVC3 web application which uses razor.

1) In my Index.cshtml file, I have the below reference.

<script src="/MySite/Scripts/Main.js"></script>

2) I load my home page for the first time and a http request is made to fetch this file which returns 200.

3) Then, I made some changes to the Main.js and saved it.

4) Now I just reload the home page (please note that I am not refreshing the page) by going to the address bar and typing the home page url and pressing enter. At this point, I want the browser to fetch the updated Main.js file by making a http request again.

How can I achieve this? I don't want to use System.Web.Optimization bundling way. I knew that we can achieve this by changing the URL (appending version or some random number) everytime the file changes.

But the challenge here is the URL is hardcoded in my Index.cshtml file. Everytime when there is a change in Main.js file, how can I change that hardcoded URL in the Index.cshtml file?

Thanks, Sathya.

Upvotes: 1

Views: 3019

Answers (4)

Tawab Wakil
Tawab Wakil

Reputation: 2313

It sounds like you are looking for cache-busting, where your JS file is automatically refreshed for users when the content changes.

The asp-append-version attribute built in to .NET can be used for this. Simply change this line:

<script src="/MySite/Scripts/Main.js"></script>

To this:

<script src="/MySite/Scripts/Main.js" asp-append-version="true"></script>

This can also be added to <link> tags to enable cache-busting for CSS files.

To confirm it's working, reload the page and view the page source. You should see a version number appended to the JS file. This number will be updated automatically when the content of the JS file changes. It will not be updated otherwise so as to preserve the normal caching behavior by the browser.

Upvotes: 0

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

Just add a timestamp as a querystring parameter:

var timestamp = System.DateTime.Now.ToString("yyyyMMddHHmmssfff");
<script src="/MySite/Scripts/Main.js?TimeStamp=@timestamp"></script>

Note: Only update TimeStamp parameter value, when the file is updated/modified.

Upvotes: 1

SPR
SPR

Reputation: 116

What I was trying to achieve is to invalidate browser cache as soon as my application javascript file (which already got cached in the browser) gets modified at the physical location. I understood that this is simply not achievable as no browsers are providing that support currently. To get around this below are the only two ways: 1)Use MVC bundling 2)Everytime the file is modified, modify the URL by just appending the version or any random number to the URL through querystring. This method is explained in the following URL - force browsers to get latest js and css files in asp.net application But the disadvantage with the 2nd method is, if there are any external applications referring to your application's javascript file, the browser cache will still not be invalidated without refreshing the external application in browser.

Upvotes: 1

Abhishek Siddhu
Abhishek Siddhu

Reputation: 587

It's not possible without either using bundling (which internally handles version) or manually appending version. You can create a single file bundle as well if you want.

Upvotes: 0

Related Questions