Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing Configuration Settings in Javascript using ASP.NET Core 2 MVC

I'm currently building a simple website using ASP.NET Core 2 and bootstrap. The site will be deployed to a staging and production environment so I want to be able to configure some settings using Configuration Key/Value pairs I can set in Azure. I also want these values to be available to me in Javascript.

Thanks to this helpful blog post I have worked out how to create an AppSettings class and populate it. This post also covers using dependency injection to access AppSettings from a RazorPage model.

My appsettings.json file

{
    "AppSettings": {
        "TestProperty": "Test_Property"
    },
    "Logging": {
        "IncludeScopes": false,
        "LogLevel": {
            "Default": "Warning"
        }
    }
}

Automatically bind my AppSettings class in Startup.cs

services.Configure<AppSettings>(Configuration.GetSection(nameOf(AppSettings)));

Accessing the settings via dependency injection:

public class HomeModel : PageModel
{
    private readonly AppSettings _appSettings;

    public string TestProperty {get; set;}

    public HomeModel(IOptions<AppSettings> appSettings)
    {
        _appSettings = appSettings.Value;
    }

    public IActionResult Index()
    {
        TestProperty = _appSettings.TestProperty;

        return View();
    }
}

Then on the page where I want to use this property in javascript I do the following to create a javascript property with the setting:

<script type="text/javascript">
  var testProperty = '@Model.TestProperty';
</script>

This works but ideally I don't want to have to configure every page to use this dependency injection and expose my TestProperty on every page. I would like to be able to put the above code in my _Layout.cshtml in which every page's body is rendered (or somewhere else appropriate) so I can create a javascript variable for use on every page.

I have thought about using a BaseViewModel from which all my page's models are inherited but experimenting with this hasn't resulted in anything useful (just a exceptions).

How would you go about creating a javascript property from a configuration setting with the ability to configure only once?

like image 736
James Mundy Avatar asked Dec 28 '17 15:12

James Mundy


People also ask

Can we use JavaScript in ASP NET MVC?

JavaScript can be used in asp.net mvc. If you go for Asp.NET Web forms, there is no need to have a detailed understanding of HTML, CSS or JavaScript as it abstracts all these details and provides automatic plumbing.

What is the configuration file for ASP NET MVC core app?

ASP.NET MVC configuration In ASP.NET apps, configuration uses the built-in . NET configuration files, web. config in the app folder and machine. config on the server.

What file is used to define configuration settings in .NET Core?

Application configuration in ASP.NET Core is performed using one or more configuration providers. Configuration providers read configuration data from key-value pairs using a variety of configuration sources: Settings files, such as appsettings. json.

How do I access Appsettings json in controller?

Using IConfiguration The IConfiguration is available in the dependency injection (DI) container, so you can directly access JSON properties by simply injecting IConfiguration in the constructor of a controller or class. It represents a set of key/value application configuration properties.


1 Answers

I've come up with something that works the way I need but very interested to hear other suggestions, my way could well be far from the best..

I stumbled across this blog post which talks about the MVC6 keyword, @inject. Using this it is possible to inject dependencies into Razor views.

Using this I added the following to the top of my _Layout.cshtml file:

@inject IAppSettings AppSettings; 

I could then reference properties of AppSettings in this view using:

<script type="text/javascript">
        var testProperty = '@AppSettings.TestProperty';
    </script>

I then edited my Startup.cs class to register IAppSettings and creates an AppSettings factory that reads the appsettings.json file and makes a new AppSettings class when required:

services.AddSingleton<IAppSettings, AppSettings>(e => Configuration.GetSection(nameof(AppSettings)).Get<AppSettings>());

This works a treat and I can access my javascript testProperty everywhere in my application but I'm curious if anyone has any other ideas as to how this could be done differently (perhaps using a BaseViewModel)?

Updated: As requested, here is more information on my implementation:

My IAppSettingsService interface:

public interface IAppSettingsService
    {
        string AzureStorageAccountName { get; }
        string AzureStorageAccountKey { get; }
    }

My AppSettingsService implementation:

public class AppSettingsService : IAppSettingsService
{
    public string AzureStorageAccountName { get; set; }
    public string AzureStorageAccountKey { get; set; }
}

The AppSettings.json:

{
    "AppSettings": {
        "AzureStorageAccountName": "XXXXXXXXXX",
        "AzureStorageAccountKey": "XXXXXXXXXX"
    },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

Then in the Azure Portal I can change these values at any time using AppSettings:AzureStorageAccountName and setting the value to the required information in the App Settings section.

like image 79
James Mundy Avatar answered Oct 11 '22 03:10

James Mundy