Scott MitchellのASP.NET 2.0データチュートリアルの42:データを削除するためにクライアント確認を追加する
11051 ワード
テキスト | このチュートリアルのエンコーディング例をダウンロードします | このチュートリアルのPDF版をダウンロード
ガイド人
ItemTemplateにButton、LinkButton、またはImageButton を追加 Delete buttonの とする DeleteCommandイベント処理で適切なBLL deleteメソッドを呼び出す(その後、削除したばかりのアイテムがDataListに表示されないようにデータを再バインドする).
ユーザーにとって、上記の手順は、項目の削除ボタンをクリックしてpostbackを引き起こし、選択した項目を削除してDataListから削除します.ユーザがボタンを削除すると、確認の手順がまだありません.ユーザーが編集ボタンをクリックして、うっかり削除をクリックした場合、更新したいレコードは削除されます.このような状況を防止するために、削除ボタンがポイントされたときにクライアントの確認を追加することができます.JavaScript confirm(string)functionは、入力パラメータstringをテキストとして、2つのボタン-OKとCancel-を含むダイアログボックスに表示します.図1を参照してください.confirm(string)functionは、被点のbuttonに基づいてBooleanタイプの値を返します(点がOKであればtrue、点Cancelであればfalseを返します).
図1:クライアントダイアログ
formのコミット中にクライアントイベント処理がfalseを返すと、ブラウザはコミットをキャンセルします.この機能を使用すると、削除ボタンのクライアントonclickイベント処理を呼び出し
ガイド人
概要：DataListでデータの編集と削除で見たように、DataListに削除機能を追加するには、次のようにします.
CommandNameを「Delete」ユーザーにとって、上記の手順は、項目の削除ボタンをクリックしてpostbackを引き起こし、選択した項目を削除してDataListから削除します.ユーザがボタンを削除すると、確認の手順がまだありません.ユーザーが編集ボタンをクリックして、うっかり削除をクリックした場合、更新したいレコードは削除されます.このような状況を防止するために、削除ボタンがポイントされたときにクライアントの確認を追加することができます.JavaScript confirm(string)functionは、入力パラメータstringをテキストとして、2つのボタン-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( ), . : に、 ボタンを むDataListCroint の を する に、 な を する がある. , EditDeleteDataList Folder ConfirmationOnDelete.Aspx , DataList, Products. Smart Label ProductsDataSource ObjectDataSource. ProductsBLL GetProducts() . 2. DeleteCommand BLL, INSERT、UPDATE、DELETE "(None)"。 3. 2: ProductsDataSource 3:INSERT,UPDATE,DELETEタグで 「(None)」 の が すると、Visual StudioはデフォートのItemTemplateを する. · Label . ItemTemplate, product name,category,supplier. , "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を す 2 :DeleteCommand Event Handlerを してボタンを すると、postbackが し、Item CommandとDeleteCommandが する.ItemCommand DataList Command 。DeleteCommand "Delete" CommandName, Command button. . 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();
}
ステップ3: ボタンにクライアント を する
DeleteCommandイベント が すると、 の は ボタンにクライアント を することです.これは または によって することができる. も な は、ButtonのOnClientClick propertyによって された を することです.しかし、 された や が に される は、ItemDataBoundイベント でDelete buttonを し、OnClientClickプロパティの をプログラミングすることができます.
この2つの について します.まず を する です.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 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イベントは、header、footer、separator itemsを むすべてのローがDataListにバインドされている に されるため、まずitemまたはalternating itemを することを することが です. に、ProductsRowインスタンスの を むDataListItemのDataItemプロパティを します. にFindControl(「controlID」)を して ボタンを し、 に を する.productのnameの り がエスケープされていることに してください.
これらが したら、ページを します. ボタンを すると、 にproductのnameが まれます.【 6】ポイントChai Teaの ボタンの である.
6: ダイアログにProductのNameが まれている
まとめ
JavaScript confirm(string) functionは、 、formコミットのプロセスを するために される.この を すると、2つのbutton、OK、Cancelを むクライアントのモードダイアログボックスが されます.ユーザがOKをクリックするとconfirm(string)functionはtrueを します.ポイントCancelはfalseを します.この は、ブラウザがコミット にイベント をしてfalseに るとコミットをキャンセルする と に され、レコードを するときに ダイアログボックスを することができます.
confirm(string)functionは、ButtonコントロールのOnClientClick とButtonのクライアントonclickイベント とを けることができる.この は、DataListの ボタンを う 、 を したりプログラミングしたりすることで できます. たちの で たように.
プログラミングが しいことを ります!