2017年1月5日 星期四

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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2 則留言:

Unknown 提到...

請問 System.Web.Http 要到何處尋找安裝? vs2015

isDavid 提到...

跟著WebAPI來的...

建議開新的Project時,選擇Empty,並勾選WebAPI。

參考:
http://studyhost.blogspot.tw/2016/12/aspnet-web-2-spa.html

建立最基本(Empty)的Web Application(別忘了至少要勾選WebAPI)那段...