Scott Mitchell 的ASP.NET 2.0資料教程之四十二::為刪除資料添加用戶端確認

原文 | 下載本教程中的編碼例子 | 下載本教程的PDF版

導言

如我們在綜敘：在DataList裡編輯和刪除資料   裡看到的，為DataList添加刪除功能可以通過以下完成：

1. 在ItemTemplate裡添加Button, LinkButton, 或ImageButton 
2. 將Delete button的 CommandName 設為“Delete”
3. 在DeleteCommand事件處理裡調用合適的BLL delete 方法 (然後重新綁定資料，來讓剛刪除的項不再在DataList裡顯示).

對使用者而言，上面的過程是點一個項的刪除按鈕，引起postback，然後刪除選頂的項並從DataList裡移除它。當使用者點刪除按鈕時，還缺少確認的步驟。如果一個使用者想點編輯按鈕，而不小心點到了刪除，那麼他原本想更新的記錄會被刪除掉。為了防止這樣的情況發生，我們可以在刪除按鈕被點時添加一個用戶端的確認。

JavaScrip confirm(string) function將輸入參數string作為文本顯示在一個包含兩個按鈕- OK 和Cancel - 的對話方塊裡，見圖1。confirm(string) function根據被點的button返回一個Boolean 類型的值（如果點OK則返回true，點Cancel則返回false）。

圖 1: 用戶端對話方塊

在提交form的過程中，如果用戶端事件處理返回一個false，瀏覽器將取消提交。使用這個特性，我們可以讓刪除按鈕的用戶端onclick事件處理返回調用 confirm("Are you certain that you want to delete this product?")的值。如果使用者點取消，confirm(string)會返回false，這樣提交就會被取消。沒有引起postback，因此被點刪除按鈕的product也不會被刪除。如果使用者點了OK按鈕，postback會繼續記性，product會被刪除。更多的資訊參考Using JavaScript’s confirm() Method to Control Form Submission

本章我們將學習如果為DataList的刪除按鈕加上這樣的用戶端確認。

注意：使用用戶端確認，比如本章討論的，需要假設你的使用者使用支援js的瀏覽器並且開啟了js支援。如果沒有的話，點刪除按鈕會馬上引起postback（不顯示確認對話方塊）並刪除記錄。

第一步: 建立一個包含刪除按鈕的 DataList

在學習如何添加用戶端確認前，我們需要一個記錄可以被刪除的DataList。先開啟EditDeleteDataList檔案夾下的ConfirmationOnDelete.aspx頁，拖一個DataList進來，將ID設為Products。然後從智能標籤裡建立一個名為ProductsDataSource的ObjectDataSource。用ProductsBLL類的GetProducts()配置它。見圖2。由於我們將在DeleteCommand事件處理裡直接調用BLL來執行刪除，因此在INSERT, UPDATE, 和 DELETE 標籤裡都選擇"(None)"，見圖3。

圖 2: 配置 ProductsDataSource

圖 3: 在INSERT, UPDATE, 和 DELETE 標籤裡選擇“(None)”

完成了這些配置後，Visual Studio 會為DataList產生預設的ItemTemplate— 每個資料欄位以Label來顯示值。修改ItemTemplate讓它只顯示product的name，category和supplier。然後添加一個刪除按鈕，並將CommandName屬性設為“Delete”。完成這些修改後，DataList和ObjectDataSource的聲明代碼看起來應該如下：

ASP.NET

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<asp:DataList ID="Products" runat="server" DataKeyField="ProductID" DataSourceID="ProductsDataSource"> <ItemTemplate> <h3> <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>' /> </h3> Category: <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> <br /> Supplier: <asp:Label ID="SupplierNameLabel" runat="server" Text='<%# Eval("SupplierName") %>' /> <br /> <br /> <asp:Button runat="server" ID="DeleteButton" CommandName="Delete" Text="Delete" /> <br /> <br /> </ItemTemplate> </asp:DataList> <asp:ObjectDataSource ID="ProductsDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts" TypeName="ProductsBLL"> </asp:ObjectDataSource>

圖 4 是瀏覽該頁的樣子。由於還沒有建立DeleteCommand事件處理，這時點刪除按鈕僅僅只引起postback而不會影響別的。

圖 4: 顯示每個Product的 Name, Supplier, Category  和Delete Button

第二步: 添加DeleteCommand Event Handler

當使用者點刪除按鈕時，引起postback，激發ItemCommand和DeleteCommand。ItemCommand事件在每次DataList裡引起Command事件時激發。DeleteCommand事件是由於引起Command事件的button的CommandName被設為“Delete”而被激發。

為了刪除被點了刪除按鈕的記錄，我們需要：

• 建立DeleteCommand 事件處理
• 擷取被點刪除按鈕的項的ProductID
• 調用ProductBLL 類的 DeleteProduct 方法
• 重新綁定資料到 DataList

相關的代碼如下。對代碼的詳細解釋請參考綜敘：在DataList裡編輯和刪除資料 。

C#
1 2 3 4 5 6 7 8 9 10 11 12	protected void Products_DeleteCommand(object source, DataListCommandEventArgs e) { // Read in the ProductID from the DataKeys collection int productID = Convert.ToInt32(Products.DataKeys[e.Item.ItemIndex]); // Delete the data ProductsBLL productsAPI = new ProductsBLL(); productsAPI.DeleteProduct(productID); // Rebind the data to the DataList Products.DataBind(); }

第三步: 為刪除按鈕添加用戶端確認

完成DeleteCommand事件處理後，最後的工作是為刪除按鈕添加用戶端確認。這個可以通過聲明語言或編碼完成。最簡單的方法是通過Button的OnClientClick property來指定確認的聲明語言。然而如果確認的資訊或邏輯在運行時才能決定，那麼我們可以在ItemDataBound事件處理裡引用Delete button然後編程設定它的OnClientClick屬性。

我們下面將探討這兩種方法。首先是聲明語言的方法。僅僅只需要設定Button的OnClientClick屬性為return confirm(message).比如將確認資訊指定為“Are you certain that you want to delete this product?”，你可以按如下修改刪除按鈕的聲明語言。

ASP.NET
1 2	<asp:Button runat="server" ID="DeleteButton" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this product?');" />

現在點刪除按鈕會顯示一個確認對話方塊，見圖5。只有在使用者點OK的情況下，postback才發生並且product被刪除。

圖 5: 點Delete Button 會顯示一個用戶端對話方塊

 

注意：如果傳給confirm function的字串裡有分隔字元號，我們需要使用“\”來進行轉義。也就是說，如果你的字串為“You’re sure you want to do this?”你需要寫成return confirm('You\'re sure you want to do this?');.

在顯示靜態確認對話方塊時聲明的方式非常好。如果需要逐項的自訂確認資訊，我們需要通過編程來設定這個屬性。DataList的ItemDataBound事件在每條記錄綁定到DataList後激發。我們需要引用刪除按鈕，並編程來根據綁定到DataList的項的資料來設定它的OnClientlick屬性。下面的代碼解釋了如何在確認資訊裡包含product的name。

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

protected void Products_ItemDataBound(object sender, DataListItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { // Reference the data bound to the DataListItem Northwind.ProductsRow product = (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row; // Reference the Delete button Button db = (Button)e.Item.FindControl("DeleteButton"); // Assign the Delete button's OnClientClick property db.OnClientClick = string.Format("return confirm('Are you sure that you want to delete" + " the product {0}?');", product.ProductName.Replace("'", @"\'")); } }

由於ItemDataBound事件在所有行綁定到DataList時都被激發— 包括header, footer, 和separator items —所以首先保證我們處理的是item 或alternating item非常重要。然後我們擷取DataListItem的DataItem屬性，它包含了一個ProductsRow執行個體的引用。最後通過FindControl("controlID")引用刪除按鈕，並給確認資訊賦值。注意product的name裡的分隔字元號都被轉義了。

完成這些後，瀏覽頁面。現在點刪除按鈕，確認資訊裡會包含product的name。圖6是當點Chai Tea的刪除按鈕時的輸出。

圖 6: 確認對話方塊裡包含Product的Name

總結

 JavaScript confirm(string) function 通常被用來控制form提交的流程。當執行時，這個函數顯示一個用戶端的強制回應對話方塊，它包含兩個button， OK 和Cancel。如果使用者點OK ，confirm(string) function會返回true。點Cancel 會返回false。這個功能和瀏覽器在提交過程裡有任何的事件處理返回false的話就取消提交的行為串聯起來，可以用來在刪除記錄時顯示確認對話方塊。

confirm(string) function 可以通過Button控制項的OnClientClick屬性和Button的用戶端onclick事件處理關聯。當處理DataList裡的刪除按鈕時，這個屬性可以通過聲明語言或編程來設定。如我們本章看到的那樣。

祝編程愉快!