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


Posted in Javascript onJuly 23, 2014

相信大家都试过在一个 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 相关文章推荐
仿微博字符限制效果实现代码
Apr 20 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 #Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 #Javascript
jQuery获取节点和子节点文本的方法
Jul 22 #Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 #Javascript
JavaScript匿名函数与委托使用示例
Jul 22 #Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 #Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 #Javascript
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python多线程的退出控制实现
2020/08/10 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
新学期开学寄语
2014/01/18 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
洗发水广告词
2014/03/13 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
个人授权委托书样本
2014/09/13 职场文书
六一儿童节标语
2014/10/08 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
教研活动主持词
2015/07/03 职场文书
单位病假条范文
2015/08/17 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
用Python爬取某乎手机APP数据
2021/06/15 Python
Hive导入csv文件示例
2022/06/25 数据库