2017年1月13日 星期五

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 請自行參考。

--------------------------------------------
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

沒有留言: