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

您所在的位置：程序员俱乐部 > 编程开发 > .NET > 模态对话框+父子窗口交互+后台数据处理+刷新父页面

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

2013/10/25 10:53:32 mmcmmc 博客园我要评论(0)

摘要：转自：http://www.cnblogs.com/believexyz/articles/1506605.html模态窗口使用在asp.net中应该算比较常见，经常需要它进行跟数据库相关的操作。常见用法：在父窗口中弹出模态对话框，编辑数据然后刷新父窗口。详细过程如下：第一步：建立父页面：（我用了devexpress控件，没有影响，大家可以标准控件）父页面前台代码如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Main
标签：对话数据数据处理

转自：

http://www.cnblogs.com/believexyz/articles/1506605.html

class="brush:csharp;gutter:true;">模态窗口使用在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, 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 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继续执行代码。    }
}