无需ajax刷新父页面的控件的值(ie/firefox)(downmoon原创)
在《.net2.0中新增的Substitution控件--动态更新缓存页的部分(也可用于局部刷新)》一文中,可以局部缓存页面的部分内容,这在.net2.0中是新增的一个功能。
另外一个常见的应用是在Iframe页面中刷新父页面的某个控件(TextBox或Label等)的值。
这里邀月介绍一种简单的做法:在ie8/Firefox3.5下测试通过
共两个页面,一个master.aspx,一个masterdetail.aspx页面。
其中master.aspx的内容如下:
1 <%@ Page Language="C#" AutoEventWireup="true" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>父页面的控件值由Iframe刷新</title>
7
8 <script type="text/C#" runat="server">
9 protected void Page_Load(object sender, EventArgs e)
10 {
11 txtOrgTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff");
12 }
13 </script>
14
15 </head>
16 <body>
17 <form id="form1" runat="server">
18 <div>
19 <iframe src="masterdetail.aspx" width="480" height="41" frameborder="0" style="background-color: #EFEFEF">
20 </iframe>
21 </div>
22 <div>
23 刷新时间:
24 <asp:TextBox ID="txtTime" runat="server" Visible="true" Style="width: 240px; height: 20px;"></asp:TextBox>
25 <br />
26 原始时间:
27 <asp:TextBox ID="txtOrgTime" runat="server" Visible="true" Style="width: 240px; height: 20px;"></asp:TextBox>
28 </div>
29 </form>
30 </body>
31 </html>
32
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>父页面的控件值由Iframe刷新</title>
7
8 <script type="text/C#" runat="server">
9 protected void Page_Load(object sender, EventArgs e)
10 {
11 txtOrgTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff");
12 }
13 </script>
14
15 </head>
16 <body>
17 <form id="form1" runat="server">
18 <div>
19 <iframe src="masterdetail.aspx" width="480" height="41" frameborder="0" style="background-color: #EFEFEF">
20 </iframe>
21 </div>
22 <div>
23 刷新时间:
24 <asp:TextBox ID="txtTime" runat="server" Visible="true" Style="width: 240px; height: 20px;"></asp:TextBox>
25 <br />
26 原始时间:
27 <asp:TextBox ID="txtOrgTime" runat="server" Visible="true" Style="width: 240px; height: 20px;"></asp:TextBox>
28 </div>
29 </form>
30 </body>
31 </html>
32
masterdetail.aspx的内容如下:
1 <%@ Page Language="C#" AutoEventWireup="true" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>即将刷新父页面的控件值</title>
6 <script language="javascript" type="text/javascript">
7 function doReturn(valCurrentTime) {
8 parent.document.forms[0].elements["txtTime"].value = valCurrentTime;
9 }
10 </script>
11 <script type="text/C#" runat="server">
12 protected void btn_Refresh_Click(object sender, EventArgs e)
13 {
14 string m_script = @"<script language=Javascript>doReturn('{0}');<" + @"/script>";
15 m_script = string.Format(m_script, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff"));
16 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "getTime", m_script);
17 }
18 </script>
19 </head>
20 <body>
21 <form id="form1" runat="server">
22 <div>
23 <asp:Button ID="btn_Refresh" Text="我在IFrame页面刷新父页面的时间" runat="server" OnClick="btn_Refresh_Click">
24 </asp:Button>
25 </div>
26 </form>
27 </body>
28 </html>
29
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head runat="server">
5 <title>即将刷新父页面的控件值</title>
6 <script language="javascript" type="text/javascript">
7 function doReturn(valCurrentTime) {
8 parent.document.forms[0].elements["txtTime"].value = valCurrentTime;
9 }
10 </script>
11 <script type="text/C#" runat="server">
12 protected void btn_Refresh_Click(object sender, EventArgs e)
13 {
14 string m_script = @"<script language=Javascript>doReturn('{0}');<" + @"/script>";
15 m_script = string.Format(m_script, DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff"));
16 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "getTime", m_script);
17 }
18 </script>
19 </head>
20 <body>
21 <form id="form1" runat="server">
22 <div>
23 <asp:Button ID="btn_Refresh" Text="我在IFrame页面刷新父页面的时间" runat="server" OnClick="btn_Refresh_Click">
24 </asp:Button>
25 </div>
26 </form>
27 </body>
28 </html>
29
显示效果:
需要注意的是:
如果是在master模板页面或ascx文件的方式,则需要将
parent.document.forms[0].elements["txtTime"].value = valCurrentTime;
改成
parent.document.forms[0].elements["浏览器中源码显示的input的ID"].value = valCurrentTime;
补充:有朋友提到性能问题:
经测试,当master.aspx页面有2000个TextBox(比如GridView)时,回刷页面确实比较有些延迟。
将上面的脚本改为:
1 function doReturn2(valCurrentTime) {
2 var ObjectControl = parent.document.getElementById("txtTime");
3 //alert(ObjectControl);
4 if (null != ObjectControl) { ObjectControl.value = valCurrentTime; }
5 }
2 var ObjectControl = parent.document.getElementById("txtTime");
3 //alert(ObjectControl);
4 if (null != ObjectControl) { ObjectControl.value = valCurrentTime; }
5 }
发现还是比较慢,不知道有没有更也的解决方案?