Set asp-append-version True by Default for JavaScript, & CSS to the Bust Cache

When I add a JavaScript file or CSS file in .NET, I want asp-append-version set to true 99.9% of the time. This way I don't have to tell users or testers to clear their cache if I update those files. You can do this with your web server settings as well but I prefer it if my application does it at build time.

I reached out via the GitHub repository where the .NET team does an awesome job of replying & working with community members in my experience. Damian Edwards replied with a great solution. Damian's solution uses Tag Helpers.

With Tag Helpers, instead of saying <script src="~/js/site.js"></script> you would write <script asp-src-include="~/js/site.js"></script>.

.NET 6 Version

If you launch a new .NET 6 Web app, your program.cs file will look like this at the top.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

After the AddRazorPages() method we can add custom helpers.

builder.Services.AddRazorPages();
builder.Services.AddSingleton<ITagHelperInitializer<ScriptTagHelper>, AppendVersionTagHelperInitializer>();
builder.Services.AddSingleton<ITagHelperInitializer<LinkTagHelper>, AppendVersionTagHelperInitializer>();

Then create a AppendVersionTagHelperInitializer class somewhere in your project. Here's Damian's version which sets AppendVersion = true by default.

public class AppendVersionTagHelperInitializer :
    ITagHelperInitializer<ScriptTagHelper>,
    ITagHelperInitializer<LinkTagHelper>
{
    private const bool DefaultValue = true;

    public void Initialize(ScriptTagHelper helper, ViewContext context)
    {
        helper.AppendVersion = DefaultValue;
    }

    public void Initialize(LinkTagHelper helper, ViewContext context)
    {
        helper.AppendVersion = DefaultValue;
    }
}

Now when you add JavaScript with <script asp-src-include="~/js/site.js"></script> or CSS with <link rel="stylesheet" asp-href-include="~/css/site.css" /> it will add a ?v{Hash} after it <script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>.

.NET 3 Version

For slightly older .NET projects, the only thing that changes is instead of using program.cs to add our singletons we do it in startup.cs like this:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddSingleton<ITagHelperInitializer<ScriptTagHelper>, AppendVersionTagHelperInitializer>();
    services.AddSingleton<ITagHelperInitializer<LinkTagHelper>, AppendVersionTagHelperInitializer>();
}

Creating Tag Helpers

You can take this further by creating your own tag helpers. The .NET docs have a good e-mail example.