.NET Walker | asp net使用vue
前面[1]寫過了在asp.netWebForms環境下使用Vue.js做DataBinding/UITemplateRendering,這一篇我們把焦點轉回WebAPI的版本。如果使用前面介紹過的寫法[2],以WebAPI搭配Vue.js進行SPAWeb應用程式開發,那前端的頁面可以是很單純的pureHTML,例如:和先前[3]介紹過的一樣,UI上進行Binding的部分只有60-90這一個區段,透過Vue.js的繫結語法{{item.xxxx}}把每一個屬性的值填入UI,而促使這個Binding生效的js程式碼位於14-21行,也就是SetBinding()這個javascriptfunction。這個SetBinding()建立了vm_StudentInfo這個Vueinstance,把HTMLUI...
前面[1]寫過了在asp.net WebForms環境下使用Vue.js做DataBinding/UI Template Rendering,這一篇我們把焦點轉回WebAPI的版本。
如果使用前面介紹過的寫法[2],以WebAPI搭配Vue.js進行SPA Web應用程式開發,那前端的頁面可以是很單純的pure HTML,例如:
和先前[3]介紹過的一樣,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程式碼在幹嘛? 我們曾經在先前詳細的介紹過):[4]
是面這段WebAPI身為服務層,任務就是動態載入並執行相對應的BO,因此進而運行到BO.Health.GetData這個GetData Method:
執行後的結果List<StudentInfo>會透過JSON回傳到前端,被透過Vue 的DataBinding(Template Rendering)機制顯示於螢幕上:
同樣的,按下上圖中的『清空』鈕之後畫面會被清空的原因也很好理解,我們只是把繫結物件的items屬性清空:
因為vm_StudentInfo.items 被設為 undefined(或其他空值),則頁面上顯示的資料就被清空了,就是這麼簡單。