demoshop

版本

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() 抓到後端傳回來的值後就可以判斷此次刪除是成功還是失敗，再來顯示對應的訊息與執行相關的動作，這樣的刪除方式，至少可以減少一次的查詢所以會快上許多。

---