MVC使用jQuery.ajax()刪除數據


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM