asp.net Web開發框架 (6) - 在Vue.js動態表格渲染中加上功能按鈕

接續著上一篇，我們這次拿這個WebAPI + Vue.js 的CRUD範例繼續討論。讀者可以點選這邊，看看這個範例的實際執行狀況。(如果該網站被我不小心殺掉，請FB訊息提醒我，網站裡面的資料由於是共用的，可能會被玩壞或出現詭異的內容，一概與本人無關XD )

這個網站的主畫面如下:

上一篇我們大致上說過，這些資料是透過伺服器端以JSON格式傳到前端，並且透過Vue.js的template rendering機制動態顯示出來的。

但我們沒有談到，上圖中每一個row最左邊的編輯/刪除鈕，是怎麼實現的，我們這一篇就來介紹這個部分。

在HTML Tempalte中加上功能按鈕

先前我們看過的HTML樣板，要加上Button很容易，但Button要有對應的功能，則需要透過v-on:click 指令:

你會發現，上面的第4,5兩行，多了兩個Button，就是編輯和刪除鈕，分別是呼叫到edit和remove這兩個javascript function，並且傳入item作為參數，還記得嗎?這個item就是第2行v-for裡面的item in items的那個item，也就是伺服器端傳來的資料集合中的一筆資料。

因此，當用戶點選這兩個Button，實際上會執行到的，就是Vue.js的vm裡面所定義的methods(位於12-22行) :

這個在Vue.js稱之為方法事件處理器。留意上述程式碼的第12-22行，其中的edit、remove，就是按下Vue.js動態渲染出的Button時，會觸發的JavaScript Functions(Methods)，由於帶入的參數是item，也就是按下哪一筆資料的Button，就把該筆資料作為參數帶入。因此function裡面的程式碼就不難理解了。

remove method的14-16行會出現confirm(…)視窗，如果用戶確認刪除，則調用Remove(item)這個我們自己寫的JavaScript Function。而19行則是edit method，功能是redirect網頁到AddNewOrUpdate.html，並帶入資料record的Guid作為QueryString參數(由於AddNewOrUpdate.html這個網頁因為同時包含新增與修改兩種功能，比較複雜我們改天討論)。

我們先看14-16行中所呼叫到的Remove(item)這個JavaScript，也就是上述程式碼的26-37行，如果熟悉我們這一系列文章的讀者肯定知道，其中的ExecuteAPI是我們框架提供的JavaScript function，他會呼叫到伺服器端的Remove()這個BO中的C# Method，並傳入guid當作參數。

後端刪除資料的方法

因此我們看後端的C# Code，果然，有一個叫做Remove(Guid guid)的方法:

該方法中的程式碼就是找到guid編號符合的資料，然後刪了它，接著呼叫GetData()這個我們先前介紹過的Method把所有資料以JSON格式回傳給前端，如此這般，達成了資料刪除的功能。

如果你仔細看程式碼，可能會發現，其實前端並沒有拿remove方法回傳過來的JSON，而是自己又呼叫了一次GetData()，為何要這樣寫呢? 這樣不是多呼叫了一次，讓效能變差嗎? 答案是…沒什麼特別原因，就是寫的時候不小心忘了，寫完後又懶得改而已…

所以，整段的重點在於，透過Vue.js做HTML樣板(Tempalte)動態渲染(Rendering)的時候，如果有某些tag需要觸發事件，可以在HTML Template當中直接透過 v-on，以事件處理器的方式，呼叫預先定義在Vue instance當中的Methods，達成所需的效果，就像是我們在上面這個例子中的Remove與edit一樣。

以上提到的完整程式碼都在 https://github.com/isdaviddong/AspNetWithVueBinding 請自行參考。

改天有空我們再繼續討論新增與修改的功能。
下一篇: asp.net Web開發框架 (7) - 使用Vue.js進行表單雙向繫結
--------------------------------------------
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。