教你如何在 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 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
JS严格模式知识点总结
Feb 27 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
JS如何生成动态列表
Sep 22 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
最省空间的计数器
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Django框架安装方法图文详解
2019/11/04 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
SQL Server面试题
2013/04/04 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
农民入党思想汇报
2014/01/03 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
销售岗位职责范本
2014/06/12 职场文书
岗位工作说明书
2014/07/29 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL