刷新modalDialog的父窗口-阿里云开发者社区

开发者社区> 老朱教授> 正文

刷新modalDialog的父窗口

简介:
+关注继续查看

1、新建页面parent.htm作为父窗口
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <html>
 3     <head>
 4         <title></title>
 5         <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
 6         <meta name="ProgId" content="VisualStudio.HTML">
 7         <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
 8         <script language="javascript">
 9             <!--
10             /**
11             * 用途:打开模态窗口,并且当返回值为true时,刷新窗口
12             * 
13             * @param newUrl        模态窗口页面路径
14             * @param wLen        模态窗口宽度
15             * @param iLen        模态窗口高度
16             **/
17             function OpenModalDialog(newURL,wLen,hLen)
18             {
19                 try
20                 {
21                     //初始化变量,用于接收页面反回值。
22                     var recdata=false;
23                     //模式窗口打开指定的窗口链接
24                     recdata=showModalDialog(newURL,"DescWindow",
25                         "dialogWidth:"+wLen+"px;dialogHeight:"+hLen+"px;center:1;scroll:1;help:0;status:0");
26 
27                     //判断对应的返回值
28                     if(recdata==true)
29                     {
30                         // 刷新当前窗口
31                         window.location.reload();
32                         window.alert("刷新窗口~~");
33                     }
34                 }
35                 catch(err)
36                 {}
37             }
38             -->
39     </script>
40     </head>
41     <body>
42         <href="javascript: OpenModalDialog('sub.aspx', 700, 500)">打开模态窗口</a>
43     </body>
44 </html>
45 

2、建立页面sub.aspx:
 1 <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="TestSyntax.WebForm1" %>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3 <HTML>
 4     <HEAD>
 5         <title>sub</title>
 6         <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
 7         <meta content="C#" name="CODE_LANGUAGE">
 8         <meta content="JavaScript" name="vs_defaultClientScript">
 9         <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10         <base target="_self">
11     </HEAD>
12     <body>
13         <form id="Form1" method="post" runat="server">
14             <asp:Button id="btnOk" runat="server" Text="确 定"></asp:Button>&nbsp; 
15             <INPUT type="button" value="取 消" onclick="javascript: window.close();">
16         </form>
17     </body>
18 </HTML>
19 

3、sub.aspx.cs代码如下
 1 using System;
 2 using System.Collections;
 3 using System.ComponentModel;
 4 using System.Data;
 5 using System.Drawing;
 6 using System.Web;
 7 using System.Web.SessionState;
 8 using System.Web.UI;
 9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11 
12 namespace TestSyntax
13 {
14     /// <summary>
15     /// WebForm1 的摘要说明。
16     /// </summary>
17     public class WebForm1 : System.Web.UI.Page
18     {
19         protected System.Web.UI.WebControls.Button btnOk;
20     
21         private void Page_Load(object sender, System.EventArgs e)
22         {
23             // 在此处放置用户代码以初始化页面
24         }
25 
26         #region Web 窗体设计器生成的代码
27         override protected void OnInit(EventArgs e)
28         {
29             //
30             // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
31             //
32             InitializeComponent();
33             base.OnInit(e);
34         }
35         
36         /// <summary>
37         /// 设计器支持所需的方法 - 不要使用代码编辑器修改
38         /// 此方法的内容。
39         /// </summary>
40         private void InitializeComponent()
41         {    
42             this.btnOk.Click += new System.EventHandler(this.btnOk_Click);
43             this.Load += new System.EventHandler(this.Page_Load);
44 
45         }
46         #endregion
47 
48         /// <summary>
49         /// 操作成功,设定模态窗口的返回值为true,用来刷新父窗口
50         /// </summary>
51         /// <param name="sender"></param>
52         /// <param name="e"></param>
53         private void btnOk_Click(object sender, System.EventArgs e)
54         {
55             string strScript = @"<script>window.returnValue=true;window.close();</script>";
56 
57             this.Response.Write(strScript);
58         }
59     }
60 }
61 

这样,实现了操作成功后刷新父窗口,又避免了取消操作的无用刷新。 


Web开发中适当运用一些弹出子窗口有很多好处,可以节省页面设计代价,获得好的用户体验,在最近项目开发中我遇到了几个父子窗口的问题,现在整理给大家,希望有所帮助.
               
   情景一: 打开某一子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.        
       
                 1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()">页面C</a>
                      A中有如下js代码:
None.gif<script language="JavaScript">
None.gif   
function open()
None.gif   {
None.gif     window
.showModalDialog("页面B");
None.gif   }
None.gif
</script>

                2: 页面B,此为中间页,起过渡作用
                     B html 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>**</title>
</head>

<frameset rows="0,*">
    
<frame src="about:blank">
    
<frame src="页面C">
  
</frameset><noframes></noframes>
</html>

                 3:页面C ,要打开的子窗口. 
                    它关闭时候刷新父窗口很简单,只要把A中
                    <a  href="#"onclick="open()">页面C</a>  改为
                    <a  href="页面A"onclick="open()">页面C</a>

    情景二:打开某一需要用到activex控件子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.  
                  此时候就不能用 window.showModalDialog()事件打开模式对话框了因为activex控件会报错,必须用window.open()
 
                  1: 页面A:父窗口,其中有一个打开子窗口的链接,<a  href="#"onclick="open()">页面B</a>
                      A中有如下js代码.

<script language="JavaScript">
function open()
 {
   window
.open("页面B",'upload', 'height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no');
 }
</script>

                  2: 页面B,要打开的子窗口,关闭时候触发window.opener.location.reload();window.close();即可刷新父窗口并且关闭子窗口.

   
     情景三:打开某一子窗口,   让用户选择要添加的东东,譬如要添加到文章里的相片选择后关闭子窗口,然后选择的东东出现在父窗口里.
                    在下图中,我点击"添加照片"链接然后弹出子窗口,在子窗口中选择后点击"添加照片"按钮,子窗口自动关闭,并且父窗口"已添加照片:"下面列出了我选择的照片。

        addpic1.jpg
      
            add2.jpg

               实现方法:类似情景一需要中间页面B , 只是子窗口C中点击"添加按钮"时触发的js事件中,除了获得选中的checkbox的值外,还要把获得的值回传给父窗口,传值回去的代码如下.
              

None.gifwindow.parent.returnValue="选中的checkbox";
None.gif               window
.parent.close();

 
              而父窗口要捕获此值就要在情景一中所说的open()事件中添加获得返回值 

<script language="JavaScript">
  
function open()
   {
         
var str=window.showModalDialog("页面C");
         
if(str!=null)  
       {              
          picobj
.innerHTML+=str; 
          
       }
    }
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MongoDB splitChunk引发路由表刷新导致响应慢
MongoDB splitChunk引发路由表刷新导致响应慢
691 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
9514 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8947 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11676 0
DWZ (JUI) 教程 DWZ中dialog层的刷新
原文:DWZ (JUI) 教程 DWZ中dialog层的刷新 在DWZ开发过程中经常会遇到的一种情况就是:在navTab页面中通过a标签打开一个dialog,在dialog层进行操作后,需要对该dialog层进行必要的刷新操作。
1114 0
DWZ (JUI) 教程 dwz框架 刷新dialog解决方案
原文:DWZ (JUI) 教程 dwz框架 刷新dialog解决方案 在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId。       DWZ给我们提供了两个回调函数,一个是子窗口为navTab的navTabAjaxDone,一个是子窗口为dialog的dialogAjaxDone,但这两个回调函数都有同一样的缺陷:就是父窗口必须是navTab,也就是说只能刷新navTab,如果父窗口为dialog,则此父dialog是刷新不了的。
1034 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
2951 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载