asp-append-version Feature In ASP.NET Core

This is really awesome feature to have always updated version of static files without doing full refresh.

Introduction

 

We normally use static files like CSS, Image and JS files to our website to make it interactive and dynamic.

 

But when we update any file like css, js or image then we need to tell the browser to take the latest file, not the oldest one.

 

And we really don't want user to do full refresh each and every time when we change/update css, js or image file. 

 

There were many options available earlier, like below, to make it possible without having users do a full refresh or Ctrl + F5 or Ctrl + R which was really annoying. 

• Change the image file name to have updated image on browser 
• Add random string behind the js, css or image url.

The good news is that ASP.NET Core has in-build feature solution for this issue.

 

asp-append-version="true" 

 

To have this feature ON we just need to add the above special attribute to our JS, CSS or Image file HTML tag as below.

 

CSS

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

JS 

<script src="~/js/site.js" asp-append-version="true"></script>

So now the question is, what does it really do? Let's have a look.

 

So when we render or run the page in the browser we will see the below HTML code by using the inspect element or viewing the source code feature of the specific browser.

 

CSS 

<link rel="stylesheet" href="/css/site.css?v=AAs5qCYR2ja7e8QIduN1jQ8eMcls-cPxNYUozN3TJE0" />

JS

<script src="/js/site.js?v=NO2z9yI9csNxHrDHIeTBBfyARw3PX_xnFa0bz3RgnE4"></script>

Here we can clearly see that some additional text is appended after the site.css and site.js file which is nothing but some random string.

 

Now I am changing something in the above files and running the page again. Let's have a look at the view source of this page.

 

CSS

<link rel="stylesheet" href="/css/site.css?v=rwgRWCjxemznsx7wgNx5PbMO1EictA4Dd0SjiW0S90g" />

JS

<script src="/js/site.js?v=SlFeIBqpCcjHTZMNxHJQvKTA9jUK8WF4c7cbl-LwYoE"></script>

So now the Magic is when you change or update anything in this above file and re-run the page again you will see a completely different random string appended after each file name which simply tells the browser to use updated file(s), not the old ones. 

 

So it means no more need to use  Ctrl + F5 or Ctrl + R to do a full refresh now. 

 

Conclusion

 

So this additional attribute helps us to tell the browser to always use updated content whether it is for CSS, JS or any Image file. 

 

Happy Coding my friends!