>天空的垃圾場 v3

ASP.NET MVC - WebGrid配合Ajax動態刪除WebGrid的Row

11 October 2011 — Written by Sky Chang
#ASP.NET MVC#JavaScript

WebGrid是ASP.NET MVC 3(含)以上版本才有的Html Helper，可以快速地將資料利用正規的HTML Table排列出來，簡單的說，就很像是以前的GridView。

前天我朋友問了我幾個問題，其中一個問題就是WebGrid，內容大致上是敘說，當資料利用WebGrid產生，而且裡面會配合Ajax的Delete功能，當按下刪除的時候，要怎才能動態刪除WebGrid的Row( 也就是Table的tr )，想當然爾，我很爽快的說，就配合jQuery，當刪除成功的時候，移除掉Row，就好啦；然後我朋友說，有那麼簡單，做給我看看吧!，結果，我花了一整晚的時間…。( 所以沒事不要太臭屁… )

平常我是用手工打造Table的!

其實，我平常的時候，還是會常常自己去利用Foreach產生Table，所以這種問題其實對手工打造的我沒甚麼影響，只要在每個迴圈中間，將每個tr的插入特定的id，到時候刪除的時候，再利用此id進行hide或是整個移除的動作，就可以了；但遇到WebGrid，當場我就發現了，感覺沒那麼簡單( 所以花了一整晚的時間尋找解法… )，因為WebGrid雖然可以於td裡面的標籤插入id，但是我卻找不到能在tr插入id的方法，後來有找到webgrid的selected等等的方法，但是感覺又沒有那麼的好做，所以最後我還是決定採用我自己的做法。

感覺不是很漂亮的方法

目前我使用的方法是在WebGrid產生的td標籤裡面的Delete( a標籤 )來插入id，然後再用jQuery的篩選器，來取得a標籤的父層標籤td，然後再取得td標籤的父層標籤( 也就是tr )，然後再隱藏整個tr，當然，我還是覺得不夠優雅XD，如果有更好的方法，未來再補上吧。

以下是程式碼：

@model IEnumerable<Customer>

@*
因為webGrid裡面不能設定tr id，所以將id設在於Delete a標籤內，
再利用jQuery取得父元素。
*@
<script type="text/javascript">
    function RemoveData(sn) {
        var trObject = $("#" + sn).parent().parent();
        trObject.hide("slow");
}
</script>

<div id="gridDiv">
@{var grid = new WebGrid(source: Model, defaultSort: "sn", ajaxUpdateContainerId: "gridDiv", rowsPerPage: 10);}

@*這裡特別注意Delete的地方，有特別設計tdNum作為辨識之用，如果刪除成功的話，就會呼叫RemoveData這個js，並把tdNum這個id傳入，
以利隱藏刪除後的Html*@
@grid.GetHtml(htmlAttributes: new { id = "grid" },
        columns: grid.Columns(
          grid.Column(format: item => Html.ActionLink("Edit", "Edit", new { id = item.sn })),
          grid.Column(format: item => Ajax.ActionLink("Delete", "Del", new { id = item.sn },
                              new AjaxOptions() { HttpMethod = "Delete", Confirm = "是否確定刪除?",
                                                  OnSuccess = string.Format("RemoveData('tdNum{0}')", item.sn ),
                              },
                          new { id = string.Format("tdNum{0}", item.sn) })),
          grid.Column("cname", "中文名稱")
     )
)
</div>

這樣就解決了…

Sky & Study4.TW