ASP.NET Core 3.1: Configuration: Dependency Injection: Access in JavaScript

Question

I have an ASP.NET Core 3.1 web application and I am trying to configure the app using parameters from appsettings.json. I am using the Options pattern to inject my configuration into my razor code-behind. Then, I paint the UI based on this configuration that is passed on as a model to the view. This part works fine. How do I pass this configuration to my javascript file? Do I expose an endpoint in my code-behind so the JavaScript sends an ajax request to this endpoint everytime before making an ajax request for data? For example:-

appsettings.json:

"ProjectOptions": {
    "ProjectName": "UYHGJHG",
    "ProjectClient": "TYRTYR",
    "ProjectCustomer": "EWQD",
    "UI": {      
      "Transaction": {
        "EnableTransactionSearch": "yes",
        "EnableTransactionDataRetrieval": "yes"
      },
      "Batch": {
        "EnableBatchSummaryReport": "yes",
        "EnableBatchDetailReport": "yes"
      }      
    }
  }

UIConfiguration.cs class:

public class UIConfiguration{
public string ProjectName { get; set; }
        public string ProjectClient { get; set; }
        public string ProjectCustomer { get; set; }
        public UI UI { get; set; }
}
public class UI{...}

Startup.cs:

services.Configure<UIConfiguration>(Configuration.GetSection("ProjectOptions"));

index.cshtml.cs:

private readonly UIConfiguration UI_Configuration;

public IndexModel(IOptions<UIConfiguration> projectOptions){
    UI_Configuration = projectOptions.value;
}
public MyConfiguration ViewConfiguration = new MyConfiguration();
public async Task<IActionResult> OnGet(){
    ViewConfiguration = new MyConfiguration(){property1 = UI_Configuration.UI.Transaction.EnableTransactionSearch, ...};
    
    return Page();
}

Chen · Accepted Answer · 2022-12-19T07:33:56.433

It looks like you want to get your default application parameter settings in JavaScript.

I suggest you to use a Get method specifically to get configuration parameters in appsetting.json, and then request this method in JavaScript to get the corresponding value (like you mentioned):

When injecting UIConfiguration into PageModel, you can choose to return a JsonResult to respond all of it to Js:

public JsonResult OnGetTest()
{
    return new JsonResult(UI_Configuration);
}

And your JavaScript:

//...
$.ajax({
    type: 'GET',
    url: "/Index?handler=Test",
    
    success: function (response) {
        //...
        console.log(response);
    },
    error: function (error) {
        console.log(error)
    }
});
//...

Or you can inject it into _Layout.cshtml through the interface, making it accessible as a global variable(Of course, I recommend you to use the first method). For more details, please refer to this link.

Hope this can help you.

ASP.NET Core 3.1: Configuration: Dependency Injection: Access in JavaScript

1 Answers1