錄製了一個短片，示範如何實作一個供使用者挑選多重項目的對話窗。此對話窗包含兩個 ListBox，一左一右，使用者能夠將左邊 listbox 中的項目選取並移動至右邊，或從右邊丟回左邊，以這種左右互傳的方式來選取多重項目。使用的工具是 Visual Studio 2012。
下圖為範例程式的執行結果：
影片在此：
影片有點長，一方面是因為練習步驟比較多，二方面是我也沒太多時間重新錄製和剪接影片。儘管事前準備了小抄，中間還是有點凸槌，有些地方停頓了一下（腦袋一片空白？），有時候還出現手機干擾的噪音（錄製時並未聽見，後製時已盡量刪除噪音）。缺點不少，不嫌棄的話，就湊和著看囉。
我想，即使對 ASP.NET MVC 不是那麼熟，照著影片來逐步練習，應該也能順利完成。若拿來當作 ASP.NET MVC 的入門練習題目，或許也是不錯的選擇，儘管會碰到不少問題，但如果耐心做完每一個步驟，碰到不懂的地方就查一下相關資料，便可順便學習 ASP.NET MVC 的一些基本技巧，例如 Bundling、View Model、Partial View、Razor 語法等等。當然，還有 jQuery。
完整範例程式碼可至 CodePlex 網站下載。
範例程式使用的 Northwind 資料庫也可以至 CodePlex 網站下載。
參考資料
下圖為範例程式的執行結果：
影片在此：
影片有點長，一方面是因為練習步驟比較多，二方面是我也沒太多時間重新錄製和剪接影片。儘管事前準備了小抄，中間還是有點凸槌，有些地方停頓了一下（腦袋一片空白？），有時候還出現手機干擾的噪音（錄製時並未聽見，後製時已盡量刪除噪音）。缺點不少，不嫌棄的話，就湊和著看囉。
範例程式使用的 Northwind 資料庫也可以至 CodePlex 網站下載。
參考資料
- jQuery Plugin: List Mover Box （程式碼太舊了）
- Dual Listbox jQuery Plug-in
- How to move items between ListBox using jQuery
- Dual listboxes in jquery
- jQuery: Move items from one listbox to other
- jQuery AJAX POST example
- jQuery取得JSON資料 by 阿達隨筆
謝謝版主分享，還錄製影片真是佛心來的
回覆刪除其實我自己也想再實作一遍，就順便啦...不過花的時間還是超過原先想像 XD
回覆刪除