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

【问题标题】：How to push configuration values from Asp.Net Core MVC 2.0 config file to React TypeScript client script?如何将配置值从 Asp.Net Core MVC 2.0 配置文件推送到 React TypeScript 客户端脚本？
【发布时间】：2018-04-25 03:19:22
【问题描述】：

我在ASP.NET MVC Core 2.0 上有一个使用React Template 的应用程序。我在服务器端的配置文件中有属性 - SiteURL。需要推送给客户TypeScript，不明白怎么做？

我试图通过放置在最后一个脚本中来推动他们抛出Home/Index 文件

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

我在客户端制作

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

并在启动时导入此文件

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

Uncaught ReferenceError: SiteProps is not defined

我认为 JavaScript 没有从 TypeScript 上下文中看到我的属性。

问题是如何使这段代码工作，以及将 const 值（属性）推送到客户端 TypeScript 代码的最佳实践是什么。

【问题讨论】：

如果您是服务器端渲染或应用程序，您可以将其作为道具传递给主要组件，否则，如果没有制作 SSR，您将不得不在前端代码中对其进行硬编码.另一种方法可能是使用您的 webpack 配置来读取 web.config 并使用该值创建一个变量。
在服务器上仅渲染 Home/Index，我无法将值直接从 C# 推送到主组件，它基于 TypeScript 编译器和 webpack 来完成 js 脚本，所以我无法使用 razor 传递值，我认为。客户端上的硬代码是可变的，但最后一个变体，因为我不喜欢两个相同配置的地方。 Webpack 方法很有趣，但是如何？
我找到了一种方法。制作我需要的东西并不难。使用div 和json，请参阅我的答案。但寻找其他方式。

标签： javascript reactjs typescript asp.net-core asp.net-core-mvc

【解决方案1】：

我在Home/Index找到了解决方案：

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

PropsJSON 是 JSON 我的配置字符串。之后，我使用以下代码初始化我的客户端脚本配置：

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

【讨论】：

能否请您解释一下您是如何添加获取 appsettings 值的功能的？
@Mostafa 你可以看这里-stackoverflow.com/questions/10766654/…
你在使用UseSpa()吗？我是，index.html 是硬编码的。无法进行.Net 端渲染。
@JariTurkia 另一种方法是在应用程序启动时覆盖 settings.js 文件并在 index.html 中引用它。
另外一种方法是动态从控制器获取设置

【解决方案2】：

更多解决方法。

一个。

当应用程序开始使用实际设置重写文件“mysetting.js”并在index.html中引用此文件时

mysetting.js

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

index.html

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

两个。

在Home/Index脚本块中设置window.settings

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

它应该在所有代码中都可用。

三个。

在客户端应用程序启动后，通过从服务器获取请求即时获取所有设置，并将结果作为 JSON 对象获取，并将其设置为静态。

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

您在哪里初始化您的客户端代码。

【讨论】：