教你如何在 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 相关文章推荐
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
JavaScript前端实现压缩图片功能
Mar 06 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调用dll的实例操作动画与代码分享
2012/08/14 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php之可变变量的实例详解
2017/09/12 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python中的异常处理简明介绍
2015/04/13 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
南京软件公司的.net程序员笔试题
2014/08/31 面试题
旅游专业毕业生自荐书
2014/06/30 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
物业接待员岗位职责
2015/04/15 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书