Question

在Razor / cshtml文件中编写Javascript代码时，可以编写如下代码：

if (lSelectedID == "@(Globals.MyGlobalVariable)") {
...
}

其中Globals.MyGlobalVariable是C＃变量。如果Globals.MyGlobalVariable == 123，则客户端上生成的Javascript将为

if (lSelectedID == "123") {
...
}

以上内容非常方便。但是如何在Typescript中做同样的事情？即在将打字稿文件转换为Javascript之前，如何在打字稿中插入C＃全局变量（或C＃函数调用的结果等）？

Answer 1

将JavaScript和CSS直接包含到CSTHML中不是最佳实践。相反，您应该将它们放在自己的文件中，并在您的视图中引用它们。

如果您的JavaScript需要C＃的一些值，那么您应该通过在HTML元素中使用data属性来存储它。

示例：

<span id="myGlobalVariable" data-value="123456">MyGlobalVariable</span>

然后在TypeScript中获取您在视图中设置的数据

let myGlobalVariable = document.getElementById("myGlobalVariable").dataset.value;
if (lSelectedID == myGlobalVariable) {

}

Answer 2

我认为，最简单的方法是在客户端的Typescript中复制全局变量。这就是我最近两个项目的完成方式。

因此在服务器端，您将：

// C#

public class Globals()
{
    public int GlobalNum {get;} = 0;
    public string GlobalString {get;} = "123";
}

在客户端，在Typescript中应该是：

// Typescript 

export enum Globals{
    GlobalNum = 0;
    GlobalString = "123";
}

现在，您可以忘记尝试将Razor（在服务器端进行渲染）连接到Typescript（在客户端执行）的困难，而仍然需要一组清晰明显的全局变量来引用。

您的代码随后可以成为：

// Typescript

if (lSelectedID == Globals.GlobalString) {
   //...
}

唯一需要记住的是，全局变量存在于两个位置-一次在服务器端，一次在客户端。

Typescript要求无论如何都要在客户端上复制很多服务器端类，例如，以正确接收获取响应数据，因此添加Globals类/枚举不应过多打破常规。