Asp.net模态子窗体及其数据传递

最新推荐文章于 2016-11-12 19:27:23 发布

bangcheng6688

最新推荐文章于 2016-11-12 19:27:23 发布

阅读量192

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/LonelySoul/archive/2011/04/16/2018125.html

版权

（一）模态窗体的处理方法

1、javascript 语法：

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

非模态窗体：

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

参数说明：

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

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

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

参数可以是对象，如 window 。

sFeatures：可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。详述如表下：

参数	取值	说明
dialogHeight		对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是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_r("parentwindow.document.all.InStr_treatyAgent_treatyAgent");

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

4 防止打开新窗口（如提交表单）：

在 head 中写入下句：

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

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

HTML

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

来源：(http://blog.sina.com.cn/s/blog_436615530100auoy.html) - ASP.NET 的模态窗体的处理（一）_junhchen_新浪博客

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

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

response.setDateHeader("Expires", 0);

6 关闭子窗口

window.close();

或

self.close()

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

<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

父向子传参数

var obj = new Object();

obj.name="dog";

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

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

</script>

var obj = window.dialogArguments

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

</script>

子向父返回值

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

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

alert(str);

</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:

</form>

</body>

（二）模态窗体的使用实例

txt_return

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

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

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

1、父窗口编写 parent.aspx

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

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

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 代码

//按下提交按钮后，把文本框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 ()函数,得到父窗口传来的参数值

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

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

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

使用客户端的按钮控件。

其他参阅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)">

</form>

</body>

将模块窗口的弹出丢在了一个公共类(Function)的方法里面进行处理(其实早就该这么做)。
      eg:
      public string ModalWindow(string openAspxPage,int width,int height)
      {
               string js = string.Format("javascript:window.showModalDialog(\"{0}\",window,\"status:false;dialogWidth:{1}px;dialogHeight:{2}px\")",openAspxPage,width,height);
              return js;
      }

      本来想用StringBuilder来写的，可是StringBuilder写起来实在麻烦，干脆就换了string，反正影响不大。
       另外，又写了一个关闭页面的方法，写得粗糙一些，将就着用吧。
      public string ClosePage()
      {
             StringBuilder js = new StringBuilder();
             js.Append("<script language=\"JavaScript\">");
             js.Append("window.close();");
             js.Append("</script>");
             return js.ToString();
      }

项目中，除了添加、修改的页面是Aspx，其它的都是ascx。
感觉上，就是openApxPage的大小不太好控制，而且上面写的代码并不适合于DataGrid控件中的LinkButton控件，所以又得再写一个方法重载了。

      使用模态窗口时，还得注意三个问题：
      1、要弹出的页面中，一定要保证<head></head>标签间有<base target=“_self”>，否则会弹出的模态窗口上，点击按钮时，会再次弹出一个新页面。
      2、被弹出页面的按钮的事件处理中，应该有Response.Write(new Function().ClosePage());语句，用以关闭当前的模态窗口。
      3、因为幽默的缓存原因，如果你在模态窗口中修改了数据，你会发现，父页面上的数据刷新了，但是当你再点击按钮，重新弹出模态窗口时，你会发现模态窗口中的内容还是上次的内容，经过我试验，手动改了html代码后，点击弹出的模态窗口还是弹出相同的页面，所以，这里要绕开这个机制，方法是在被弹出的aspx页面后加上随机参数。上面模态窗口代码可以改成如下，以避免此问题：

      public string ModalWindow(string openAspxPage,int width,int height)
      {
               string js = string.Format("javascript:window.showModalDialog(\"{0}&rand="+new Random().Next().ToString()+ "\",window,\"status:false;dialogWidth:{1}px;dialogHeight:{2}px\")",openAspxPage,width,height);
              return js;
      }

      注意红字部分参数，是自定义的一个参数，此参数应该是整个项目中唯一的变更名称，并且无意义(最保险的办法是把这个变更命名为lakjsdflawdfqwoifa之类的名称)。
      基本上，满足了上述条件，做页面时就操作模态窗口，相对就简单了。
      如果还想做得简单一些，可以把ModalWindow 方法写得更完善一些，因为时间较紧，所以这里的东西比较粗糙。有空时，把它改一下，并完善一下Function类的内容，增加一些常用的JavaScript的代码，让它成为可配置的数据。
     对了，有空时应该把什么“有声有色“之类的软件里自带的JavaScript代码改动一下，重新做一个专门的JavaScript特效.net类库，到时好用。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ranzige/archive/2007/03/22/1537322.aspx

本文讲一下ASP.NET模态显示子窗体的数据传递(ShowModalDialog)
一.添加父窗体javascript代码，“showInfo()”方法用于打开子窗体，并获取子窗体返回结果填充到TextBox1和TextBox2
<script language="javascript" type="text/javascript">
    function showInfo()
    {
        var retValue=window.showModalDialog
        ('Child.aspx','','scroll=yes;dialogWidth=50;dialogHeight=40');
        document.all('<%=TextBox1.ClientID%>').value=retValue[0];
        document.all('<%=TextBox2.ClientID%>').value=retValue[1];
    }
</script>
二.子窗体服务器端提交数据以数组形式返回到父窗体中，例为 Button1按钮

protected void Button1_Click(object sender, EventArgs e)
{
string scode = "var arr=new Array();arr[0]='aaa';arr[1]='bbb';
window.parent.returnValue=arr;window.parent.close();";
string script = string.Format("<script language='javascript' type='text/javascript'>{0}</script>",scode);
Page.RegisterStartupScript("close",script);
}

转载于:https://www.cnblogs.com/LonelySoul/archive/2011/04/16/2018125.html