Scott Mitchell 的ASP.NET 2.0數(shù)據(jù)教程之四十二::為刪除數(shù)據(jù)添加客戶端確認(rèn)

導(dǎo)言

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

在ItemTemplate里添加Button, LinkButton, 或ImageButton
將Delete button的 CommandName 設(shè)為“Delete”
在DeleteCommand事件處理里調(diào)用合適的BLL delete 方法 (然后重新綁定數(shù)據(jù)，來讓剛刪除的項(xiàng)不再在DataList里顯示).

對用戶而言，上面的過程是點(diǎn)一個(gè)項(xiàng)的刪除按鈕，引起postback，然后刪除選頂?shù)捻?xiàng)并從DataList里移除它。當(dāng)用戶點(diǎn)刪除按鈕時(shí)，還缺少確認(rèn)的步驟。如果一個(gè)用戶想點(diǎn)編輯按鈕，而不小心點(diǎn)到了刪除，那么他原本想更新的記錄會被刪除掉。為了防止這樣的情況發(fā)生，我們可以在刪除按鈕被點(diǎn)時(shí)添加一個(gè)客戶端的確認(rèn)。JavaScrip confirm(string) function將輸入?yún)?shù)string作為文本顯示在一個(gè)包含兩個(gè)按鈕- OK 和Cancel - 的對話框里，見圖1。confirm(string) function根據(jù)被點(diǎn)的button返回一個(gè)Boolean 類型的值（如果點(diǎn)OK則返回true，點(diǎn)Cancel則返回false）。

圖 1: 客戶端對話框

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

本章我們將學(xué)習(xí)如果為DataList的刪除按鈕加上這樣的客戶端確認(rèn)。

注意：使用客戶端確認(rèn)，比如本章討論的，需要假設(shè)你的用戶使用支持js的瀏覽器并且開啟了js支持。如果沒有的話，點(diǎn)刪除按鈕會馬上引起postback（不顯示確認(rèn)對話框）并刪除記錄。

第一步: 創(chuàng)建一個(gè)包含刪除按鈕的 DataList

在學(xué)習(xí)如何添加客戶端確認(rèn)前，我們需要一個(gè)記錄可以被刪除的DataList。先打開EditDeleteDataList文件夾下的ConfirmationOnDelete.aspx頁，拖一個(gè)DataList進(jìn)來，將ID設(shè)為Products。然后從智能標(biāo)簽里創(chuàng)建一個(gè)名為ProductsDataSource的ObjectDataSource。用ProductsBLL類的GetProducts()配置它。見圖2。由于我們將在DeleteCommand事件處理里直接調(diào)用BLL來執(zhí)行刪除，因此在INSERT, UPDATE, 和 DELETE 標(biāo)簽里都選擇"(None)"，見圖3。

圖 2: 配置 ProductsDataSource

圖 3: 在INSERT, UPDATE, 和 DELETE 標(biāo)簽里選擇“(None)”

完成了這些配置后，Visual Studio 會為DataList生成默認(rèn)的ItemTemplate— 每個(gè)數(shù)據(jù)字段以Label來顯示值。修改ItemTemplate讓它只顯示product的name，category和supplier。然后添加一個(gè)刪除按鈕，并將CommandName屬性設(shè)為“Delete”。完成這些修改后，DataList和ObjectDataSource的聲明代碼看起來應(yīng)該如下：

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 是瀏覽該頁的樣子。由于還沒有創(chuàng)建DeleteCommand事件處理，這時(shí)點(diǎn)刪除按鈕僅僅只引起postback而不會影響別的。

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

第二步: 添加DeleteCommand Event Handler

當(dāng)用戶點(diǎn)刪除按鈕時(shí)，引起postback，激發(fā)ItemCommand和DeleteCommand。ItemCommand事件在每次DataList里引起Command事件時(shí)激發(fā)。DeleteCommand事件是由于引起Command事件的button的CommandName被設(shè)為“Delete”而被激發(fā)。為了刪除被點(diǎn)了刪除按鈕的記錄，我們需要：

創(chuàng)建DeleteCommand 事件處理
獲取被點(diǎn)刪除按鈕的項(xiàng)的ProductID
調(diào)用ProductBLL 類的 DeleteProduct 方法
重新綁定數(shù)據(jù)到 DataList

相關(guān)的代碼如下。對代碼的詳細(xì)解釋請參考綜敘：在DataList里編輯和刪除數(shù)據(jù) 。

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();
}

第三步: 為刪除按鈕添加客戶端確認(rèn)

完成DeleteCommand事件處理后，最后的工作是為刪除按鈕添加客戶端確認(rèn)。這個(gè)可以通過聲明語言或編碼完成。最簡單的方法是通過Button的OnClientClick property來指定確認(rèn)的聲明語言。然而如果確認(rèn)的信息或邏輯在運(yùn)行時(shí)才能決定，那么我們可以在ItemDataBound事件處理里引用Delete button然后編程設(shè)置它的OnClientClick屬性。

我們下面將探討這兩種方法。首先是聲明語言的方法。僅僅只需要設(shè)置Button的OnClientClick屬性為return confirm(message).比如將確認(rèn)信息指定為“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?');" />

現(xiàn)在點(diǎn)刪除按鈕會顯示一個(gè)確認(rèn)對話框，見圖5。只有在用戶點(diǎn)OK的情況下，postback才發(fā)生并且product被刪除。

圖 5: 點(diǎn)Delete Button 會顯示一個(gè)客戶端對話框

注意：如果傳給confirm function的字符串里有分隔符號，我們需要使用“\”來進(jìn)行轉(zhuǎn)義。也就是說，如果你的字符串為“You’re sure you want to do this?”你需要寫成return confirm('You\'re sure you want to do this?');.在顯示靜態(tài)確認(rèn)對話框時(shí)聲明的方式非常好。如果需要逐項(xiàng)的自定義確認(rèn)信息，我們需要通過編程來設(shè)置這個(gè)屬性。DataList的ItemDataBound事件在每條記錄綁定到DataList后激發(fā)。我們需要引用刪除按鈕，并編程來根據(jù)綁定到DataList的項(xiàng)的數(shù)據(jù)來設(shè)置它的OnClientlick屬性。下面的代碼解釋了如何在確認(rèn)信息里包含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時(shí)都被激發(fā)— 包括header, footer, 和separator items —所以首先保證我們處理的是item 或alternating item非常重要。然后我們獲取DataListItem的DataItem屬性，它包含了一個(gè)ProductsRow實(shí)例的引用。最后通過FindControl("controlID")引用刪除按鈕，并給確認(rèn)信息賦值。注意product的name里的分隔符號都被轉(zhuǎn)義了。

完成這些后，瀏覽頁面。現(xiàn)在點(diǎn)刪除按鈕，確認(rèn)信息里會包含product的name。圖6是當(dāng)點(diǎn)Chai Tea的刪除按鈕時(shí)的輸出。

圖 6: 確認(rèn)對話框里包含Product的Name

總結(jié)

JavaScript confirm(string) function 通常被用來控制form提交的流程。當(dāng)執(zhí)行時(shí)，這個(gè)函數(shù)顯示一個(gè)客戶端的模式對話框，它包含兩個(gè)button， OK 和Cancel。如果用戶點(diǎn)OK ，confirm(string) function會返回true。點(diǎn)Cancel 會返回false。這個(gè)功能和瀏覽器在提交過程里有任何的事件處理返回false的話就取消提交的行為串聯(lián)起來，可以用來在刪除記錄時(shí)顯示確認(rèn)對話框。

confirm(string) function 可以通過Button控件的OnClientClick屬性和Button的客戶端onclick事件處理關(guān)聯(lián)。當(dāng)處理DataList里的刪除按鈕時(shí)，這個(gè)屬性可以通過聲明語言或編程來設(shè)置。如我們本章看到的那樣。

祝編程愉快!

Scott Mitchell 的ASP.NET 2.0數(shù)據(jù)教程之四十二::為刪除數(shù)據(jù)添加客戶端確認(rèn)