第一篇介紹 RouteJs 所使用的專案是我用來做練習與測試的專案，所以整個專案的架構從前端到後端都與一般大部分 ASP.NET MVC 開發者所接觸的專案內容有很大的不同，所以這邊我就用另外一個專案，是去年的一篇文章所使用的範例專案「ASP.NET MVC 資料分頁 - 使用 PagedList.Mvc：Table 的 Checkbox」，那個專案剛好就是個把 Javascript 程式碼寫在 View 裡面，這一篇文章就來說明如何在專案裡加入使用 RouteJs 並且怎麼把頁面裡的 Javascript 程式碼從 View 頁面抽離出來到 JS 檔案裡。
前面第一篇已經講了 RouteJs 基本的使用方式，其實 RouteJs 的使用真的蠻簡單而且也方便，因為曾經在某個與別人共同開發的專案裡看到同事為了要讓 View 裡面的 Javascript 程式碼也能夠取得正確的路徑，可以說花了一番功夫，而做出來的方式就是先抓取目前顯示頁面的 Controller 與 Action 名稱，然後再以字串的方式組合起來，這樣的方式一旦遇到變化題就必須要再花一番功夫去把正確的路徑給組合出來，而改用 RouteJs 則是可以讓這些麻煩事給簡化不少。
這一篇將要來說明「exposeAllRoutes」這個設定值的使用。
我很不喜歡在 View 頁面裡直接下 Javascript 程式碼，必須要的話，我也一定會將全部的 Javascript 程式碼擺在頁面的最下面，我相當不能夠忍受 Javascript 程式碼穿插出現在 View 的任何一個地方。
View 頁面除了 Html Tag 之外還會有 Razor Syntax，我必須說在複雜的頁面顯示邏輯下，Html Tag 與 Razor Syntax 就有可能會相當混亂，此時如果再加入 Javascript 程式碼的話，這已經不是複雜或是混亂可以來形容，如果要選個適當的形容詞，那麼我會用「惡搞」，尤其是有些開發者為了要控制某些邏輯的情況下才能夠觸發哪些前端功能時，會用 Razor Syntax 來包住 Javascript 程式碼，也就是用後端程式的邏輯來控制前端程式的有無以及能否執行，這樣搞得前後端程式邏輯在頁面裡大亂鬥，這樣的做法就好像回到十多年前開發 ASP 一般。
我在專案裡對於 View 頁面所使用的做法是將 Javascript 程式碼全部抽離，然後放到一個獨立的 Javascript 檔案裡，而且一個頁面對應一個 Javascript 檔案，不會出現 A 頁面去使用到 B 頁面的前端程式，假如有出現共用的程式，則再提取出來放在更上一層的 Javascript 檔案裡，這樣的做法就如同我們在寫後端 C# 程式一樣。
但是有很多開發者對於要將 javascript 程式碼從頁面抽離都會面臨到一個問題，那就是如何取得後端方法的路徑，在 View 頁面上可以直接使用 Url.Action() 來取得路徑，但如果是在 Javascript 檔案裡就無法使用 UrlHelper 來取得路徑，而如果是直接將路徑寫死在 Javascript 程式碼裡，就會面臨到如果網站位置、路徑有改變時所帶來的影響，另外就是有時路徑並不是如我們所想的那樣，也因為無法正確取得路徑或是難以取得正確路徑的緣故，而只能讓 javascript 程式碼繼續留在 View 頁面裡。
接下來就位各位說明如何在網站裡使用 RouteJs，讓我們可以在 Javascript 程式碼裡一樣可以使用類似 Url.Action() 的方法來取得正確的路徑。
現在寫網站應該很少不會碰到 Javascript 的，尤其是現在 Javascript Framework 越來越多樣、強大，不再是多年之前只被一般人視為用來做「特效」的前端功能而已，現在開發 ASP.NET MVC 網站時也一定會用到 Javascript，我在 View 的這個部分就會使用 jQuery 來完成前端作業，我們將網站切分為 M, V, C 三個部分的模式下，我們應該要使用「關注點分離」的觀念來開發每個部分，有關 Javascript 的操作，都會在 View 來完成，很少有機會在 Controller 去做處理，Model 就更不用說（是不會處理到前端的顯示），而所謂的「很少有機會在 Controller 去做處理」這個意思指的是在後端去「組 Javascript 程式碼」。
在開發 ASP.NET Web Forms 時，假如遇到要顯示一個 Javascript Alert 的動作，很多時候都是在後端去組 Javascript 程式碼，當 PostBack 後，頁面就會執行 Javascript Alert，但是這個動作到了 ASP.NET MVC 就會變得不一樣了，在 ASP.NET MVC 中用 ASP.NET Web Forms 相同的處理方式是行不通的，以致於很多人就會在這邊一直撞牆，這邊就簡單說明一下在 ASP.NET MVC 中對於 javascript Alert 的處理方式。
一段時間沒有寫文章了，算了算時間… 剛好是一個月，這麼久沒有寫文的結果就是忘了該怎麼寫文，所以就來寫個簡單的前端 Javascript 應用來暖暖身，這是我工作的專案中實際碰到的情況與解決方式，目前的專案中有一個區塊是依據會員的等級來顯示某些產品圖片，客戶主管想要讓更多的圖片可以顯示在區塊中，為了想要讓圖片做出區隔，於是就決定讓符合會員等級的產品圖片就還是以彩色顯示，而尚未符合等級的產品圖片就用灰階顯示，一開始的構想是如果要以灰階顯示產品圖片，就在處理產品圖片上傳的時候，以 C# 程式來產生一張灰階的圖片檔，但是專案已經有一堆的產品圖片資料了，不可能因為要做這個灰階顯示而讓既有的產品圖片重新上傳一次來產生灰階圖片檔案，或是另外寫程式去處理灰階檔案的產生，而且萬一以後客戶的需求不再只是圖片灰階顯示，而是想要讓顯示產品資訊的區塊也做灰階處理時，上述的方式就只是做一半而已…
於是就想到可以用前端的 Javascript 來處理這一個需求，但是 google 相關的 Javascript 套件都是會用到 HTML5 的 Canvas，為了避免客戶端無法顯示灰階效果的情況發生，所以就不能使用這些用到 Canvas 的套件，最後找到的就是「grayscale.js」這個套件，可以確保在 IE6 中正常顯示灰階效果。
這是一個老掉牙的一個功能，但問題就是常常都會有人問起，以往部落格也有針對連動式下拉選單寫了文章，
「jQuery 對下拉選單 DropDownList 的操作 - 2：連動下拉選單」
因為該文章的內容是有跟 ASP.NET MVC 做整合，所以對於有些沒有接觸過 ASP.NET MVC 的人就會看得模模糊糊的，很多對 Javascript 或是 jQuery 不熟的人做連動式下拉選單，大部分的情況就是直接 Google 然後找一個自己看得懂也改得動的來用，但問題是 …… 有了兩層式連動下拉選單就一定會有三層式連動下拉選單的需求，對於前端程式不是很熟悉而且只會複製貼上、修改的人來說，從兩層式連動換成三層式連動就會不知所措。
講這麼多，所以這邊文章接下來的內容就將會來練習如何做一個三層式連動的下拉選單，沒有 Server-Side 的程式，完全都是前端程式與文字資料的整合，所以看得懂的就看，看不懂的就回頭去好好練習 Javascript 與 jQuery，如果是想要找一個拿來修改就可以用的三層式連動下拉選單，可以就此打住而不必繼續往下，因為拿回去應該也不能用。
標題看起來很繞口而且也有些詞不達意，所以就簡單的用幾張圖以及說明文字來讓大家了解，
一般做網站都會有要製作圖文上稿的功能，有時候一篇文章還需要指定一張封面圖的需求，
但有時候某些版面的編排製作上，圖片只能夠顯示正方形的圖，如果使用者在後台上了一張長方形的圖，
而前台只能顯示正方形，所以就會變成……
在後台裡，我們是可以在使用者上傳圖片後對圖檔做檢查，只要不是符合正方形的圖片就擋回去，
但有時候我們工程師這樣的作法卻反而會引起很多使用者的反彈，因為不能較使用者都要會圖片裁剪的能力以及工具，
所以跟使用者拉鋸的情況下，使用者多半都會接納圖片變形的結果，而讓網頁看起來就是充滿變形的圖片。
其實這種情況也是有多種解決的方法，
例如說可以用之前介紹的圖片裁剪功能，讓使用者上傳圖片後，再去裁剪要顯示的範圍，不過就要多花功夫去做這部份的功能，
或者是說，使用者上傳圖片之後，讓程式自動去裁剪要顯示的範圍並另存成新圖檔，這也是個不錯的方式，這以後會講到。
不過比較簡單的方式還是透過前端 Javascript 程式的操作，讓前端的圖片自動顯示一個正方形範圍而且還有縮圖的效果，
接下來我們就來練習做這個功能。
這個系列的文章之前有介紹過了基本操作與幾種進階操作的使用方式，本篇文章將會介紹以下內容後來作為收尾，
P.S.
1.後兩個項目的進階操作會去修改到file-uploader.js的原始檔。
2.此三項功能的修改主要是針對非IE瀏覽器。
上篇文章「ASP.NET MVC上傳檔案,使用file-uploader : 基本操作」已經簡單的介紹過如何使用file-uploader，
接下來這篇文章將會介紹如何完成以下的進階操作項目：
網站專案大都會使用到上傳檔案的功能，而一般我們大多是直接使用form以及type為file的input element來完成，
例如：
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { id="FormUpload", enctype = "multipart/form-data" }))
{<p>
Upload File：<input type="file" id="uploadFile" name="uploadFile" size="23" />
<input type="button" id="ButtonUpload" value="Upload file" />
</p>
}
這樣的作法是最基本也是最標準的作法，
但是這樣的作法在每次送出檔案上傳到server端後，整個網頁都會Reoload，
於是網路上就有很多AJAX的上傳檔案套件可以讓我們來使用，
而這邊將會以一系列的文章來介紹如何在ASP.NET MVC的環境下使用「file-uploader」這個套件來製作檔案上傳的功能，
之前我們介紹了 LINQ to JavaScript (JSLINQ)的基本使用方式，而我們所下載的JSLINQ是2009年所發佈的版本，
在JSLINQ的Codeplex的網站上作者所簽入Source Code離最近一次的日期是 2010-11-13，
所以我們就來使用這Source Code裡最新版本的函式庫，新版本的函式庫中有新增了幾個function，
而我們就來看看這些新的function以及進行幾個進階操作。
在上一篇「前端處理JSON資料 - 轉為陣列以及簡單篩選」說明了如何使用 $.grep() 方法在前端程式中去篩選陣列中的資料，
但是如果要處理的篩選條件是比較複雜時，使用 $.grep() 依然是可行，但總會任人覺得不是那麼方便，
尤其是寫 C# 的開發者在 .NET Framework 3.5 之後對於集合資料的操作已經熟悉並且習慣了 LINQ 語法，
而在前端程式中卻沒有這樣方便的處理方式，在處理集合資料時就會覺得綁手綁腳的，
其實這情形早已經有人做了一個解決方案，「LINQ to JavaScript」( 簡稱為 JSLINQ )，
在2009年的時候在MSDN學習園地的CodePlex教學中就有對這個函式庫做介紹「LINQ to JavaScript: 在 JavsScript 也可以用 LINQ」
接下來就來說明一下使用的方式。
基本上計算日期的差距可以在後端的程式裡或是在資料庫中就可以解決，
但有些時候資料只會在前端出現而未後送到Server Side，或是說不想增加資料庫或是Server Side的負載，
所以就會將這種單純的顯示日期時間差距的計算工作給放到前端去做，
這樣做其實也是有好處的，好處就是讓Client Side去做這類瑣碎的計算，
因為不牽涉到太複雜的邏輯計算，也算是分擔後端的壓力。
所以接下來就會介紹三種方式來達成在Client Side去計算日期時間差距的功能。
因為開發的專案是一個有關會計系統的網站系統，所以頁面上的輸入欄位(TextBox)會相當的多，
而使用者輸入數字後通常不會再去抽出左手去按下Tab鍵讓輸入框的focus移到下一個，
通常使用者都是左手控制傳票或是指向要輸入數字的地方，而右手就是在鍵盤右方的數字鍵那邊一直輸入，
當輸入完一個欄位後就是直接按下數字鍵的Enter鍵，讓輸入框的focus移到下一個。
其實這一點都不是很難，而且網路上也有人針對此功能做出了相關的jQuery Plugin套件，
這裡就做個介紹與使用的方式。
如果開發的專案式屬於會計系統之類的，常常會有個基本的功能要求，
那就是TextBox所輸入的金額數字必須要能夠轉換為千分位，
所謂千分位就是每三位數就要用「，」逗號分隔，我想這應該每個人都知道的基本常識，
於是在開發專案的時候就參考了幾個網路上的Script之後，就寫了幾個function用來處理千分的需求。
其實一直很想寫下這一篇，但是又發現到其實很多人都會用Firefox + Firebug 的組核對前端網頁進行偵錯，
應該說，從事網頁設計、開發的從業人員都應該會用才對，
但是… 在我目前工作的公司裡，還真的有很多人不用、不會用、甚至是不知道有這樣的工具。
更有些人對於前端語言的偵錯方式還是使用那一套 alert() 大法，
就是在程式之中要偵錯的地方就是狂下 alert()，把要顯示的訊息給alert出來，
這方法不能說不好，但是偵錯的時候就去改變原始碼，然後修改完再去一一的把alert給移除，
萬一遺漏了一些的話，那麼就會看到上線的網頁會有些地方就出現不該出現的alert訊息視窗啦，使用者就認為這是BUG！
Firebug是個相當優異的前端偵錯工具，而且還有很多可以掛載在上面的套件，整合在Firebug之中，讓偵錯更加方便，
所以本篇不會是一篇教你如何使用Firebug來偵錯的Step教學，而是一篇介紹如何應用Firebug與Firebug外掛讓偵錯更加便利。
會介紹以下幾個Firebug的外掛工具：
在前端使用JavaScript ( jQuery ) 時，有時候在某些操作上不是那麼方便，
畢竟後端C#程式寫久了，而且也很習慣Visual Studio的智能顯示(IntelliSense)，
雖然說在VS2008後一直到目前的VS2010對於JavaScript( jQuery ) 的支援越來越好，也可以使用智能顯示，
但還是有些基本的方法還是要手動去寫程式擴充，
所以這邊就整理了三個有關在JavaScript對於String的屬性的擴充：
startsWith
endsWith
contains
連動式下拉選單在網站中也算是相當常見的功能，在ASP.NET WebForm裡，很多開發者都會直接在UpdatePanel中做解決，但是這樣的方式其實對於效能來說並不是很好，而往往很多開發者若是沒有對UpdatePanel做好配置的話，常常會有些開發者整個網頁就只有一個UadetePanel，這樣的Ajax也只能說是做假的，而有的開發者如果細分到每個下拉選單都給一個UpdatePanel，那在開發上也蠻瑣碎的，因為頁面上要做Ajax效果的地方通常也不是只有下拉選單而已。
而在ASP.NET MVC的ViewPage則是比較沒有這種顧慮，因為在MVC是用不到UpdatePanel，充分搭配 jQuery 下，ASP.NET MVC所做的Ajax效果是可以比WebForm來得更為靈活以及輕巧，以下就介紹幾種在ASP.NET MVC下製作連動式下拉選單的方法。
下拉選單在網頁表單上是個使用相當頻繁的物件，以前在還沒有使用 jQuery 時，對於下拉選單的操作就不是那麼的直覺與方便，現在有了 jQuery 之後，操作下拉選單就同如虎添翼一般，但是在專案執行的過程中，還是時常看到令人哭笑不得的操作方式，看久了就想整理一篇文章，記錄一下使用 jQuery 操作下拉選單的各種方法與心得，總之就是要消除不良寫法以及去除沒有效率的操作！
