ASP.NET MVC 聰明的刪除使用 MicrosoftAjax
- 1364
- 2
一般來說當清單頁面執行了刪除的功能後,都需要利用重新載入頁面的方式來讓清單更新,不然使用者一定會說為什麼刪除沒有效果,為了刪除而去重新整理一次頁面還滿耗資源的,所以有很多人會自行撰寫 AJAX 的方式來更新,雖然是不難但 ASP.NET MVC 內建就有了 jQuery 和 MicrosoftAjax ,所以對於刪除這件事情就可以做得更聰明更自然,以下就來看看吧。
- 檔案版本:2.0
- 最後更新:2012/1/1 下午 08:19:49
頁面必須確定有載入以下三個 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() 抓到後端傳回來的值後就可以判斷此次刪除是成功還是失敗,再來顯示對應的訊息與執行相關的動作,這樣的刪除方式,至少可以減少一次的查詢所以會快上許多。
網友回應
- Will

- 發表於: 2011-03-15
- 同樣的寫法,在 ASP.NET MVC 3 裡的 DeleteCall 函式裡已經不能使用 $(this) 了,因為 this 變成了 AjaxContext 物件。
-
我已經很久很久沒有使用 MicrosoftAjax 來實作相關的 AJAX 功能,這篇文章撰寫的時候是使用 ASP.NET MVC2,此篇文章的重點在於一個觀念,可以利用此種方式大幅降低伺服器的資源耗用,以我個人來說我還是建議各位使用 jQuery 來實作 AJAX 相關功能,為了避免其它網友實作上發生錯誤文章上方已經加上版本說明,感謝您的說明與提醒。
回覆於: 2011-03-15
- rex

- 發表於: 2011-03-15
- 你好,請問 $(this).parent().parent().remove(); 這個要怎麼取得? this是怎麼傳進去的呢?
-
回覆於: 2011-03-15因為在使用 AJAX 的時候有設定 OnSuccess = "DeleteCall" ,因此該 function 內的 this 就是【刪除】 這個 Tag