2024年,是Insus.NET生命中轉折的一年,許久沒有更新部落格了。
許多網友在通訊或郵件私聊,希望在部落格上更新內容,分享一些技能與通用的博文。
迴歸正題,在C# mvc使用javascript axios訪問web api。
在ms sql server建立資料表
儲存過程...
C# MVC程式與資料庫互動,建立entity:
上面的entity,有傳引數與無引數傳入的,有把datatable 轉為IEnumerable和直接執行儲存過程的。當然,還有一個類別BizSP sp = new BizSP(),可以在本部落格上搜尋得到。
model:
controller:
接下來,建立web api 2:
下面展開GetCustomers()和Insert()說明一下,Update和Delete介面可以參考Insert來實現。
此時,會有網友會看到,還有一個repsonse類,它是什麼來的,其實它只是Insus.NET為了方便前端call其所得到的一些資料而已。
views:
這3個檢視,僅是html,input text button以及引用javascript。
下面為檢視CustList.cshtml的js的部分程式碼:
在List檢視中,資料行皆動態產生,並在每行資料最後一列產detail和delete 2個button。
上面截圖中,
#1動態產生資料行。
#2產生的detail 按鈕臨聽click enent事件。
#3 生成的delete按鈕addEventListener 監聽click行為。
其中,function DetailButton_EventListener(data)內,有此程式碼需要解釋一下,
#A 連結至詳細頁面,此時,我們不只傳記錄主鍵,到詳細面再去從資料庫獲取資料,而是為了效率,我們只需要把本筆資料從列表面內取得,傳過去即可。
#B 這是一個js函式,把資料透過#C上傳至asp.net mvc的控制器Controller來對傳過來的資料進行處理。
下面是function DeleteButton_EventListener(data)函式:
最後效果,