zoukankan      html  css  js  c++  java
  • 【原创】ASP.NET的模态窗口

    对于开发过WinForm程序的人员来说,模态窗口就是ShowDialog()就可以弹出一个窗口,可是对于ASP.net咱们应该怎么做呢,那就是showModalDialog或是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
      可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
      dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
      dialogWidth: 对话框宽度。
      dialogLeft: 距离桌面左的距离。
      dialogTop: 离桌面上的距离。
      center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
      help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
      resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
      status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
      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一般使用

    说了半天定义,就直接来个简单的例子试试吧。

    新建立一个项目Parent_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=" 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这个窗口

    三:解决回发子窗口事件时又弹出窗口问题

    上面我们的ModalDialog_SelectInfo.aspx窗口中有个保存按扭,你单击一下,会出现什么情况 ,会弹出新的窗口。显然这不是我们想要的。解决办法如下。

    在<Head></Head>中间加上    <base target="_self" />就可以了。接着上面的ModalDialog_SelectInfo.aspx修改如下:

    <head runat="server">
        <title>子窗口</title>
        <base target="_self" /> <%--解决弹出新窗口问题--%>
    </head>

    四:解决子窗口向父窗口传值问题
    解释一下,就是子窗口操作完成后,要告诉父窗口一些信息,这些信息怎么传递给我们的父窗口(Parent_Form.aspx)呢。那就是使用关键字returnValue,为了测试我们在ModalDialog_SelectInfo.aspx页面中加一个按扭

      <input type="button" id="btn_Back" value="返回值" onclick="retunBack()" />

    它调用的函数retunBack内容如下:

    <script type="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缓存很严重,你调用一次后,再调用时,它会直接取缓存的数据,不会回发服务器,从而不会执行你服务器端的代码。如何解决这个问题呢,方法也很多。

    第一种方法:在我们模态窗口中加入代码如下,红色部分

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalDialog_SelectInfo.aspx.cs" Inherits="showModalDialog_Test.ModalDialog_SelectInfo" %>
    <%@ OutPutCache   Location="None"%>  

    第二种方法:客户端取消

    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">

    第三种方法:在URL中加入随机数

    var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan&rom=" +随机数 ; //模态窗口的url地址

    等等方法。不再一一举例,感兴趣的可以在网上找找相关文档。

    欢迎转载,转载请标注原创地址

  • 相关阅读:
    我爱Java系列之---【SpringBoot打成war包部署】
    279. Perfect Squares
    矩阵dfs--走回路
    112. Path Sum
    542. 01 Matrix
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    Invert Binary Tree
    563 Binary Tree Tilt
    145 Binary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/yxhblog/p/2585029.html
Copyright © 2011-2022 走看看