网页弹出层并引起回调（续），返回json数据

 

 
在head部分写一下代码

<link type="text/css" href="JS/redmond/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="JS/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="JS/jquery-ui-1.8.7.custom.min.js"></script>
    <script type="text/javascript" language="javascript">
        function ShowEnquiry() {
            var src = 'Default3.aspx?flag=1';
            var iframes = $('#ShowPage1').find('iframe');
            iframes.attr('src', src);
            $('#ShowPage1').dialog({
                modal: true,
                resizable: false,
                width: 400,
                height: 400,
                close: false
            });
        }

        function CloseTarget(result) {
            document.getElementById('<%=HiddenField1.ClientID %>').value = result;
            $('#ShowPage1').dialog('close');
            $('#<%=Button2.ClientID %>').click();
        }
   
    </script>

说明：src = 'Default3.aspx?flag=1';这个是要弹出窗口的内容页面

ShowPage1:是本页面的一个div；iframe是该div中的内敛框架标签;$('#ShowPage1')是jquery的写法;dialog这个东西，是jquery-ui的内容。

在本页面的body部分添加：

 <div>
        <asp:Button ID="Button1" runat="server" Text="弹出层并引起回调"
            οnclick="Button1_Click" />
    </div>
    <div id="ShowPage1" style="display: none; overflow: hidden;" title="承载新界面">
        <iframe id="Iframe1" name="target" style="border: none; overflow-x: hidden" width="100%"
            height="100%" frameborder="0"></iframe>
    </div>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <div style="display:none;">
    <asp:Button ID="Button2" runat="server" Text="Button" οnclick="Button2_Click" />
    </div>

 

弹出的内容页面加入：

<title>弹出窗口，获取窗口返回的值，使用json序列化</title>
    <link type="text/css" href="JS/redmond/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
    <script type="text/javascript" language="javascript">
        function h() {
            alert('yoyo');
        }
        function closeWindow(result) {
            window.parent.window.CloseTarget(result);
        }
   
    </script>

说明：注意closeWindow(result)方法就是在关闭弹出窗口后要调用的方法；window.parent.window.CloseTarget(result);表示本窗口的父窗口，其中父窗口有.CloseTarget方法。注意最上面的代码也有个CloseTarget(result)，这两个是一致的.

内容窗体body部分的代码：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="返回Default2"
            οnclick="Button1_Click" />

 

Button1_Click事件处理的程序：

string[] var = { TextBox1.Text, TextBox2.Text };
        string jsonstring = ExtensionSerializer.ToJson((object)var);
        this.RegisterStartupScript("key", "<Script>closeWindow('" + jsonstring + "')</script>");

这里将页面上的内容序列化为Json字符串，并注册脚本调用JS方法。这个注册脚本的方法可以用在当界面上使用了微软的Ajax控件时弹出提示框。

ExtensionSerializer好像不是微软提供的框架，它处在Application.Framework.Common.Serialization命名控件内。需要这个dll的话可以给我邮件。

 

当点击弹出窗口的按钮后会关闭当前页面，其实是父窗口关闭了那个DIV。

注意父窗口的  $('#<%=Button2.ClientID %>').click();
它会去执行Button2的事件响应。这就是所谓的回调。

在这个事件响应里面写以下代码：

string[] var = ExtensionSerializer.JsonDeserialize<string[]>(HiddenField1.Value);
        Response.Write(var[0].ToString());
        Response.Write(var[1].ToString());

 

于是将子窗口传回父窗口的值反序列化显示到界面上。