C# mvc +axios + web api + javascript

Insus.NET發表於2024-11-30

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)函式:

最後效果,

相關文章