javascript - Hvordan får man sendt konfigurationsværdier fra en Asp.Net Core MVC 2.0 konfigurationsfil til et React TypeScript client script?

Jeg har en applikation på ASP.NET MVC Core 2.0 ved hjælp af React Template. Jeg har en egenskab i konfigurationsfilen på serversiden - SiteURL. Jeg har brug for at sende den til klient TypeScript, og jeg forstår ikke, hvordan jeg kan gøre det.

Jeg prøvede at sende dem gennem Home/Index-filen ved at placere dem i den sidste script

SiteProps.SiteURL= "http://mysiteurl.org"

og på klienten laver jeg

export var SiteProps: { SiteURL: string } = {SiteURL: ""};

og importer denne fil ved opstart

Men når jeg tester denne egenskab på konsollen, ser jeg

Uopfanget ReferenceError: SiteProps er ikke defineret

Jeg tror, at JavaScript ikke så min egenskab fra TypeScript kontekst.

Spørgsmålet er, hvordan man får denne kode til at fungere, og hvad der er bedste praksis for at sende const-værdier (egenskaber) til klient TypeScript-kode.

Svar #1

Jeg fandt en løsning til at lave denne linje på Home/Index:

<div id="site-props" style="display: none;">@ViewBag.PropsJSON</div>

Hvor PropsJSON er JSON-streng af min konfiguration. Efter det initialiserer jeg min klientscriptkonfiguration ved hjælp af denne kode:

function ImportProps() {
    var ell = document.getElementById('site-props');
    var jsontext = ell!.innerText;
    SiteProps = JSON.parse(jsontext);
}

Svar #2

Nogle flere måder at løse det på.

En.

Når applikationen begynder at omskrive filen "mysetting.js" med de aktuelle indstillinger og referere til denne fil i index.html

mysetting.js

var settings = {
  SiteName: "MySite",
  SiteApi: "http://site.api"
}

index.html

<script src="mysetting.js"></script>

To.

I Home/Index skal du sætte window.settings i scriptblokken

window.settings = {
  SiteName: "MySite",
  SiteApi: "http://site.api"
}

og det bør være tilgængeligt fra al kode.

Tre.

Efter klientapplikationen starter, hent alle indstillinger med en fetch-anmodning fra serveren på farten, og få resultatet som JSON-objekt, og indstil det et sted til statisk.

fetch("api/Settings/getSettings").
   then( /* set data to static */ )

Hvor du initialiserer din klientkode.

Relaterede artikler