#asp.net #WebForm #Window.showModalDialog
◆前提条件
VS2019/JQuery1.10.2/html5
◆目的
IEのWebアプリケーションを改修&Chromeに置き換え
->Chromeで使用できないWindow.showModalDialog()の置き換え
◆旧ModalDialogの作り
WebFormの1ページ(aspx)をModalとして別ウィンドウで表示。
親ページから値を受け取り、本ModalDialogで編集後登録ボタンで値を更新する。
編集用のコントロールにはサーバ側にアクセスして候補地を表示するautocompleteリストが存在する。
◆要件
1. できるだけ元のページを生かしたつくりにできること
2.共通化できること
3.できればModalDialogの中でフロント・サーバ両方の処理ができること
とりあえず、ダイアログにしたいWebFormページの読み込み方法はjQueryのloadを使用する等して、ダイアログの実装方法を考える。
divの表示非表示切替-----------------------------------------------
1. javascriptでモーダルウィンドウ - Qiita
2. 【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る
3. 初心者でも分かる！モーダルウィンドウの作り方
4. 画面中央に表示するモーダルウィンドウを実装したい
htmlでdivタグの中にモーダルとして表示したい内容を書いて、js(jQuery)でcssのdisplay値を切り替える方法。
Modal表示の仕組み自体をこちらで作らないといけないので、ちょっとめんどくさい。もっといい方法がないかなと別の方法を探すことに。
Masterページの継承-----------------------------------------------
上記の方法を利用したとしてもMasterページを作成し、ダイアログ表示機能を作成しておけば、表示メソッドを呼び出すだけで継承先では特に何も気にすることなくダイアログのオンオフができると考えた。が。
Masterページを継承したWebFormではオブジェクトIDが変わってしまった。今回は既存のWebアプリケーションの開発で、オブジェクトIDで各種処理がすでに至るとこでされている。その回収にあまりに時間がかかるため、断念。
ModalPopupExtenderの使用-----------------------------------------------
1. ASP.NET モーダル画面の表示（ModalPopupExtender）
2. 他サイトの画面をモーダルで開く方法
AjaxControlToolkitのModalPopupExtenderコントロールなるものを使用して表示するModalDialog。モーダル部分はユーザコントロール(ascx)で作成し、それをModalPopupExtenderでShowする仕組み(だと思う)。AjaxControlToolkit自体はNugetパッケージにも存在するため、導入が楽でいいかと思採用。ただ、参考にした記事で使用していたToolkitScriptManagerなるScriptManagerコントロールが見当たらない。
調べると、ToolkitScriptManagerは既に削除されているとのこと。ScriptManagerを大体に使用すること、とされていたが、よく覚えてないけれどModalの表示がうまくいかなかったため断念。
2のサイトのiframeとの組み合わせもなんかうまくいかなかった。原因忘れましたが。
includeの使用-----------------------------------------------
1. ASP.NETで外部ファイルをincludeする方法
「include使ったら？」というアドバイスで使用してみることに。
ダイアログにしたいフォームはきちんと読み込むことができたけれど、ここからさらに位置調整したりダイアログとして動作するようにせにゃならんのか、と思ったらやってられなかったのでいったん保留に。
window.openを使った疑似Modal表示-----------------------------------------------
showModalDialogのように、サブウインドウを表示して戻り値を取得する
かなりIEの時と似た動作にはできてたんだけれど、できることなら、完成されたModal処理があるならそれに乗っかりたかった。ボディのロックとかモーダルウィンドウの大きさ固定とか、いろいろ気を遣うのが面倒なので。なので保留。
dialogタグの使用-----------------------------------------------
1. Dialog を Modal で使うための最小のコード
2. 【HTML】dialogでモーダルを作ってみる
3. HTML5 DIALOG - ダイアログ要素2
途中までこれを使用。調子よかったものの、autocompleteリストがダイアログの後ろに行ってしまう事態が発生。cssで.ui-autocompleteのz-indexをいじっても解決せず。(今回はChromeを使用するWebアプリケーションと決まっていたからいいけど、Chrome以外で使いづらいらしいのでdialogタグでのModalDialog実装は非推奨みたい)
jQuery UIの使用-----------------------------------------------
1. jQuery UI ダイアログを開くサンプル(Dialog)
2. jQueryでダイアログ表示を作成する
dialogタグの使用とほとんど書き味変わらず。
デフォルトの状態だとautocompleteリストがダイアログの後ろに行ってしまい事象は同じように発生したが、cssでz-indexの値をいじることでこちらは修正できた(本当はz-indexいじるのは非推奨らしい？)。
しばらくこれでやってみて様子を見る。
面白そうだと思ったけどあんまり読まなかったサイト
JavaScriptでモーダル（ポップアップ）を表示させる方法
CodePen <dialog>
いろいろなダイアログボックス
モーダルから別のモーダルを表示する
jQuery Modal Dialog with Dynamic Content