转载:点击打开原链接
?
模态窗口使用在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" onclick="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,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 onload="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继续执行代码。??? } }