asp.net Web開發框架 (7) - 使用Vue.js進行表單雙向繫結
先前我們分別討論過了使用Vue.js進行表格資料渲染以及渲染時動態產生的功能性按鈕之後，接著，我們來看Vue.js在表單上的資料繫結。
範例依舊是我們先前使用的那個:
source code : https://github.com/isdaviddong/AspNetWithVueBinding
測試網址: http://ex20170110-aspnetwithvuebinding.azurewebsites.net/
(如果該網站被我不小心殺掉，請FB訊息提醒我，網站裡面的資料由於是共用的，可能會被玩壞或出現詭異的內容，一概與本人無關XD )
看過了先前的介紹之後，你大概已經知道，動態產生的『編輯』鈕:
該按鈕會在用戶點選時，將畫面導入到AddNewOrUpdate.html這個頁面，進行編輯的動作，而首頁上的新增鈕，其實也是將網頁導入到AddNewOrUpdate.html這個頁面。唯一的差異在，如果是按下編輯鈕，該筆紀錄的guid會被帶入:
這個動作怎麼實現的，答案在我們先前進行動態Button渲染時候的Vue instance中的edit method:
這使得如果用戶按下的是新增鈕，AddNewOrUpdate.html這個頁面將不會收到QueryString，若用戶按下的是編輯鈕，則是用戶欲編輯的record的guid。
因此，我們就不難理解AddNewOrUpdate.html這個頁面一開始進入後的javaScript code，就是判斷是否有Guid:
我們把guid保留在12行的變數中，30行之後的document ready，則是判斷是否有guid，如果有，則在36行呼叫LoadData，把該筆資料載入。而不管有沒有資料，31行的SetBinding都會把UI上的HTML表單與記憶中的vd_StudentRec做繫結:
所以你不難猜到，LoadData這個function，在從遠端載入完資料之後，會放到哪一個地方? (別往下看，先想一下…)
答案當然是:
記憶體中的vd_StudentRec，沒錯。其實，上面這段程式碼是為了說明，否則在實務上你把回傳的資料result.Data，直接放入Vue.js的instance就好(vm_student.rec=result.Data)，因為vm_student.rec根本就是vd_StudentRec的代理。
好的，資料塞入vm_student.rec，會觸發Binding，Vue.js的Binding Engine會去找HTML UI上的Form_StudentRec:
然後它發現你寫的v-model指令，這表示該欄位要進行雙向繫結(two-way binding)，因此，Vue.js engine就會把你繫結的物件vd_StudentRec中的屬性值帶入，這就是畫面上的表單資料會自動呈現的原因。
同樣的，由於是Vue.js是設定雙向繫結，因此進入AddNewOrUpdate.html這個頁面之後，不管是有沒有透過QueryString的參數載入一筆預設的資料，任何表格上使用者的異動都會被反應到記憶體中的vd_StudentRec物件中，因此，當用戶按下畫面上的『新增/更新』鈕:
頁面上的JavaScript程式碼，做的就是把記憶體中的vd_StudentRec物件中的值，透過呼叫後端的AddNewOrUpdate方法，寫回後端資料庫中，程式碼如下:
後端的AddNewOrUpdate方法也很簡單，就是取得傳入的物件，然後判斷一下是否有guid(1)，如果沒有，應該是新增(2)，如果有，就從資料庫中找出來更新(3):
就這樣而已，相當單純。
以上提到的完整程式碼都在 https://github.com/isdaviddong/AspNetWithVueBinding 請自行參考。
下一篇: asp.net Web開發框架 (8) - 使用krajee進行非同步檔案上傳
--------------------------------------------
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。
留言