ASP.NET MVC 聰明的刪除使用 MicrosoftAjax
- 2010-07-04
- 15073
- 0
- 版本
- 2.0
一般來說當清單頁面執行了刪除的功能後,都需要利用重新載入頁面的方式來讓清單更新,不然使用者一定會說為什麼刪除沒有效果,為了刪除而去重新整理一次頁面還滿耗資源的,所以有很多人會自行撰寫 AJAX 的方式來更新,雖然是不難但 ASP.NET MVC 內建就有了 jQuery 和 MicrosoftAjax ,所以對於刪除這件事情就可以做得更聰明更自然,以下就來看看吧。
頁面必須確定有載入以下三個 JS (有順序)
<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
利用內建的 List 樣板來加上一個 刪除的連結
<%= Ajax.ActionLink("刪除", "Delete", new { id = item.ID }, new AjaxOptions { Confirm = "確定要刪除?", HttpMethod = "Post", OnSuccess = "DeleteCall" }, new {id=item.ID })%> |
這部份應該是很容易看得懂,利用了 Ajax Helper 建立了一個 AJAX 的連結,並且利用 AjaxOptions 來設定一個 Confirm 指定使用 Post【ASP.NET MVC 刪除一定要注意寫法!!】 ,完成的時候執行一個 DeleteCall 函式,重點就是 DeleteCall 這個 javascript 的函式。
function DeleteCall(data) { if (data.get_data() == "1") { alert('刪除成功!'); $(this).parent().parent().remove(); //這部份會依序你的HTML不同而不同! } else { alert('刪除失敗!'); } }
要抓到 MicrosoftAjax 返回的值是使用 data.get.data() 這個方法來取得,而後端的程式碼並不在本次討論範圍中因此就跳過不示範了,使用 data.get.data() 抓到後端傳回來的值後就可以判斷此次刪除是成功還是失敗,再來顯示對應的訊息與執行相關的動作,這樣的刪除方式,至少可以減少一次的查詢所以會快上許多。
回應討論