admin管理员组

文章数量:1122832

In my .NET Web API project, I store the version number of my JavaScript file in appsettings.json like this:

{
  "JSSettings": {
    "Version": "1.0.0"
  }
}

The version number will change over time, and I need to ensure that the JavaScript file is always loaded with the correct version for cache busting. For example, the script tag should look like this:

<script src="/js/app.js?v={//this we get from appsettings}"></script>

How can I dynamically retrieve this version from appsettings.json and inject it into my HTML/JavaScript so that the correct version is always used, without manually updating the HTML each time the version changes?

In my .NET Web API project, I store the version number of my JavaScript file in appsettings.json like this:

{
  "JSSettings": {
    "Version": "1.0.0"
  }
}

The version number will change over time, and I need to ensure that the JavaScript file is always loaded with the correct version for cache busting. For example, the script tag should look like this:

<script src="/js/app.js?v={//this we get from appsettings}"></script>

How can I dynamically retrieve this version from appsettings.json and inject it into my HTML/JavaScript so that the correct version is always used, without manually updating the HTML each time the version changes?

  • javascript
  • html
  • .net
  • versioning
Share Improve this question asked yesterday SandeepSandeep 313 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

To dynamically retrieve the version number from appsettings.json in your .NET web API project and use it in your HTML for cache busting, you can follow these steps:

1. Expose the version from appsettings.json via an API endpoint

Create an endpoint in your .NET web API to expose the version number.

Steps:

  • Read the version from appsettings.json.
  • Return it in a collector action.

Example:

appsettings.json:

{
  "JSSettings": {
    "Version": "1.0.0"
  }
}

Startup configuration

var builder = WebApplication.CreateBuilder(args);

// Add services to the container
builder.Services.Configure<JSSettings> 
(builder.Configuration.GetSection("JSSettings"));

var app = builder.Build();

Model

 public class JSSettings
 {
   public string Version { get; set; }
 }

Controller

[ApiController]
[Route("api/settings")]
public class SettingsController : ControllerBase
{
    private readonly IOptions<JSSettings> _jsSettings;

    public SettingsController(IOptions<JSSettings> jsSettings)
    {
        _jsSettings = jsSettings;
    }

    [HttpGet("version")]
    public IActionResult GetVersion()
    {
        return Ok(new { version = _jsSettings.Value.Version });
    }
}

2. Dynamically inject the version in HTML using Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic JS Versioning</title>
</head>
<body>
    <script>
        // Fetch the version from the API
        fetch('/api/settings/version')
            .then(response => response.json())
            .then(data => {
                const version = data.version;
                // Dynamically add the script tag with the version
                const script = document.createElement('script');
                script.src = `/js/app.js?v=${version}`;
                document.body.appendChild(script);
            })
            .catch(error => console.error('Error fetching version:', error));
    </script>
</body>
</html>

3. Ensure proper caching strategy

The version parameter in the script URL ensures the browsers fetch the latest version of the Javascript file whenever the version changes.

本文标签：

版权声明：本文标题：html - How can I use the version information from appsettings.json in client-side JavaScript within a .NET Web API application? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736283202a1926887.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。