在网上看了大把的跟模态窗口相关的技术文档。百家争鸣,各有争议,经过自己的摸索总结,终于走出了一条适合自己的有个人特色的解决道路,在此跟大家分享。
模态窗口使用在asp.net中应该算比较常见,经常需要它进行跟数据库相关的操作。常见用法:在父窗口中弹出模态对话框,编辑数据然后刷新父窗口。详细过程如下:
第一步:建立父页面:(我用了devexpress控件,没有影响,大家可以标准控件)
父页面前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v8.2, Version=8.2.6.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<!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 runat="server">
<title>无标题页</title>
<script type="text/javascript">
function showdialog()
{
var argument1= document.getElementById("TextBox1").value;
var argument2= document.getElementById("TextBox2").value; 传递两个参数给模态窗口
var arguments=new Array(argument1,argument2);
var m= window.showModalDialog("Child.aspx",arguments,"dialogHeight:300px,center:yes,resizable:yes,status:no"); m接受模态窗口的返回值,前台代码执行到这里开始等待模态窗口返回值再往下走。
if(m!=null)
{
document.getElementById("TextBox1").value=m[0];
document.getElementById("TextBox2").value=m[1]; 把接收到得模态窗口返回值显示在父窗口
window.location .reload (); 提交模态窗口后刷新页面
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btn" type="button" οnclick="showdialog()" runat="server" style="width: 171px" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
</form>
</body>
</html>
父窗口后台代码如下:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Main : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
这里进行刷新后操作,写入你的代码
}
}
}
第二步:建立子页面,也就是要弹出的模态窗口页面
前台代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v8.2, Version=8.2.6.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<!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 runat="server">
<title>无标题页</title>
<base target="_self"/> 这里千万不能少,否则模态窗口提交时会弹出新的窗口。ie6 放在head之间,ie7放在head之外
<script type="text/javascript">
function closewindow()
{
window.close();
}
function GetDataAndClose()
{
var a=document.getElementById("TextBox1").value;
var b=document.getElementById("TextBox2").value;
var array=new Array(a,b);
window.returnValue =array; 设置模态窗口的返回值,供父窗口接收
closewindow();
}
function doInit()
{
var MyArgs = window.dialogArguments; 提取父窗口所传的参数
document.getElementById("TextBox1").value= MyArgs[0].toString();
document.getElementById("TextBox2").value = MyArgs[1].toString();
}
</script>
</head>
<body οnlοad="doInit()">初始化
<form id="form1" runat="server">
<table align="center">
<tr>
<td style="width: 125px" align="right">
<dxe:ASPxLabel ID="ASPxLabel1" runat="server" Text="ASPxLabel">
</dxe:ASPxLabel>
</td>
<td style="width: 173px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
<td style="width: 100px">
<dxe:ASPxButton ID="ASPxButton1" runat="server" Text="ASPxButton">
</dxe:ASPxButton>
</td>
</tr>
<tr>
<td style="width: 125px" align="right">
<dxe:ASPxLabel ID="ASPxLabel2" runat="server" Text="ASPxLabel">
</dxe:ASPxLabel>
</td>
<td style="width: 173px">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
<td style="width: 100px">
<dxe:ASPxButton ID="ASPxButton2" runat="server" Text="ASPxButton">
</dxe:ASPxButton>
</td>
</tr>
<tr>
<td colspan="3" align="center" style="height: 21px">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>
</td>
</tr>
</table>
</form>
</body>
</html>
后台代码如下:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string a = TextBox1.Text;
string b = TextBox2.Text;
。。。。 写代码更新数据库
Page.ClientScript.RegisterStartupScript(this.GetType(), "", " <script lanuage=javascript>if(confirm('确定要关闭吗?')){GetDataAndClose()}; </script>"); 这一步很关键,就是传说中的后台调用前台脚本,实现了关闭模态对话框的功能,关闭后程序转到父窗口中的前台javascript继续执行代码。 }
}