Azure App Configuration Service Display change in MVC app .NET Core 3.x without Refreshing the Page

Question

What I am trying to do: I have setup Azure App Configuration with a .net core 3.1 mvc web application with a sentinel key in Azure App Configuration, with the goal of as and when i update the values of different keys along with the their sentinel keys the updated value should get reflected in my mvc App without refreshing the Page.

What my issue is: When I do this using the RefreshAll: true inside the option dependency Injection in my Program.cs class I can view the changes in my app after refreshing the page, but I want to see the changes as soon as i update the key value in my App Configuration Service (without refreshing the page)

Documentation I am referencing: https://docs.microsoft.com/en-us/azure/azure-app-configuration/enable-dynamic-configuration-aspnet-core?tabs=core3x#reload-data-from-app-configuration I have created the app using the above link only. My Environment: Using dot net core 3.1 being run from Visual Studio Enterprise 2019

My code : Programe.cs --

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
            webBuilder.ConfigureAppConfiguration((hostingContext, config) =>
            {
                var settings = config.Build();
                config.AddAzureAppConfiguration(options =>
                {
                    options.Connect(settings["ConnectionStrings:AppConfig"])
                           .ConfigureRefresh(refresh =>
                                {
                                    refresh.Register("TestApp:Settings:Sentinel", refreshAll: true)
                                           .SetCacheExpiration(new TimeSpan(0, 0, 1));
                                });
                });
            })
        .UseStartup<Startup>());

Added a Setting.cs class :

namespace TestAppConfig
{
    public class Settings
    {
        public string BackgroundColor { get; set; }
        public long FontSize { get; set; }
        public string FontColor { get; set; }
        public string Message { get; set; }
    }
}

in the Startup.cs Modified the ConfigureService Method :

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<Settings>(Configuration.GetSection("TestApp:Settings"));
    services.AddControllersWithViews();
}

Also Updated the Configure Method as :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        // Add the following line:
        app.UseAzureAppConfiguration();

        app.UseHttpsRedirection();

        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
}

My HomeController Class :

public class HomeController : Controller
{
    private readonly Settings _settings;
    private readonly ILogger<HomeController> _logger;

    public HomeController(ILogger<HomeController> logger, IOptionsSnapshot<Settings> settings)
    {
        _logger = logger;
        _settings = settings.Value;
    }

    public IActionResult Index()
    {
        ViewData["BackgroundColor"] = _settings.BackgroundColor;
        ViewData["FontSize"] = _settings.FontSize;
        ViewData["FontColor"] = _settings.FontColor;
        ViewData["Message"] = _settings.Message;

        return View();
    }

    // ...
}

Index.cshtml :

<!DOCTYPE html>
<html lang="en">
<style>
    body {
        background-color: @ViewData["BackgroundColor"]
    }
    h1 {
        color: @ViewData["FontColor"];
        font-size: @ViewData["FontSize"]px;
    }
</style>
<head>
    <title>Index View</title>
</head>
<body>
    <h1>@ViewData["Message"]</h1>
</body>
</html>

Let me know if this can be achieved and how . Thanks in Advance

Zhenlan Wang Zhenlan Wang · Accepted Answer · 2020-09-24T21:51:19

In the real world, when the configuration is changed, new users to your web application will see the change. If you want to see the change without refreshing the page, you will have to use the javascript or AJAX to refresh the page automatically, for example, on a timer. This is no different when anything is changed on the server-side regardless of whether it's the configuration or something else.

Azure App Configuration Service Display change in MVC app .NET Core 3.x without Refreshing the Page

1 Answers