asp.Netのモードウィンドウ

13357 ワード

WinFormプログラムを開発した人にとって、モードウィンドウはShowDialog()で1つのウィンドウをポップアップすることができますが、ASP.Net私たちはどうすればいいですか.それはshowModelessDialogかshowModelessDialogです.両者の定義は以下の通りです.
window.showModalDialog()メソッドは、HTMLコンテンツを表示するモデリングダイアログボックスを作成するために使用されます.ダイアログボックスであるため、windowは一般的に使用されません.Open()が開いているウィンドウのすべてのプロパティ.(IE 4+サポート)window.showModelessDialog()メソッドは、HTMLコンテンツを表示する非モデリングダイアログボックスを作成するために使用されます.(IE 5+サポート)
文章の内容は以下の通りです.
(1)showModalDialogの定義
(2)showModalDialog一般使用
(3)サブウィンドウイベントの再送時にウィンドウがポップアップされる問題の解決
(4)子ウィンドウから親ウィンドウへの値伝達の問題を解決する
(5)サブウィンドウキャッシュの問題の解決
スタート
一:showModalDialogの定義
window.showModalDialog(sURL [, vArguments] [, sFeatures])
パラメータの説明:sURL必須パラメータ、タイプ:文字列.ダイアログボックスに表示するドキュメントのURLを指定します.vArgumentsオプションパラメータ、タイプ:バリエーション.ダイアログボックスにパラメータを渡します.伝達されるパラメータタイプには、配列などが含まれます.ダイアログはwindowを通ります.伝達されたパラメータを取得するためにdialogArgumentsを使用します.sFeaturesオプションパラメータ、タイプ:文字列.ダイアログボックスの外観などの情報を記述するには、次の1つまたは複数を使用してセミコロン";隔てる.dialogHeightダイアログの高さは、100 px以上であり、IE 4ではdialogHeightとdialogWidthのデフォルトの単位はemであり、IE 5ではpxであるため、modal方式のダイアログを定義する際にpxを単位とする.dialogWidth:ダイアログの幅.dialogLeft:デスクトップから左の距離.dialogTop:デスクトップからの距離.center:{yes|no|1|0}:ウィンドウが中央にあるかどうか、デフォルトyesですが、高さと幅を指定できます.help:{yes|no|1|0}:ヘルプボタンを表示するかどうか、デフォルトyes.resizable:{yes|no|1|0}〔IE 5+〕:サイズ変更可能かどうか.デフォルトno.status:{yes|no|1|0}［IE 5+］:ステータスバーを表示するかどうか.デフォルトはyes[Modeless]またはno[Model]です.scroll:{yes|no|1|0|on|off}:ダイアログボックスにスクロールバーが表示されるかどうかを示します.デフォルトはyesです.いくつかの属性はHTAで使われていますが、一般的なページでは一般的に使われていません.dialogHide:{yes|no|1|0|on|off}:印刷または印刷プレビュー時にダイアログボックスが非表示になっているかどうか.デフォルトはnoです.edge:{sunken|raised}:ダイアログボックスの枠線スタイルを指定します.デフォルトはraisedです.unadorned:{yes|no|1|0|on|off}:デフォルトはnoです.
二:showModalDialog一般使用
定義を半日話して、簡単な例を直接やってみましょう.
プロジェクトの新規作成Form.aspx、フロントコードは以下の通りです.

<head runat="server">
    <title>   </title>
    
    <script type="text/javascript">

        function OpenSelectInfo() {
      var width = 1000;  //       
            var height = 500;   //       
            var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //     url  
            window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no');
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
         <input type="button" id="btn_ModifyNickName" runat="server" value="      "  style="width: 126px;" onclick="OpenSelectInfo()" />   
          
    </div>
    </form>
</body>
</html>

関連内容の注釈はよく書かれています.このウィンドウを開くにはModalDialog_SelectInfo.aspxはモデリングウィンドウとして、私はこのモデリングウィンドウを構築しましょう.

<head runat="server">
    <title>   </title>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <center>
            <table>
                <tr>
                    <td>
                          :
                    </td>
                    <td>
                        <input type="text" id="txtUserName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                          :
                    </td>
                    <td>
                        <input type="text" id="txtPwd" runat="server" />
                    </td>
                 </tr>
                 <tr>
                    <td>
                            
                    </td>
                    <td>                     
                        <label runat="server" id="lblPass">1345451057450</label>
                        <input type="text" id="txtPass" runat="server" style="display:none;" value="1345451057450" />
                    </td>
                 </tr>
                 <tr>
                    <td colspan="2">
                        <asp:Button runat="server" ID="btn_Submit" Text="   " 
                            onclick="btn_Submit_Click" />
                        <input type="button" id="btn_Close" value="   " onclick="javascript:window.close();" />
                    </td>   
                 </tr>
                
            </table>
        </center>
    </div>
    </form>
</body>
</html>

内容もとても簡単で、何も言うことはありません.最初のウィンドウを開くとParent_Form.aspxのボタンを押すとModalDialogがポップアップします.SelectInfo.aspxというウィンドウ
3:サブウィンドウイベントの再送時にウィンドウをポップアップする問題を解決する
我々のModalDialogはSelectInfo.aspxウィンドウに保存ボタンがあります.クリックすると、新しいウィンドウがポップアップします.明らかにこれは私たちが望んでいるものではありません.解決策は以下の通り.
の間にを付ければよい.続いて上のModalDialog_SelectInfo.aspxは以下のように変更されました.

<head runat="server">
    <title>   </title>
    <base target="_self" /> <%--         --%>
</head>

四:子ウィンドウの親ウィンドウへの値伝達の問題を解決するには、子ウィンドウの操作が完了した後、親ウィンドウにどのように親ウィンドウ(Parent_Form.aspx)に伝達されるかを教えてください.それはキーワードreturnValueを使って、私たちがModalDialogでテストするためにSelectInfo.aspxページにボタンを1つ追加
"text/javascript"> function retunBack() { returnValue = "1001,1002"; window.close(); } </script>
私たちのParent_Form.aspxコードは以下の通りです.

<title>   </title>
    
    <script type="text/javascript">

        function OpenSelectInfo() {

            var width = 1000;  //       
            var height = 500;   //       
            var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //     url  
            var rCode =window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no');
            alert(rCode);
        }
    </script>

試してみてください.あなたが戻りたい結果がポップアップされているのではないでしょうか.
五:サブウィンドウキャッシュの問題を解決する
実際の使用では、モダリティウィンドウModalDialog_でSelectInfo.aspxではいくつかのロジックを処理します.親ウィンドウのパラメータを受信し、パラメータによって異なる操作を与えますが、showModalDialogキャッシュは深刻です.一度呼び出した後、再び呼び出すと、キャッシュされたデータが直接取り出され、サーバに返信されず、サーバ側のコードが実行されません.この問題をどう解決するか、方法もたくさんあります.
第1の方法:私たちのモードウィンドウにコードを以下のように追加します.赤い部分
<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="ModalDialog_SelectInfo.aspx.cs"Inherits="showModalDialog_Test.ModalDialog_SelectInfo"%> <%@ OutPutCache Location="None"%>
2つ目の方法:クライアントのキャンセル
< meta http-equiv="Cache-Control"CONTENT="no-cache"> < meta http-equiv="Pragma"CONTENT="no-cache">
3つ目の方法:URLに乱数を加える
var url="ModalDialog_SelectInfo.aspx?UserName=ZhangSan&rom="+乱数;//モードウィンドウのurlアドレス
などの方法があります.例を挙げないで、興味のある人はネットで関連ドキュメントを探すことができます.

テンセント雲、アリ雲redis 5.0.2クラスタ構築三主三従、centos 7.6

Asp.Netデータベースキャッシュ依存