Zugriff auf Konfigurationseinstellungen in Javascript mit ASP.NET Core 2 MVC6

Question

Ich baue derzeit eine einfache Website mit ASP.NET Core 2 und Bootstrap. Die Site wird in einer Staging- und Produktionsumgebung bereitgestellt, sodass ich einige Einstellungen mithilfe von Configuration Key/Value-Paaren konfigurieren kann, die ich in Azure festlegen kann. Ich möchte auch, dass diese Werte mir in Javascript zur Verfügung stehen.

Dank dieses helpful blog post habe ich ausgearbeitet, wie man eine AppSettings-Klasse erstellt und sie füllt. In diesem Post wird auch die Abhängigkeitsinjektion zum Zugriff auf AppSettings von einem RazorPage-Modell behandelt.

Meine appsettings.json Datei

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

automatisch meine AppSettings Klasse in Startup.cs binden

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

Zugriff auf die Einstellungen über 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(); 
    } 
} 

dann auf der Seite, wo ich diese Eigenschaft in Javascript verwenden mag ich folgendes ein Javascript-Objekt mit der Einstellung zu erstellen:

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

Das funktioniert aber im Idealfall möchte ich nicht haben Konfigurieren Sie jede Seite, um diese Abhängigkeitsinjektion zu verwenden, und setzen Sie meine TestProperty auf jeder Seite frei. Ich würde gerne in der Lage sein, den obigen Code in meine _Layout.cshtml setzen, in dem jeder Körper der Seite gerendert wird (oder woanders angemessen), so dass ich eine Javascript-Variable für die Verwendung auf jeder Seite erstellen kann.

Ich habe über die Verwendung eines BaseViewModels nachgedacht, von dem alle Modelle meiner Seite geerbt werden, aber das Experimentieren mit diesem hat nichts nützliches ergeben (nur eine Ausnahme).

Wie würden Sie eine JavaScript-Eigenschaft aus einer Konfigurationseinstellung erstellen mit der Fähigkeit, nur einmal zu konfigurieren?

Answer 1

Ich habe etwas einfallen, das die Art, wie ich brauche, aber sehr interessiert andere Vorschläge zu hören, funktioniert, könnte meinen Weg auch weit von den besten sein ..

ich über this blog post gestolpert, die über die MVC6 spricht Schlüsselwort, @inject. Dadurch können Abhängigkeiten in Razor-Ansichten eingefügt werden.

diese Verwendung habe ich folgendes an die Spitze meiner _Layout.cshtml Datei:

@inject IAppSettings AppSettings; 

ich dann Eigenschaften von AppSettings in dieser Ansicht verweisen könnte mit:

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

ich meine bearbeitet dann Startup.cs Klasse um IAppSettings zu registrieren und eine AppSettings-Factory zu erstellen, die die Appsettings liest.JSON-Datei und macht eine neue AppSettings Klasse bei Bedarf:

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

Dies funktioniert einen Genuss, und ich kann meinen Javascript testProperty überall in meiner Anwendung zugreifen, aber ich bin neugierig, ob jemand noch andere Ideen, hat, wie das sein könnte anders gemacht (vielleicht mit einem BaseViewModel)?

Aktualisiert: Wie gewünscht, hier ist mehr Informationen über meine Implementierung:

Meine IAppSettingsService Schnittstelle:

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

Meine AppSettingsService Implementierung:

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" 
    } 
    } 
} 

Dann kann ich im Azure Portal diese Werte jederzeit unter Verwendung von AppSettings.AzureStorageAccountName ändern und den Wert auf die erforderlichen Informationen im Abschnitt App-Einstellungen setzen.

Answer 2

nicht sicher, was genau Sie erreichen möchten. Aber so ziemlich haben Sie Zugriff auf die Appsettings in JavaScript. Das Injizieren von Objekten/Diensten zum Anzeigen ist eine großartige Sache in ASP.NET Core.

Wenn Sie nur URLs für verschiedene Umgebungen betrachten, können Sie dies in Ihren Releasepipelines erreichen. In meinem Job - ich arbeite an einer Web-App, die asp.net Kern als Host + eckig 2 als UI-Framework ist. Wir haben 4 Umgebungen. eckiger Code ruft immer unseren asp.net Core Host auf. Wir haben eine Middleware geschrieben, die nach API-Anrufen sucht und sie an unsere APIs weiterleitet, die in den entsprechenden Umgebungen auf azurblau gehostet werden. Die Domäne der API-Umgebung wird als App-Schlüssel beibehalten. In unserer Release-Pipeline überschreiben wir die Eigenschaft für jede Umgebungsversion.

Es ist am besten, alles in Ihrem ASP.NET Server Side Code zu zentralisieren. Das UI, also JavaScript, sollte nur den serverseitigen MVC-Controller-Endpunkt pingen. Auf diese Weise können Sie die Anwendungseinstellungen während der Veröffentlichung ändern.

hoffe das hilft.