本隨筆,在html利用fetch去call web api對資料進行新增,修改,更新和刪除。
資料庫與儲存過程,此處略過...
建立entity,方便web api進行互動。
現在可以寫Web API,
html 實現新增資料,
js file,
上面新增的資料,將以下面的資料列呈現,
Insus.NET只是在html靜態寫了資料的表頭。資料將是在js動態生成。
動態生成資料行,還有幾個按鈕 input type as button,當然其的 click事件也將是動態的。
上面的js截圖中,還有#1,2,3,4個子function,下面分別詳細解釋與說明。
function dynamic_table_rendering(data):
function picturebutton_eventlistener(data):
function detailbutton_eventlistener(data):
function deletebutton_eventlistener(data):
最後分析一下資料詳細,資料接收傳過來的引數,以及fetch對api的操作,如更新,刪除等。
function reload_data() 本次Insus.NET實現從資料庫重新載入,與前幾篇實現不相同。
即是傳入記錄主鍵,去資料庫select得到更新後的資料。
雖說是從資料搜尋來重新載入,但是Insus.NET有想過,頁面重新整理時,卻是要localStorage來載入,上面截圖#84行程式碼。
接下來,我們看看刪除的功能實現。
Insus.NET由於第1次使作 fetch,諸多程式碼沒有寫得完美,或許還不足之處,望日後有強勁....