ASP.NET 的模态窗体的处理

(一) 模态窗体的处理方法

1  javascript 语法:

 

var returnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

 

非模态窗体:

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

 

参数说明:

sURL:必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments:可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。

对话框通过window.dialogArguments来取得传递进来的参数。

参数可以是对象,如 window 。

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 }

是否可被改变大小。默认no

Status

{yes | no | 1 | 0 }

是否显示状态栏。默认为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。

 

 

例:window.showModalDialog('addUser.aspx','xxx','status=0;DialogWidth=610px;DialogHeight=300px;scroll=0')

 

2 子页得到父页传过来的参数

下述语句在子页中得到父页传过来的参数。

 

var sData = window.dialogArguments;  

 

sData 可以是字串,也可以为 Object

 

3从子窗体传参数给父窗体:

 

window.returnValue = “返回值”

 

值被返回到调用的父窗体。

模态窗体不能使用 window.opener.document.GetElementById(控件名) 操作父窗口。

 

千万注意:如子页面上有确定、取消按钮,则都要处理返回值。

或者

varparentwindow = window.dialogArguments;   //传入:window

 //var obj1 =eval("parentwindow.document.all.InStr_treatyAgent_treatyAgent");

 //var obj2 = eval("parentwindow.document.all.InStr_name_name");

 

4 防止打开新窗口(如提交表单):

在 head 中写入下句:

 

<base target="_self">

 

5 清除缓存,防止模式窗口页面不更新

模式窗口有时会缓存,即不更新,则可用如下放下清除。

HTML

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META HTTP-EQUIV="expires" CONTENT="Mon, 23 Jan 1978 20:52:30 GMT">

ASP

<%

Response.Expires = -1

Response.ExpiresAbsolute = Now() - 1

Response.cachecontrol = "no-cache"

%>

PHP

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

header("Cache-Control: no-cache, must-revalidate");

header("Pragma: no-cache");

JSP

response.setHeader("Pragma","No-Cache");

response.setHeader("Cache-Control","No-Cache");

response.setDateHeader("Expires", 0);

 

6 关闭子窗口

window.close();

self.close()

 

7在模式窗口使用F5刷新页面

<base target="_self">

<body οnkeydοwn="if (event.keyCode==116){reload.click()}">

<a id="reload" href="filename.htm" style="display:none">reload...</a>

其中:filename为窗口页面。

 

8防止模式窗口打开的页面出现cookie丢失的情况

模式窗口打开新窗口时,仅可以使用 showModalDialog(url,window,feathers); 方法,且 objects 为 window 。

 

 

9 在子窗口中获得或设置父窗口的任何值(子窗口操作父窗口)

1)打开子窗口时:

传到子窗口的参数为object : window  

如:

showModelessDialog("myDialog.htm",window,"status:false;dialogWidth:300px;

dialogHeight:300px;edge:Raised; enter: Yes; help: No; resizable: No; status: No");

 

2)在子窗口中使用 window.dialogArguments 得到对象:即父窗口的 window 对象集

       如:

var  parentwindow = window.dialogArgument

       parentwindow.document.getElementById( 控件名 ).value = “abcd”;

 

进一步操作:

parentwindow.sUserName = ‘张钦’;  // sUserName是主调窗口的类变量

parentwindow.func1();            //func1是父窗口的函数

 

这种方式下,主调窗口可以不通过普通返回值方式取得非模式窗口设定的数值

 

父、子窗口之间参数传递实例:

 

parent.htm

modal.htm

 

父向子传参数

<script>

var obj = new Object();

obj.name="dog";

window.showModalDialog("modal.htm",obj,

"dialogWidth=200px;dialogHeight=100px");

</script>

<script>

var obj = window.dialogArguments

alert("您传递的参数为:" + obj.name)

</script>

 

子向父返回值

<script>

str =window.showModalDialog("modal.htm",,

"dialogWidth=200px;dialogHeight=100px");

alert(str);

</script>

 

<script>

window.returnValue=“abcd”;

</script>

 

 

 

10 如何写JavaScript

 1) 直接在Html 源代码的 head 段写。

    注意:可以通过操作页面上的控件名来操作控件。

   如:      Document.GetElementById( 控件名 ).value

 

2) 在.net 代码中直接写:

 

l         在父页面中:

如当按下 btnOpen 按钮,弹出模态窗口:

 

btnOpen.Attributes.Add("onclick",

 "var st = window.showModalDialog('modal.aspx','参数','dialogHeight: 220px;

status: no;');

if(st!= null){ document.all('TextMng').value=st };

return st;" );

 

上述代码可以写在 page_load中。

 

l         在子页面中:

RegisterStartupScript("OnClick","<script>

window.returnValue ='" + DataList.Items[0].Cells[0].Text +

      "';window.close();</script>");

 

子页面返回结果给window.returnValue;父页面得到结果st

12 如何在用户关闭窗口时提示

<base target=_self> (写在head中)

 

取消按钮:

RegisterStartupScript("key","<script>alert('您取消了操作!');window.returnvalue=null ;

window.opener=null;window.close(this);

</script>");

 

13 子页返回父页是否触发父页刷新问题

  1)模态窗体关闭前,父窗口不执行代码。父窗口等待子窗口关闭。

  2)如果使用服务器端的按钮,则模态子窗口被关闭时,父页面被刷新。

     

  3)如果要达到模态子窗口被关闭时,父页面不被刷新,则用客户端的按钮。

     如:<INPUT  type="button" value="html模态窗体"  οnclick="showDialog()">

     showDialog () 为打开模态窗口的函数。

 

 

14 RegisterStartupScript 使用说明

 

public virtual void RegisterStartupScript( string key, string script );

参数:key       标识脚本块的唯一键。

script    要发送到客户端的脚本的内容。

说明:通过使用 key 标识脚本,多个服务器控件实例可以请求该脚本块,而不用将其发送到输出流两次。

 

例:

 

ASP.NET 页面:

public void Page_Load(Object sender, EventArgs e) {

// Form the script to be registered at client side.

String scriptString = "<script language=JavaScript> function DoClick() {";

  scriptString+="showMessage2.innerHTML='<h4>Welcome to Microsoft .NET!</h4>'}";

  scriptString+="function fun1(){ showMessage1.innerHTML=";

scriptString+="'<h4>RegisterStartupScript Example</h4>'}<";

scriptString+="/";

scriptString+="script>";

if(!this.IsStartupScriptRegistered("Startup"))

this.RegisterStartupScript("Startup", scriptString); }

 </script>

Html:

<body οnlοad="fun1()">

<form id="myForm" runat="server">

<span id="showMessage1"></span> <br>

<input type="button" value="ClickMe" οnclick="DoClick()"> <br>

<span id="showMessage2"></span>

</form>

</body>

 

 

 

(二) 模态窗体的使用实例

 

txt_return

    

 

 

 

 

 

     图3-2-1 父窗口 parent.aspx               图3-2-2 子窗口 myModal.aspx

 

父窗口按“模态窗口 server 端按钮”,弹出子窗口。子窗口中选中一个值,然后按提交按钮,关闭子窗口,同时,把选中的值返回到父窗口。

 

父窗口按“html模态窗体”,弹出子窗口。父窗口不刷新。

 

1 父窗口编写  parent.aspx

l         在父窗口的 html 代码的 head段添加如下代码:

<script language="JavaScript">

   //打开模态窗口,将“上海”两字作为参数传递给子窗口

   function showDialog(){

str=window.showModalDialog("myModial.aspx", '上海' ,'status=0;

DialogWidth=340px;DialogHeight=400px;scroll=1'); 

 

var obj = document.getElementById("txt_return");  //把返回值填写到txt_return文本框

obj.value=str;   

}       </script>

 

注意:当window.showModalDialog 函数后,

var obj = document.getElementById("txt_return");  //把返回值填写到txt_return文本框

obj.value=str;   

两句代码不会马上被执行,而要到子窗口被关闭后才会执行。

l         在按钮的 ClientOnClick 处填写:showDialog()

当单击按钮时,调用 showDialog() 函数。

 

 

2 子窗口编写  myModal.aspx

l         在 子窗口的 html 中的head 段中,添加如下javaScript 代码

<base target="_self">

<script language="javascript">

   //按下提交按钮后,把文本框TextBox1中的值返回给父窗口,并关闭自己。

function returndata(){

       window.returnValue = document.getElementById("TextBox1").value ;

       self.close();

   }

  

   function GetParam(){

     //得到父窗口传来的参数,显示在 TextBox1 中。

     var str = window.dialogArguments;

   document.getElementById("TextBox1").value = str;

 }

</script>

l         在 body 中自动调用 GetParam ()函数,得到父窗口传来的参数值

        <body  οnlοad=GetParam() MS_POSITIONING="GridLayout">

 

l         在提交按钮的 ClientOnClick 处填写:returndata()

当单击按钮时,调用 retuendata() 函数。

 

 

3 子窗口返回时,父窗口不刷新的方法

  使用客户端的按钮控件。

<INPUT οnclick="showDialog()" type="button" value="html模态窗体">

  其他参阅1,2。

 

4 子窗口控制父窗口的控件演示

l         parent.aspx 中:

  function showDialog(){

var obj=window ;

str=window.showModalDialog("myModial.aspx",obj,'status=0;DialogWidth=340px;DialogHeight=400px;scroll=1');

}

//父窗口中不处理返回值

 

l         myModal.aspx

function returndata(){

   var obj = window.dialogArguments;    //得到父窗口的 window 对象

    obj.document.getElementById("txt_return").value = "abcdeav" ;

      self.close();

   }

//把字串 “abcdeav” 放入 父窗口控件 txt_return 。

 

四JavaScript 读取 List 控件的值

 

当改变下拉列表的值,该值显示在文本框中。(在客户端完成)

 

function getoption(obj)

{

              var selectedvalue=obj.options[obj.options.selectedIndex].text;

              //var selectedvalue=obj.options[obj.options.selectedIndex].value;

       document.getElementById('abc').value=selectedvalue;

}

</script>

 

<body>

       <form>

       <select οnchange="getoption(this)">

              <option value='001'>a</option>

              <option value='002'>b</option>

       <select>

              <input type="text" id='abc'>

       </form>

</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值