Javascript 如何将配置值从Asp.Net Core MVC 2.0配置文件推送到React TypeScript客户端脚本？

我在ASP.NET MVC Core 2.0上有一个应用程序，它使用

React模板

。 我在服务器端的配置文件中有属性-

SiteURL

。我需要把它推到客户端

TypeScript

，但我不知道如何才能做到这一点

我试图将它们放入最后一个脚本中，从而推送到throw

Home/Index

文件中

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

我的客户

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

并在启动时导入此文件

但是在控制台上测试这个属性我看到了

未捕获引用错误：未定义SiteProps

我认为

JavaScript

没有从

TypeScript

上下文中看到我的属性

---

问题是如何使此代码工作，以及将常量值（属性）推送到客户端

TypeScript

代码的最佳实践是什么。

我找到了在

Home/Index

上创建此行的解决方案：

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

---

还有更多的解决方法

一个。 当应用程序开始用实际设置重写文件“mysetting.js”并在

index.html

mysetting.js

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

index.html

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

它应该可以从所有代码中获得

三个。 客户端应用程序启动后，动态地从服务器获取所有设置，并将结果作为JSON对象获取，然后将其设置为静态

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

---

初始化客户端代码。

如果您是服务器端渲染或应用程序，可以将其作为道具传递给主组件，否则，如果未进行SSR，则必须在前端代码中对其进行硬编码。另一种方法是使用您的webpack配置读取web.config并创建一个值为的变量。在服务器上，只呈现Home/Index，我无法将值直接从C#推送到主组件，它构建在TypeScript编译器和webpack上以完成js脚本，所以我认为我无法使用razor传递值。客户端上的硬代码是varian，但是最后一个变体，因为我不喜欢两个配置相同的地方。Webpack aproach很有趣，但是如何呢？我找到了一种方法。做我需要的并不难。使用

div

和

json

，查看我的答案。但是还有其他方法。你能解释一下你是如何添加获取appsettings值的功能的吗？@Mostafa你可以看看这里-你在使用

UseSpa（）

？是的，

index.html

是硬编码的。无法进行.Net端渲染。@JariTurkia另一种方法是在应用程序启动时覆盖settings.js文件，并在index.html中引用它。还有一种方法是动态地从控制器获取seeting

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

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