模态对话框+父子窗口交互+后台数据处理+刷新父页面

最新推荐文章于 2023-01-05 14:33:04 发布

qq412796770

最新推荐文章于 2023-01-05 14:33:04 发布

阅读量796

点赞数

分类专栏： javascript

javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在网上看了大把的跟模态窗口相关的技术文档。百家争鸣，各有争议，经过自己的摸索总结，终于走出了一条适合自己的有个人特色的解决道路，在此跟大家分享。

模态窗口使用在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继续执行代码。 }
}

qq412796770

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模态对话框+父子窗口交互+后台数据处理+刷新父页面

在网上看了大把的跟模态窗口相关的技术文档。百家争鸣，各有争议，经过自己的摸索总结，终于走出了一条适合自己的有个人特色的解决道路，在此跟大家分享。模态窗口使用在asp.net中应该算比较常见，经常需要它进行跟数据库相关的操作。常见用法：在父窗口中弹出模态对话框，编辑数据然后刷新父窗口。详细过程如下：第一步：建立父页面：（我用了devexpress控件，没有影响，大家可
复制链接

扫一扫