asp.net Web開發框架 (5) - 使用Vue.js進行前端資料繫結顯示(WebAPI版本)

前面寫過了在asp.net WebForms環境下使用Vue.js做DataBinding/UI Template Rendering，這一篇我們把焦點轉回WebAPI的版本。

如果使用前面介紹過的寫法，以WebAPI搭配Vue.js進行SPA Web應用程式開發，那前端的頁面可以是很單純的pure HTML，例如:

和先前介紹過的一樣，UI上進行Binding的部分只有60-90這一個區段，透過Vue.js的繫結語法{{item.xxxx}}把每一個屬性的值填入UI，而促使這個Binding生效的js程式碼位於14-21行，也就是SetBinding()這個javascript function。這個SetBinding()建立了vm_StudentInfo這個Vue instance，把HTML UI上的tableBody與vd_StudentInfo這個記憶體物件做了繫結。

因此，每當vm_StudentInfo的items屬性被更新時，Vue就會拿vd_StudentInfo中的數據來更新tableBody區塊中的UI。

而底下這段程式碼(24-31行)則是binding_StudentInfo的items屬性被更新的時機:

也就是畫面上的『Get Data』Button被按下去的時候。會透過ExecuteAPI呼叫伺服器端的WebAPI，因此底下的程式碼被執行(還記得這一大段WebAPI程式碼在幹嘛? 我們曾經在先前詳細的介紹過):

是面這段WebAPI身為服務層，任務就是動態載入並執行相對應的BO，因此進而運行到BO.Health.GetData這個GetData Method:

執行後的結果List<StudentInfo>會透過JSON回傳到前端，被透過Vue 的DataBinding(Template Rendering)機制顯示於螢幕上:

同樣的，按下上圖中的『清空』鈕之後畫面會被清空的原因也很好理解，我們只是把繫結物件的items屬性清空:

因為vm_StudentInfo.items 被設為 undefined(或其他空值)，則頁面上顯示的資料就被清空了，就是這麼簡單。

其他的部分我們在上一篇介紹過囉…(先前針對程式碼相關更完整的解釋請參考這裡)

source code : https://github.com/isdaviddong/AspNetWebFormsSpaVueBinding

更完整的WebAPI版本CRUD Source Code:
  https://github.com/isdaviddong/AspNetWithVueBinding

下一篇我們會接著介紹，如何在渲染HTML表格的時候，加上功能按鈕…
--------------------------------------------
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。