2011年10月11日

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

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>

這樣就解決了…

沒有留言:

張貼留言