首頁  >  文章  >  web前端  >  教你如何在 Javascript 檔案裡使用 .Net MVC Razor 語法_javascript技巧

教你如何在 Javascript 檔案裡使用 .Net MVC Razor 語法_javascript技巧

WBOY
WBOY原創
2016-05-16 16:41:182067瀏覽

相信大家都試過在一個 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的內容啦

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn