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地址

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

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

  • 相关阅读:
    封装logging模块,创建日志器
    excel的读写封装,利用openpyxl
    利用yaml封装配置文件模块
    自动生成小学四则运算项目(更新)
    基于cmmi的软件工程及实训指导 第一章 读后感
    第一次数据库学习
    第一个爬虫和测试
    预测球队成绩
    第一个网页
    科学计算与可视化
  • 原文地址:https://www.cnblogs.com/yxhblog/p/2585029.html
Copyright © 2011-2022 走看看