当前位置:首页 > ASP.NET的模态窗口ShowDialog()的用法详解

ASP.NET的模态窗口ShowDialog()的用法详解

点击次数:6897  更新日期:2013-03-29
对于开发过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=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=lblPass1345451057450/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=ZhangSanrom= +随机数 ; //模态窗口的url地址

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