在独立 JavaScript 文件中直接使用 Razor 语法：RazorJS 库详解

在独立 JS 文件中使用 Razor 语法的挑战

通常，在 Razor View 中嵌套 JavaScript 时，可以直接使用 Razor 语法来调用 .NET 方法。例如，以下代码可以嵌套在 Razor View 中使用：

<script>
 var currDate = '@DateTime.Now'; //直接调用.NET的方法
 
 console.log(currDate)
</script>

然而，如果希望在独立的 JavaScript 文件中使用 Razor，上述方法将失效，因为 MVC 不会直接解析 JS 文件，只有在 Razor View 中才能生效。为此，推荐一个第三方类库，允许直接在独立的 JS 文件中使用 Razor 语法。

引入 RazorJS 库

该类库名为 RazorJS，是一个开源项目，可以从以下地址下载源码：

https://bitbucket.org/djsolid/razorjs

或者，也可以通过 Nuget 直接安装：

PM> Install-Package RazorJS

RazorJS 的功能与原理

首先，介绍该类库的功能。安装后，你可以在 JS 文件中直接使用所有 .NET 支持的方法，例如上面的代码可以直接放入独立的 JS 文件中使用。此外，还可以在 JS 文件中引用 .NET 的全名空间，例如要调用 File 对象读取文本文件内容，可以直接引用 System.IO 命名空间：

@using System.IO;
 
var s = 'Hello at @DateTime.Now \n @File.ReadAllText(System.Web.Hosting.HostingEnvironment.MapPath("~/web.config"))';

运行后，即可在 JS 中获取 web.config 文件的全部内容。看起来效果不错吧？那么，该类库是如何工作的呢？它使用了一个名为 RazorEngine 的类库来实现上述功能。RazorEngine 是一个功能强大的 Razor 解释引擎，我之前也在一些项目中用过。通过此引擎，甚至可以直接在 Win Forms 中使用 Razor 语法，这带来了很大的灵活性。

不错，有了此引擎，就可以完全脱离 Web 环境使用 MVC 的 Razor。这个功能让你可以方便地制定灵活的模板，例如邮件模板，你可以直接在模板中使用各种 .NET 方法甚至自定义对象，然后动态生成所需内容。OK，但这个引擎并不是这次要介绍的重点，这里只是顺便提一下。

RazorJS 的安装与配置

接下来介绍 RazorJS 的使用方法。如果是通过 Nuget 直接安装的，它会自动帮你配置好 web.config，这是建议的安装方法。否则，你需要自己添加 web.config 中的配置，有几处地方需要修改，这里不再详述，安装后可以对比一下。要使用 RazorJS 也很简单，只需使用以下语法引用你要的 JS 文件就可以了：

<p>
 @Html.RazorJSInline("~/Scripts/Example.js")
</p>

不过要注意一点，在你的 web.config 里会有一段配置允许 RazorJS 使用的目录，也就是说你的 JS 文件必须放到此目录里才可以使用此方法来引用：

<razorJSSettings handlerPath="~/razorjs.axd">
 <allowedPaths>
 <add path="~/Scripts" />
 </allowedPaths>
 </razorJSSettings>

使用限制与源码修改方案

最后要说一下其限制。有好的一面，也有不好的一面。由于其使用的是 RazorEngine，所以你不可以在 JS 中使用 MVC 的 HTML Helper 方法，即所有 @Html 开头的方法。另一个问题是它不能识别 JS 里的注释代码，也就是说如果你在注释里使用了 .NET 的方法，同样会执行。如果你的方法正确就没问题，否则就会中断 JS 的执行直接报错，所以不要以为没用的方法注释掉就可以了哦。

关于不能执行 @Html helper 的问题，我这里提供另一个解决办法，不过这需要修改其源代码，想折腾的朋友可以试试。其实这样做也可以使用很多自定义的方法，更加灵活方便哦。下载了 RazorJS 源码后，你可以直接在上面修改然后重新编译一个 DLL 出来，另一种方法就是将其源码当作另一个项目，直接加到你自己的项目中。

在其源码中，打开 HtmlTemplateBase.cs 文件，你就可以在此添加自己的方法了，然后在这里添加的方法都可直接在 JS 里调用。如在源码中你可发现已封装的一个 Href 方法，可将 URL 转换为在请求客户端可用的 URL。根据此写法，我们就可添加自己的方法，如以下是我封装一个动态获取国际化资源文件的方法，这样就可直接在 JS 里使用 .NET 的资源文件进行国际化了：

public class HtmlTemplateBase : TemplateBase
 {
 //手工调用资源文件管理器
 private static ResourceManager resources = (ResourceManager)System.Type.GetType
  ("RazorJS.Resource").GetProperty("ResourceManager").GetValue(null, null);
 
 public HtmlTemplateBase()
 {
  Url = new UrlHelper(HttpContext.Current.Request.RequestContext);
 }
 public string Href(string originalUrl)
 {
  return Extensions.ResolveUrl(originalUrl);
 }
 
 public string GetLangText(string langKey)
 {
  根据key返回相关的语言
  return resources.GetString(langKey);
 }
 
 public UrlHelper Url { get; set; }
 }

然后在 JS 里直接调用即可：

var s = '@GetLangText("CoderBlog")';
console.log(s);

运行完后，即可直接在 JS 中输入 CoderBlog 这个 key 的内容啦