導(dǎo)言

　　在前面一些教程中，我們已經(jīng)看到如何使用應(yīng)用程序框架，ObjectDataSource，以及那些提供增、改、刪功能的數(shù)據(jù)Web控件。在我們已經(jīng)實(shí)現(xiàn)的刪除數(shù)據(jù)的界面中，包含一個(gè)刪除按鈕，當(dāng)點(diǎn)擊它的時(shí)候，會(huì)導(dǎo)致數(shù)據(jù)回傳以及調(diào)用ObjectDataSource的Delete()方法。然后Delete()方法會(huì)調(diào)用對(duì)應(yīng)業(yè)務(wù)邏輯層中的方法，再進(jìn)入數(shù)據(jù)訪問(wèn)層，直至調(diào)用最終操作數(shù)據(jù)庫(kù)的DELETE語(yǔ)句。

　　雖然這個(gè)界面已經(jīng)能夠讓用戶(hù)通過(guò)GridView，DetailsView，或者FormView控件來(lái)刪除記錄，但是在用戶(hù)點(diǎn)擊刪除按鈕的時(shí)候，它缺少一些提示信息。如果用戶(hù)本想點(diǎn)擊編輯按鈕，但是不小心點(diǎn)擊了刪除按鈕，那么原本會(huì)更新的記錄將會(huì)被刪除。為了避免此類(lèi)事情發(fā)生，在這篇教程里面，我們將為點(diǎn)擊刪除按鈕的時(shí)候，添加一個(gè)能在客戶(hù)端顯示提醒的窗口。

　　JavaScript的confirm(string)方法將在一個(gè)模式窗口中顯示那些作為string參數(shù)傳進(jìn)來(lái)的文本，這個(gè)窗口將會(huì)顯示兩個(gè)按鈕－確定(OK)和取消(Cancel)。（見(jiàn)圖1）confirm(string)方法將根據(jù)點(diǎn)擊不同的按鈕來(lái)返回一個(gè)布爾類(lèi)型值。（返回true，如果點(diǎn)擊了確定(OK)，返回false如果點(diǎn)擊了取消(Cancel)）

圖1：JavaScript的confirm(string)方法顯示一個(gè)模式的，客戶(hù)端的窗口

　　在一個(gè)表單的提交過(guò)程中，如果從客戶(hù)端的事件處理器返回一個(gè)false值，那么這個(gè)表單將取消提交。使用這種特性，我們可以在這個(gè)刪除按鈕的客戶(hù)端事件處理器 onClick中，調(diào)用confirm(“你確定要?jiǎng)h除這個(gè)產(chǎn)品嗎？”)，讓它返回一個(gè)布爾值。如果用戶(hù)點(diǎn)擊了取消，confirm(string)將返回false，因此會(huì)取消表單的提交。在沒(méi)有回傳的前提下，這個(gè)已經(jīng)點(diǎn)擊了刪除按鈕的產(chǎn)品并沒(méi)有被刪除。相反，如果在確認(rèn)窗口中用戶(hù)點(diǎn)擊了確定，回傳將會(huì)繼續(xù)而且這個(gè)產(chǎn)品將會(huì)被刪除。參考 使用JavaScript的confirm()方法控制表單提交 來(lái)獲取這方面的更多信息。

　　在添加這些有用的客戶(hù)端腳本時(shí)候，使用模版和使用一個(gè)CommandField相比，將會(huì)有一些細(xì)微的差別。因此，在這篇教程中，我們將同時(shí)考察FormView和GridView的例子。

　　注意：正如這篇教程中討論到的，使用客戶(hù)端確認(rèn)技術(shù)時(shí)候，我們假設(shè)用戶(hù)的瀏覽器支持JavaScript并且已經(jīng)啟用了JavaScript支持。如果這其中的任何一個(gè)假設(shè)不能滿足，那么點(diǎn)擊刪除按鈕的時(shí)候?qū)?huì)立即進(jìn)行回傳而不會(huì)顯示一個(gè)確認(rèn)窗口。

第一步：新建一個(gè)支持刪除的FormView

　　首先在EditInsertDelete目錄下面，創(chuàng)建ConfirmationOnDelete.aspx頁(yè)面，并添加一個(gè)FormView控件，然后給這個(gè)控件綁定一個(gè)ObjectDataSource，這個(gè)數(shù)據(jù)源控件將從ProductsBLL類(lèi)的GetProducts()方法獲取產(chǎn)品信息。同時(shí)給它的Delete()方法綁定指向ProductsBLL類(lèi)的DeleteProduct(productID)方法。確保INSERT和UPDATE標(biāo)簽的下拉框中為（None）。最后，在FormView的屬性窗口中勾上Enable Paging多選框。

　　通過(guò)這些步驟，創(chuàng)建了一個(gè)以下語(yǔ)句聲明的ObjectDataSource：

asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
  DeleteMethod="DeleteProduct" OldValuesParameterFormatString="original_{0}"
  SelectMethod="GetProducts" TypeName="ProductsBLL">
  DeleteParameters>
    asp:Parameter Name="productID" Type="Int32" />
  /DeleteParameters>
/asp:ObjectDataSource>

　　因?yàn)樵谖覀兦懊娴睦又袥](méi)有使用到optimistic concurrency，可以把OldValuesParameterFormatString屬性刪掉。

　　因?yàn)檫@個(gè)FormView已經(jīng)被綁定到一個(gè)僅僅支持刪除的ObjectDataSource控件，在ItemTemplate中我們只要提供刪除按鈕，而不需要新建和更新按鈕。而在FormView的聲明標(biāo)記中，可以刪掉我們不再需要的EditItemTemplate以及InsertItemTemplate。稍微花點(diǎn)時(shí)間定制一下ItemTemplate以便只顯示一組產(chǎn)品屬性。我已經(jīng)定制好了，用h3>樣式顯示產(chǎn)品的名字作為標(biāo)題，接下來(lái)是供應(yīng)商和分類(lèi)的名字（以及刪除按鈕）。

asp:FormView ID="FormView1" AllowPaging="True" DataKeyNames="ProductID"
  DataSourceID="ObjectDataSource1" runat="server">
  ItemTemplate>
    h3>i>%# Eval("ProductName") %>/i>/h3>
    b>Category:/b>
    asp:Label ID="CategoryNameLabel" runat="server"
      Text='%# Eval("CategoryName") %>'>
    /asp:Label>br />
    b>Supplier:/b>
    asp:Label ID="SupplierNameLabel" runat="server"
      Text='%# Eval("SupplierName") %>'>
    /asp:Label>br />
    asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
      CommandName="Delete" Text="Delete">
    /asp:LinkButton>
  /ItemTemplate>
/asp:FormView>

　　做了這些變化之后，我們已經(jīng)有了一個(gè)功能完善的頁(yè)面，可以允許用戶(hù)顯示每個(gè)產(chǎn)品，以及通過(guò)簡(jiǎn)單地點(diǎn)擊按鈕來(lái)刪除某個(gè)產(chǎn)品。圖2顯示了在瀏覽器中訪問(wèn)我們上面所完成的例子的截圖。

圖2：FormView控件顯示一個(gè)產(chǎn)品

第二步：在刪除按鈕的客戶(hù)端onclick事件中調(diào)用confirm(string)方法

　　在創(chuàng)建FormView之后，最后的步驟是配置這個(gè)刪除按鈕，使得用戶(hù)點(diǎn)擊它的時(shí)候，JavaScript的confirm(string)方法會(huì)被調(diào)用?？梢酝ㄟ^(guò)使用OnClientClick這個(gè)屬性來(lái)為Button，LinkButton，ImageButton的客戶(hù)端onclick事件添加客戶(hù)端腳本，這個(gè)屬性是ASP.NET 2.0新引入的。因?yàn)槲覀兿胱宑onfirm(string)方法有返回值，可以簡(jiǎn)單地設(shè)置屬性值為：return confirm(‘你確定要?jiǎng)h除這個(gè)產(chǎn)品嗎？')。

　　修改之后這個(gè)刪除按鈕的聲明語(yǔ)法應(yīng)該如下所述：3給出了這個(gè)提示操作的截圖。點(diǎn)擊這個(gè)刪除按鈕激活確認(rèn)窗口的顯示。如果用戶(hù)選擇取消，回傳將被取消，產(chǎn)品也不會(huì)被刪除。相反，用戶(hù)選擇確定，回傳繼續(xù)，ObjectDataSource的Delete()方法被調(diào)用，最后數(shù)據(jù)庫(kù)中相應(yīng)的記錄也會(huì)被刪除。

asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
  CommandName="Delete" Text="Delete"
  OnClientClick="return confirm('Are you certain you want to delete this product?');">
/asp:LinkButton>

　　僅僅只需要這么多！

　　注意：傳入confirm(string) JavaScript方法的字符串用單引號(hào)進(jìn)行標(biāo)記（而不是雙引號(hào)）。在JavaScript中，標(biāo)記字符串可以是單引號(hào)也可以是雙引號(hào)。我們這里使用單引號(hào)是為了確保不影響OnClientClick這個(gè)屬性本身的雙引號(hào)標(biāo)記。

圖3：當(dāng)點(diǎn)擊刪除按鈕時(shí)候顯示一個(gè)確認(rèn)窗口

第三步：在一個(gè)CommandField中為刪除按鈕設(shè)置OnClientClick屬性

　　在模板中直接使用Button，LinkButton，或者ImageButton的時(shí)候，可以直接為它的OnClientClick屬性設(shè)置確認(rèn)窗口并返回confirm(string) JavaScript的返回值。然而，CommandField是在GridView或者DetailsView上內(nèi)置的一些刪除按鈕，而且它們本身不具有OnClientClick屬性可以設(shè)置聲明。相反，我們必須要在處理GridView或者DetailsView，它們適當(dāng)?shù)腄ataBound事件的代碼中，引用這個(gè)刪除按鈕，然后在那里設(shè)置它的OnClientClick屬性。

　　注意：當(dāng)我們?cè)谶m當(dāng)?shù)腄ataBound事件處理器中設(shè)置刪除按鈕的OnClientClick屬性時(shí)候，我們已經(jīng)有權(quán)限訪問(wèn)當(dāng)前綁定的數(shù)據(jù)。這意味著我們可以擴(kuò)展確認(rèn)信息，并包含具體記錄的詳細(xì)信息，比如，“你確定要?jiǎng)h除這個(gè)Chai產(chǎn)品嗎?“這些定制也可以在模板的數(shù)據(jù)綁定的語(yǔ)法中實(shí)現(xiàn)。

　　為了實(shí)踐在一個(gè)CommandField中設(shè)置刪除按鈕的OnClientClick屬性，我們?cè)陧?yè)面上添加一個(gè)GridView。配置這個(gè)GridView使用FormView一樣的ObjectDataSource控件。同時(shí)，限制GridView的BoundFields屬性只包括產(chǎn)品名稱(chēng)，分類(lèi)和供應(yīng)商。最后，在GridView的屬性窗口中勾上Enable Deleting的多選框。這樣會(huì)在GridView的ColumnCollection的集合中添加一列CommandField，并且它的ShowDeleteButton屬性會(huì)設(shè)置成true。

　　做了這些改變后，你的GridView的聲明標(biāo)記應(yīng)該如下所示：

asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
  DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
  Columns>
    asp:CommandField ShowDeleteButton="True" />
    asp:BoundField DataField="ProductName" HeaderText="Product"
      SortExpression="ProductName" />
    asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True"
      SortExpression="CategoryName" />
    asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True"
      SortExpression="SupplierName" />
  /Columns>
/asp:GridView>

　　這個(gè)CommandField包含一個(gè)刪除LinkButton實(shí)例，并且可以在GridView的RowDataBound事件處理器中被訪問(wèn)。一旦被引用，我們就可以相應(yīng)地設(shè)置它的OnClientClick屬性。通過(guò)下面的代碼來(lái)新建一個(gè)RowDataBound事件的處理器：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    // reference the Delete LinkButton
    LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];

    // Get information about the product bound to the row
    Northwind.ProductsRow product =
      (Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem).Row;

    db.OnClientClick = string.Format(
      "return confirm('Are you certain you want to delete the {0} product?');",
      product.ProductName.Replace("'", @"\'"));
  }
}

　　這個(gè)事件處理器將在代碼中綁定數(shù)據(jù)和引用刪除按鈕的時(shí)候被調(diào)用?？偟膩?lái)說(shuō)，使用了以下模式：
ButtonType是被CommandField使用的一種按鈕類(lèi)型，可以是Button，LinkButton，或者ImageButton。默認(rèn)情況下，CommandField使用LinkButton，但也可以通過(guò)CommandField的ButtonType屬性來(lái)定制。CommandFieldIndex是CommandField在GridView中Columns集合中的原始索引，而controlIndex是刪除按鈕在CommandField的Controls集合中的索引。controlIndex的值由按鈕在CommandField中和其他按鈕的相對(duì)位置決定。例如，如果在CommandField中只有一個(gè)刪除按鈕，那么它的索引就是0。然而，如果在刪除按鈕前面還有一個(gè)編輯按鈕，那么索引值是2。因?yàn)樵趧h除按鈕前面有兩個(gè)控件，一個(gè)是編輯按鈕，另一個(gè)是LiteralControl，用來(lái)隔離編輯按鈕和刪除按鈕。

ButtonType obj = (ButtonType) e.Row.Cells[commandFieldIndex].Controls[controlIndex];

　　在我們的例子中，CommandField使用了LinkButton，在最左端，commandFieldIndex的值是0。因?yàn)槌藙h除按鈕，沒(méi)有其他控件，所以controlIndex的值也為0。

　　在引用了CommandField中的刪除按鈕之后，我們接下來(lái)可以獲得GridView當(dāng)前數(shù)據(jù)列的一些產(chǎn)品信息。最后，我們?yōu)閯h除按鈕設(shè)置了OnClientClick屬性的JavaScript值，其中包含了產(chǎn)品的名稱(chēng)。因?yàn)槲覀冇脝我?hào)標(biāo)記了傳入confirm(string)的字符串參數(shù)，對(duì)于產(chǎn)品的名稱(chēng)我們必須要過(guò)濾可能出現(xiàn)在其中的單引號(hào)。具體來(lái)說(shuō)，我們可以把產(chǎn)品名稱(chēng)中含有的單引號(hào)轉(zhuǎn)義成，“/'“。

　　做完這些改變之后，點(diǎn)擊GridView中的刪除按鈕，可以顯示一個(gè)定制后的確認(rèn)信息（見(jiàn)圖4）。如果用戶(hù)點(diǎn)擊彈出的確認(rèn)窗口中的取消，回傳將會(huì)被取消，從而阻止了刪除操作發(fā)生。

　　注意：我們同樣可以在代碼中對(duì)DetailsView的CommandField使用這種技術(shù)。然而對(duì)于DetailsView，你需要為DataBound事件提供一個(gè)處理器，因?yàn)樗鼪](méi)有RowDataBound事件。

圖4：點(diǎn)擊GridView的刪除按鈕，顯示一個(gè)定制的確認(rèn)信息窗口

使用TemplateFields

　　使用CommandField的一個(gè)缺點(diǎn)是必須通過(guò)索引訪問(wèn)到它的按鈕，這會(huì)導(dǎo)致對(duì)象被轉(zhuǎn)換成對(duì)應(yīng)的按鈕類(lèi)型（Button，LinkButton或者ImageButton）。使用“magic numbers“和硬編碼的類(lèi)型會(huì)導(dǎo)致只有在運(yùn)行時(shí)候才會(huì)被發(fā)現(xiàn)的錯(cuò)誤。例如，如果你，或者其他開(kāi)發(fā)人員，在將來(lái)某個(gè)時(shí)候?yàn)镃ommandFields添加了新的按鈕（比如是編輯按鈕）或者改變了ButtonType屬性，現(xiàn)有的代碼將會(huì)順利被編譯，但是當(dāng)頁(yè)面訪問(wèn)時(shí)候就可能會(huì)拋出異常或者不可預(yù)料的錯(cuò)誤，這些直接由你書(shū)寫(xiě)的代碼和做的改變來(lái)決定。

　　一個(gè)二者擇一的辦法是，不使用GridView或者DetailsView的CommandFields，而是使用TemplateFields。在TemplateField中可以含有ItemTemplate，在ItemTemplate下面可以設(shè)置LinkButton或者Button，ImageButton正如CommandField中的一樣。而且這些按鈕的OnClientClick屬性是可以顯示聲明的，就像FormView中看到的，或者我們可以使用以下模式在代碼中適當(dāng)?shù)腄ataBound事件處理器中訪問(wèn)，
controlID是按鈕ID的屬性值，雖然這種辦法仍然需要硬編碼類(lèi)型的轉(zhuǎn)換，但是不再需要索引，可以改變界面而不再出現(xiàn)運(yùn)行錯(cuò)誤。

ButtonType obj = (ButtonType) e.Row.FindControl("controlID");

總結(jié)

　　JavaScript的confirm(stirng)方法在表單遞交過(guò)程中是一個(gè)經(jīng)常使用的技術(shù)。當(dāng)執(zhí)行的時(shí)候，這個(gè)方法會(huì)顯示一個(gè)模式的，客戶(hù)端的窗口，包含兩個(gè)按鈕，一個(gè)OK（確定）一個(gè)Cancel（取消）。如果用戶(hù)點(diǎn)擊了OK（確定），confirm(string)方法會(huì)返回true，否則返回false。這種功能，以及在表單遞交的事件處理器中返回false會(huì)導(dǎo)致瀏覽器取消表單提交的功能，可以用來(lái)在刪除一條記錄的時(shí)候的顯示一個(gè)確認(rèn)窗口。

　　通過(guò)設(shè)置按鈕控件的OnClientClick屬性，可以使得這個(gè)confirm(string)方法和按鈕控件的客戶(hù)端onclick事件處理器相結(jié)合。當(dāng)在模版中使用刪除按鈕的時(shí)候－或者在一個(gè)FormView的模版中，又或者一個(gè)TemplateField在DetailsView或GridView中－正如我們?cè)诮坛讨锌吹降囊粯?，我們可以顯示聲明訪問(wèn)它或者在代碼中訪問(wèn)它。

祝編程快樂(lè)!

作者簡(jiǎn)介

Scott Mitchell，著有六本ASP/ASP.NET方面的書(shū)，是4GuysFromRolla.com的創(chuàng)始人，自1998年以來(lái)一直應(yīng)用 微軟Web技術(shù)。Scott是個(gè)獨(dú)立的技術(shù)咨詢(xún)顧問(wèn)，培訓(xùn)師，作家，最近完成了將由Sams出版社出版的新作，24小時(shí)內(nèi)精通ASP.NET 2.0。他的聯(lián)系電郵為mitchell@4guysfromrolla.com，也可以通過(guò)他的博客http://scottonwriting.net/與他聯(lián)系。