TreeViewにConfirmダイアログを出す方法

環境/言語:[C#.Net]
分類:[ASP.NET]

こんにちは、suzuと申します。

画面の左部分にTreeViewで項目（名前）を表示し、クリックすると
その項目の詳細情報（テキストボックス、ドロップダウンリスト）が右部分に表示されるような画面を作成したのですが、右部分の詳細情報を変更した時に左部分の
ツリービューをクリックすると詳細情報が別のものになってしまいます。
それを防ぐためにツリービューをクリックすると確認のダイアログを
表示したいのですが、TreeViewで確認ダイアログを出す方法が
わかりません。（ボタンの確認ダイアログはonclick時にConfirmダイアログを表示するようにはできました。）
TreeViewで確認ダイアログを表示する方法を知っている方がいれば
教えていただけないでしょうか？

■No32172に返信(suzuさんの記事)
> TreeViewで確認ダイアログを表示する方法を知っている方がいれば
> 教えていただけないでしょうか？

TreeView のノードをクリックした時に confirm ダイアログが現れて、［OK］ボタン
をクリックしたらポストバックして処理を続行、［キャンセル］ボタンをクリックし
たら処理を中止できればいいのですよね？

サーバー側のプロパティの設定などで行うのは無理そうなので、クライアント側で
JavaScript を使って設定するのがいいと思います。

IE の F12 開発者ツールで TreeView の html コードを見てください。

TreeView.ClientID が id に設定された div 要素の中に各ノードが配置されていて、
それらは html コードでは a 要素で、その href 属性に __doPostBack という 
JavaScript 関数が設定されているはずです。

なので、その要素を全部探して onclick 属性に return confirm("続けますか？");　
というようなスクリプトを設定してやれば望みの動作をすると思います。

jQuery を使えばかなり簡単にできるはずです。具体例を以下に書いておきます。

<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        $("#<%=TreeView1.ClientID %> a[href*=__doPostBack]").click(function () {
            return confirm("続けますか？");
        });
    });
//]]>
</script>


confirm を使うより、ASP.NET Ajax Control Toolkit の ModalPopup を利用して、
「詳細情報」は ModalPopup の中に表示してはいかはですか？　その方がスマート
かつユーザーフレンドリーかつ問題が少ないはずですよ。

WebSurfer様

回答をいただき誠にありがとうございます。
今、手元に環境がないため動作確認はできませんが
明日確認をして見ます。

取り急ぎお礼を申し上げます。

色々と試した結果ModalPopupで実装することにしました。
若干、つまずく所がありましたが、なんとか動作するもの
はできました。

この度はありがとうございます。