教你如何在 Javascript 文件里使用 .Net MVC Razor 語法
相信大家都試過在一個 View 里嵌套使用 javascript,這時(shí)就可以直接使用 Razor 語法以調(diào)用 .NET 的一些方法。如以下代碼嵌套在一個 Razor 的 View 里:
<script> var currDate = '@DateTime.Now'; //直接調(diào)用.NET的方法 console.log(currDate) </script>
但另一種情況是,如果我想在一個獨(dú)立的 JS 文件里使用 Razor,那以上的方法可行不通,因?yàn)镸VC不會直接解釋JS文件,只有放到 Razor view里才可以。不過在此我向大家推薦一個第三方類庫,就可讓你直接在獨(dú)立的 JS 文件里使用 Razor
此類庫名字就叫 RazorJS,這是一個開源的項(xiàng)目,可到以下地址下載源碼:
https://bitbucket.org/djsolid/razorjs
或者也可以直接通過Nuget進(jìn)行安裝:
PM> Install-Package RazorJS
OK,先說說這個類庫能為我們帶來什么吧。安裝后你可以直接在 JS 文件里使用所有 .NET 支持的方法,如上面的代碼就可以直接放到獨(dú)立的JS文件里去使用。另外你還可以在JS文件里引用.NET的全名空間,如要調(diào)用 File 對象來讀取文本文件內(nèi)容,就可以直接引用 System.IO 命名空間:
@using System.IO;
var s = 'Hello at @DateTime.Now \n @File.ReadAllText(System.Web.Hosting.HostingEnvironment.MapPath("~/web.config"))';
運(yùn)行后就可直接在 JS 里獲取到 web.config 文件里的所有內(nèi)容??礃幼油Σ诲e吧,呵呵。那到底此類庫是如何運(yùn)作的呢?其實(shí)它是使用了一個叫 RazorEngine 的類庫達(dá)到以上效果的。RazorEngine 是一個 Razor 的解釋引擎,其功能非常強(qiáng)大,我之前也在一些項(xiàng)目中使用過。通過此引擎,你甚至可以直接在 win form 中使用 Razor 語法,呵,不知你有沒想到其好處了?
嗯,不錯,有了此引擎,就可以完全獨(dú)立了 web 環(huán)境去使用 MVC 的 Razor ,這個功能可讓你非常方便地制定一些靈活的模板,如一些 email 模板,你可直接在模板里使用各種.NET 方法甚至自定義的對象,然后動態(tài)生成想要的內(nèi)容。OK,但這個引擎并不是這次我要介紹的東西,在此只是順便說說啦
接下來說一個 RazorJS 的使用方法,如果你是直接通過 Nuget 安裝的,那么就會自動幫你配置好 web.config,這是建議的安裝方法,否則你就要自己添加 web.config 里的配置了,有好幾處地方,這里也不詳說,大家安裝了后可對比一下就知道了。要使用 RazorJS 也很簡單,只需使用以下語法引用你要的 JS 文件就可以了:
<p>
@Html.RazorJSInline("~/Scripts/Example.js")
</p>
不過要注意一點(diǎn)的是,在你的 web.config 里會有一段配置允許 RazorJS 使用的目錄,就是說你的JS文件必須放到此目錄里才可以使用此方法來引用:
<razorJSSettings handlerPath="~/razorjs.axd"> <allowedPaths> <add path="~/Scripts" /> </allowedPaths> </razorJSSettings>
最后要說一下的是其限制。有好的地方當(dāng)然也有不好的一面,由于其使用的是 RazorEngine ,所以你不可以在 JS 里使用 MVC 的 HTML Helper 方法,即所有 @Html 開頭的方法。另一個問題就是其不能識別 JS 里的注釋代碼,就是說如果你在注釋里使用了 .NET 的方法也一樣會執(zhí)行,如果你的方法正確就沒問題,否則就會中斷 JS 的執(zhí)行直接報(bào)錯了,所以不要以為沒用的方法注釋掉就可以了哦。
關(guān)于不能執(zhí)行 @Html helper的問題,我這里提供另一個解決辦法,不過這就可修改其源代碼,想折騰的朋友可以試試。其實(shí)這樣做也可以使用很多自定義的方法,更加靈活方便哦。下載了 RazorJS 源碼后,你可直接在上面修改然后重新編譯一個DLL出來,另一種方法就是將其源碼當(dāng)作另一個項(xiàng)目,直接加到你自己的項(xiàng)目中去。
在其源碼中,打開 HtmlTemplateBase.cs 文件,你就可在此添加自己的方法了,然后在這里添加的方法都可直接在 JS 里調(diào)用。如在源碼中你可發(fā)現(xiàn)已封裝的一個 Href 方法,可將 URL 轉(zhuǎn)換為在請求客戶端可用的 URL。根據(jù)此寫法,我們就可添加自己的方法,如以下是我封裝一個動態(tài)獲取國際化資源文件的方法,這樣就可直接在JS里使用.NET的資源文件進(jìn)行國際化了:
public class HtmlTemplateBase : TemplateBase
{
//手工調(diào)用資源文件管理器
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)
{
根據(jù)key返回相關(guān)的語言
return resources.GetString(langKey);
}
public UrlHelper Url { get; set; }
}
然后在JS里直接調(diào)用即可:
var s = '@GetLangText("CoderBlog")';
console.log(s);
運(yùn)行完后,就可直接在JS里輸入 CoderBlog 這個key的內(nèi)容啦
相關(guān)文章
使用JS實(shí)現(xiàn)一個Sleep函數(shù)的示例代碼
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個Sleep函數(shù),實(shí)現(xiàn)?sleep?函數(shù)其實(shí)非常簡單,主要是理解?JavaScript?中異步執(zhí)行情況,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
使用CSS+JavaScript或純js實(shí)現(xiàn)半透明遮罩效果的實(shí)例分享
這篇文章主要介紹了使用CSS+JavaScript或純js實(shí)現(xiàn)半透明遮罩效果的實(shí)例分享,編寫半透明遮罩層時(shí)要注意定位問題、不要滿屏遮罩,需要的朋友可以參考下2016-05-05
微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換成字符編碼列表的方法,實(shí)例分析了javascript中charCodeAt函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
用js實(shí)現(xiàn)簡單算法的實(shí)例代碼
下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)簡單算法的實(shí)例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
javascript設(shè)計(jì)模式 – 狀態(tài)模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 狀態(tài)模式,結(jié)合實(shí)例形式分析了javascript狀態(tài)模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
Javascript?中?var?和?let?、const?的區(qū)別及使用方法
ECMAScript 變量是松散類型的,意思是變量可以用于保存任何類型的數(shù)據(jù),每個變量只不過是一個用于保存任意值的命名占位符,這篇文章主要介紹了Javascript?中?var?和?let?、const?的區(qū)別以及具體使用效果,需要的朋友可以參考下2023-01-01

