jQuery.ajax()可以簡寫為$.ajax().
以前有寫過MVC刪除的實現,如《MVC實現刪除數據庫記錄》 http://www.cnblogs.com/insus/p/3368042.html 和《MVC 5顯示、創建、編輯、刪除等功能實練》http://www.cnblogs.com/insus/p/3372916.html 。不過此次Insus.NET想使用jQuery.ajax()方法來實現。
能實現到此功能,也有遇上很多困難以及花費很多時間。當你看到此篇時,你會看到Insus.NET的分享,而讓你少走彎路喔。
既然要做到刪除數據,數據是在數據庫中,因此從數據庫入手,寫一個刪除的存儲過程:
回到MVC的應用程序,在Entities目錄下,修改FruitEntity.cs,添加一個方法,如下:
保存好之后,修改MVC的控制器FruitController.cs,添加一個httppost屬性的Delete(Fruit objFruit)的Action。
只要稍對MVC有所了解的人,看上去那都是相當簡單。OK,現在要去視圖Index.cshtml,此視圖就是《MVC應用jQuery動態產生數據》http://www.cnblogs.com/insus/p/3410138.html 。我們需要在其基礎上修改並添加按鈕,能讓其刪除數據。
先對視圖中靜態的html添加form和一列,參考下圖高亮部分:
然后修改jQuery動態產生的Html的代碼,添加一個hidden input,是用來存儲記錄的主鍵值。添加另一個是一個銨鈕,可以讓用戶點擊此銨鈕,可以刪除當前記錄。
接下來,我們可以寫jQuery.ajax()方法,對記錄進行刪除。開始之前,需要想一些問題,上面銨鈕是jQuery動態產生的,怎樣才能找到它,並附於click事件。另外的是那個hidden的隱藏主鍵值,也是jQuery動態產生的,怎樣在ajax post時,獲取當前行的主鍵值?說句實在話,這部分花上Insus.NET不少時間,才解決它們,也算是學習jQuery查閱資料最多的問題。
在jQuery的1.10.2/jquery.min.js,可以找到一個delegate()方法,可以對動態產生的html簽標,啟用事件委托。上圖中的#48行與#49行的功能是一樣的,均是獲取記錄的主鍵值。而#53行代碼,是在數據庫記錄刪除成功之后,需應該remove()刪除table行。
沒有實踐過時,實現起來,肯定是會有相當的難度,不過$.ajax()刪除實現之后,就會覺得它又是那樣的簡單與容易。
再看看實時操作演示,實例中沒有實現點擊刪除時,先給個確認提示功能,不過此功能你可以在這里看到《MVC刪除操作前confirm提示》http://www.cnblogs.com/insus/p/3400717.html