C# + html + fetch + API + javascript

Insus.NET發表於2024-12-01

本隨筆,在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,諸多程式碼沒有寫得完美,或許還不足之處,望日後有強勁....






相關文章