教你如何在 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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jQuery 表格工具集
Apr 25 Javascript
jQuery 联动日历实现代码
May 31 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
python海龟绘图实例教程
2014/07/24 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python列表解析操作实例总结
2020/02/26 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
如何用python免费看美剧
2020/08/11 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
丑小鸭教学反思
2014/02/03 职场文书
社区服务活动小结
2014/07/08 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB