.NET Walker | asp.net mvc vue template
接續著上一篇[1],我們這次拿這個WebAPI+Vue.js的CRUD範例[2]繼續討論。讀者可以點選這邊[3],看看這個範例的實際執行狀況。(如果該網站被我不小心殺掉,請FB訊息[4]提醒我,網站裡面的資料由於是共用的,可能會被玩壞或出現詭異的內容,一概與本人無關XD)這個網站的主畫面如下:上一篇[5]我們大致上說過,這些資料是透過伺服器端以JSON格式傳到前端,並且透過Vue.js的templaterendering機制動態顯示出來的。但我們沒有談到,上圖中每一個row最左邊的編輯/刪除鈕,是怎麼實現的,我們這一篇就來介紹這個部分。在HTMLTempalte中加上功能...
接續著上一篇[1],我們這次拿這個WebAPI + Vue.js 的CRUD範例[2]繼續討論。讀者可以點選這邊[3],看看這個範例的實際執行狀況。(如果該網站被我不小心殺掉,請FB訊息[4]提醒我,網站裡面的資料由於是共用的,可能會被玩壞或出現詭異的內容,一概與本人無關XD )
這個網站的主畫面如下:
上一篇[5]我們大致上說過,這些資料是透過伺服器端以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稱之為方法事件處理器[6]。留意上述程式碼的第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參數(由於AddN...