2014年9月24日 星期三

ASP.NET MVC - 使用 RouteJs - Part.3

第一篇介紹 RouteJs 所使用的專案是我用來做練習與測試的專案,所以整個專案的架構從前端到後端都與一般大部分 ASP.NET MVC 開發者所接觸的專案內容有很大的不同,所以這邊我就用另外一個專案,是去年的一篇文章所使用的範例專案「ASP.NET MVC 資料分頁 - 使用 PagedList.Mvc:Table 的 Checkbox」,那個專案剛好就是個把 Javascript 程式碼寫在 View 裡面,這一篇文章就來說明如何在專案裡加入使用 RouteJs 並且怎麼把頁面裡的 Javascript 程式碼從 View 頁面抽離出來到 JS 檔案裡。

 


這個專案是使用 ASP.NET MVC 4,所以等一下將會透過 NuGet 安裝 RouteJs ( MVC 4 ),以下是專案的目錄架構,

image

在 Views/Order/Index.cshtml 這一個 View 頁面裡,可以清楚看到是把 javascript 程式直接寫在 View 頁面的下方,

image

 

首先要透過 NuGet 安裝 RouteJs ( MVC 4 )

image

 

再來是在 _Layout.cshtml 裡加入 RouteJs 前端程式的 reference

image

 

接著修改 Views/Order/Index.cshtml 裡 Javascript 程式碼,將 Javascript Code 裡直接使用 Url.Action() 取得路徑的地方都改為使用 RouteJs 的方法,

修改前

image

修改後

image

 

在 Scripts 目錄裡建立新的 JS 檔「Order.Index.js」,等一下在 View 頁面裡的 Javascript 程式碼就會全搬過來,

image

image

而原本的 Views/Order/Index.cshtml 頁面裡就沒有 Javascript 程式碼,取而代之的是 Order.Index.js 的引用參考,

image

 

到此就大功告成了,基本上並沒有什麼太困難的操作,因為我原本寫在 View 頁面裡的 Javascritp 程式碼除了取得路徑的部分有使用到 Razor Syntax 與 UrlHelper 之外,其餘的並沒有任何的後端程式碼,所以只有加入 RouteJs 並且改用 RouteJs 所提供的 Router.action() 方法取得後端執行方法的路徑,最後再把所有的 Javascript 程式碼移到 Order.Index.js 裡。

當然執行結果並不會受到任何的影響,

image

image

image

image

 


相關連結

RouteJs on NuGet

RouteJs on GitHub

RouteJs Official WebSite

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。

最近的留言