2017年1月10日 星期二

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

沒有留言: