asp.net Web開發框架 (5) - 使用Vue.js進行前端資料繫結顯示(WebAPI版本)
前面寫過了在asp.net WebForms環境下使用Vue.js做DataBinding/UI Template Rendering，這一篇我們把焦點轉回WebAPI的版本。
如果使用前面介紹過的寫法，以WebAPI搭配Vue.js進行SPA Web應用程式開發，那前端的頁面可以是很單純的pure HTML，例如:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>asp.net WebAPI SPA with Vue.js Binding </title> | |
| <script src="Scripts/jquery-1.9.1.min.js"></script> | |
| <script src="Scripts/vue.min.js"></script> | |
| <script src="Scripts/isRockFx.js"></script> | |
| <link href="Content/bootstrap.min.css" rel="stylesheet" /> | |
| <script> | |
| var vd_StudentInfo; | |
| var vm_StudentInfo; | |
| //設定資料繫結 | |
| function SetBinding() { | |
| vm_StudentInfo = new Vue( | |
| { | |
| el: '#tableBody', | |
| data: { items: vd_StudentInfo }, | |
| }); | |
| } | |
| //從伺服器端取得資料 | |
| function GetData() { | |
| ExecuteAPI('Example', 'GetData', null, | |
| //success | |
| function (result) { | |
| vm_StudentInfo.items = result.Data; | |
| } | |
| ); | |
| } | |
| //清空 | |
| function Clear() { | |
| vm_StudentInfo.items = undefined; | |
| } | |
| //ready | |
| $(function () { | |
| SetBinding(); | |
| $('#ButtonGetData').click(GetData); | |
| $('#ButtonClear').click(Clear); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <div class="col-md-12" style="margin: 10px"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"> | |
| 範例 : Vue.js 資料表前端Template Rendering (WebAPI版) | |
| </div> | |
| <div class="panel-body"> | |
| <button type="button" id="ButtonGetData" class="btn btn-primary">Get Data</button> | |
| <button type="button" id="ButtonClear" class="btn btn-primary">清空</button> | |
| </div> | |
| <br /> | |
| <!-- 表格開始 --> | |
| <div style="margin: 10px" id="tableBody"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th style="min-width: 45px">姓名</th> | |
| <th style="min-width: 45px">身高</th> | |
| <th style="min-width: 45px">體重</th> | |
| <th style="min-width: 45px">BMI</th> | |
| <th style="min-width: 45px">備註</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr v-for="item in items"> | |
| <td> | |
| <span>{{item.StudentName}}</span> | |
| </td> | |
| <td> | |
| <span>{{item.Height}}</span> | |
| </td> | |
| <td> | |
| <span>{{item.Weight}}</span> | |
| </td> | |
| <td> | |
| <span>{{item.BMIValue}}</span> | |
| </td> | |
| <td> | |
| <span>{{item.Memo}}</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </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:
| public ExecuteCommandDefaultResult<List<StudentInfo>> GetData() | |
| { | |
| //準備假資料 | |
| List<StudentInfo> returnData = new List<StudentInfo>(); | |
| returnData.Add(new StudentInfo { StudentName = "王曉明", Height = 170, Weight = 72 }); | |
| returnData.Add(new StudentInfo { StudentName = "張曉春", Height = 180, Weight = 75 }); | |
| returnData.Add(new StudentInfo { StudentName = "田豐盛", Height = 175, Weight = 60 }); | |
| returnData.Add(new StudentInfo { StudentName = "楊明山", Height = 165, Weight = 90 }); | |
| returnData.Add(new StudentInfo { StudentName = "令狐衝", Height = 172, Weight = 80 }); | |
| //計算BMI | |
| foreach (var item in returnData) | |
| { | |
| var height = item.Height / 100; | |
| item.BMIValue = item.Weight / (height * height); | |
| if (item.BMIValue > 30) | |
| item.Memo = "過重!"; | |
| if (item.BMIValue < 20) | |
| item.Memo = "太瘦!"; | |
| } | |
| //回傳 | |
| return new ExecuteCommandDefaultResult<List<StudentInfo>>() | |
| { | |
| isSuccess = true, | |
| Data = returnData | |
| }; | |
| } |
執行後的結果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專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。
留言
建議開新的Project時，選擇Empty，並勾選WebAPI。
參考:
http://studyhost.blogspot.tw/2016/12/aspnet-web-2-spa.html
建立最基本(Empty)的Web Application(別忘了至少要勾選WebAPI)那段...