Scott Mitchell 的ASP.NET 2.0數據教程之四十二::為刪除數據添加客戶端確認

導言

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

在ItemTemplate里添加Button, LinkButton, 或ImageButton
將Delete button的 CommandName 設為“Delete”
在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

<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#

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

<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#

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里的刪除按鈕時，這個屬性可以通過聲明語言或編程來設置。如我們本章看到的那樣。

祝編程愉快!

Scott Mitchell 的ASP.NET 2.0數據教程之四十二::為刪除數據添加客戶端確認