當使用者按下GridView的刪除按鈕時，如何讓使用者確認刪除

在ASP.NET我們常用的GridView、DetailsView控制項，都有提供內建的刪除功能，讓Developer可以很容易的開發資料維護功能，不過內建的刪除功能在刪除前並不會提示使用者是否確認刪除，導致於按下刪除後資料就真正從資料庫被刪掉，看起來似乎不夠嚴謹，因此我們可透過JavaScript來做到確認刪除的功能，說明如下：

若您的刪除功能是以CommandField實作（如下列程式碼的第8-9列），由於CommandField沒有Button控制項的OnClientClick屬性，所以無法直接設定Javascript至刪除按鈕。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataSourceID="SqlDataSource1" onrowdatabound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="RegionID" HeaderText="RegionID"
            SortExpression="RegionID" />
        <asp:BoundField DataField="RegionDescription" HeaderText="RegionDescription"
            SortExpression="RegionDescription" />
        <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False"
            ReadOnly="True" SortExpression="SN" />
        <asp:CommandField ShowDeleteButton="True" />
    </Columns>
</asp:GridView>

 

 

 

解決方式是在GridView的RowDataBound事件中利用Cell的Controls屬性找到型別為LinkButton的控制項，再來設定OnClientClick屬性所要執行的JavaScript。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        foreach (Control c in e.Row.Cells[3].Controls)
        {
            if (c is LinkButton)
            {
                LinkButton lbDel = c as LinkButton;
                lbDel.OnClientClick = @"if (confirm('Are you sure?') == false) return false;";
            }
        }
    }
}

 

 

 

另外一個更簡單的方法就是先把刪除按鈕轉成TemplateField。

 

轉成TemplateField前刪除按鈕為CommandField（如下圖左），轉成TemplateField後如下圖右的樣子，在自行於LinkButton上加上OnClientClick所要執行的JavaScript即可。

 

程式碼如下：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataSourceID="SqlDataSource1" onrowdatabound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="RegionID" HeaderText="RegionID"
            SortExpression="RegionID" />
        <asp:BoundField DataField="RegionDescription" HeaderText="RegionDescription"
            SortExpression="RegionDescription" />
        <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False"
            ReadOnly="True" SortExpression="SN" />
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
                    CommandName="Delete" Text="刪除"
                    OnClientClick="if (confirm('Are you sure?') == false) return false;">
                    </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>