第一篇介紹 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 )，以下是專案的目錄架構，
在 Views/Order/Index.cshtml 這一個 View 頁面裡，可以清楚看到是把 javascript 程式直接寫在 View 頁面的下方，
首先要透過 NuGet 安裝 RouteJs ( MVC 4 )
再來是在 _Layout.cshtml 裡加入 RouteJs 前端程式的 reference
接著修改 Views/Order/Index.cshtml 裡 Javascript 程式碼，將 Javascript Code 裡直接使用 Url.Action() 取得路徑的地方都改為使用 RouteJs 的方法，
修改前
修改後
在 Scripts 目錄裡建立新的 JS 檔「Order.Index.js」，等一下在 View 頁面裡的 Javascript 程式碼就會全搬過來，
而原本的 Views/Order/Index.cshtml 頁面裡就沒有 Javascript 程式碼，取而代之的是 Order.Index.js 的引用參考，
到此就大功告成了，基本上並沒有什麼太困難的操作，因為我原本寫在 View 頁面裡的 Javascritp 程式碼除了取得路徑的部分有使用到 Razor Syntax 與 UrlHelper 之外，其餘的並沒有任何的後端程式碼，所以只有加入 RouteJs 並且改用 RouteJs 所提供的 Router.action() 方法取得後端執行方法的路徑，最後再把所有的 Javascript 程式碼移到 Order.Index.js 裡。
當然執行結果並不會受到任何的影響，
相關連結
以上
沒有留言:
張貼留言