教你如何在 Javascript 文件里使用 .Net MVC Razor 语法

 更新时间:2014年07月23日 09:41:16   投稿:hebedich   我要评论

文章主要是介绍了通过一个第三方类库RazorJS,实现Javascript 文件里使用 .Net MVC Razor 语法,很巧妙,推荐给大家

相信大家都试过在一个 View 里嵌套使用 javascript,这时就可以直接使用 Razor 语法以调用 .NET 的一些方法。如以下代码嵌套在一个 Razor 的 View 里:

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

但另一种情况是,如果我想在一个独立的 JS 文件里使用 Razor,那以上的方法可行不通,因为MVC不会直接解释JS文件,只有放到 Razor view里才可以。不过在此我向大家推荐一个第三方类库,就可让你直接在独立的 JS 文件里使用 Razor


此类库名字就叫 RazorJS,这是一个开源的项目,可到以下地址下载源码:

https://bitbucket.org/djsolid/razorjs

或者也可以直接通过Nuget进行安装:

PM> Install-Package RazorJS

OK,先说说这个类库能为我们带来什么吧。安装后你可以直接在 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 form 中使用 Razor 语法,呵,不知你有没想到其好处了?

嗯,不错,有了此引擎,就可以完全独立了 web 环境去使用 MVC 的 Razor ,这个功能可让你非常方便地制定一些灵活的模板,如一些 email 模板,你可直接在模板里使用各种.NET 方法甚至自定义的对象,然后动态生成想要的内容。OK,但这个引擎并不是这次我要介绍的东西,在此只是顺便说说啦

接下来说一个 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的内容啦

相关文章

  • javascript使用shift+click实现选择和反选checkbox的方法

    javascript使用shift+click实现选择和反选checkbox的方法

    这篇文章主要介绍了javascript使用shift+click实现选择和反选checkbox的方法,涉及javascript针对键盘按键的判断及checkbox的操作技巧,需要的朋友可以参考下
    2015-05-05
  • js RuntimeObject() 获取ie里面自定义函数或者属性的集合

    js RuntimeObject() 获取ie里面自定义函数或者属性的集合

    取得ie 里面 自定义函数或者属性的集合 使用RuntimeObject()实现,需要的朋友可以参考下。
    2010-11-11
  • PHP捕捉异常中断的方法

    PHP捕捉异常中断的方法

    相信每位PHP程序员都知道,当PHP程序出现异常情况,如出现致命错误、超时或者不可知的逻辑错误导致程序中断,这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • JavaScript数组前面插入元素的方法

    JavaScript数组前面插入元素的方法

    这篇文章主要介绍了JavaScript数组前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js图片自动轮播代码分享(js图片轮播)

    js图片自动轮播代码分享(js图片轮播)

    这篇文章主要介绍了js图片自动轮播代码,利用图片width显示位置来播放图片和利用数组放入图片经行轮播,需要的朋友可以参考下
    2014-05-05
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。
    2015-04-04
  • JavaScript实现标题栏文字轮播效果代码

    JavaScript实现标题栏文字轮播效果代码

    这篇文章主要介绍了JavaScript实现标题栏文字轮播效果代码,涉及JavaScript基于时间函数及流程控制操作标题栏文字的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js、jquery图片动画、动态切换示例代码

    js、jquery图片动画、动态切换示例代码

    这篇文章主要介绍了通过js、jquery实现的图片动画、图片动态切换 ,需要的朋友可以参考下
    2014-06-06
  • 利用JavaScript阻止表单提交的两种方法

    利用JavaScript阻止表单提交的两种方法

    本文介绍怎样利用JavaScript来阻止表单提交的两种方法,分别是return false和使用preventDefault(),有需要的可以参考借鉴,下面一起来看看。
    2016-08-08
  • 动态加载js、css等文件跨iframe实现

    动态加载js、css等文件跨iframe实现

    这篇文章主要介绍了动态加载js、css等文件跨iframe实现的方法,需要的朋友可以参考下
    2014-02-02

最新评论