JavaScript 弹出窗体点击按钮返回选择数据的实现


Posted in Javascript onApril 01, 2010

首先是父页面的代码:

<head runat="server"> 
<title>无标题页</title> 
<%-- <script type="text/javascript"> 
function openDia() { 
var returned = window.showModalDialog("Default4.aspx?" + (new Date()), window); 
if (returned) { 
document.getElementById("ret").innerHTML = returned; 
} 
else { 
document.getElementById("ret").innerHTML = ""; 
} 
} 
</script> --%> 
<script type="text/javascript"> 
function openDia(){ 
var returned = window.showModalDialog("Default3.aspx?" + (new Date()), window); 
if (returned){ 
document.getElementById("tbtext").value = returned; 
} 
else{ 
document.getElementById("tbtext").value = ""; 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="ret"> 
<input id="tbtext" type="text" value="" onclick="openDia();return false;" /> 
</div> 
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="openDia();return false;" /> 
<input id="Hidden1" type="hidden" runat="server" /> 
</form> 
</body> 
</html>

关于加上那个 (new Data()) 是要避免showModalDialog页面自动缓存的问题,导致第二次打开页面,数据没有被刷新,这是因为showModalDialog页面如果每次的URL一样的话,它会自动显示以前在缓存里面的数据。
接着是子页面Default3.aspx的代码:
<head runat="server"> 
<title>无标题页</title> 
<script type="text/javascript"> 
function getSelected(data) { 
var str = data; 
window.returnValue = str.toString(); 
window.close(); 
} 
</script> 
<base target="_self"/> 
</head> 
<body> 
<form id="form1" runat="server" target=""> 
<div> 
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> 
<Columns> 
<asp:TemplateField> 
<ItemTemplate> 
<asp:LinkButton id="lnkSelect2" runat="server" Text="Select" > </asp:LinkButton> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
 </div> 
</form> 
</body> 
</html>

Default3.aspx里面有一个gridview控件,数据绑定(自己去绑定,代码就不贴上来了)好后,就是选择自己需要的数据了。
Default3.aspx.cs:
[code]
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton b = (LinkButton)e.Row.FindControl("lnkSelect2");
b.Attributes.Add("OnClick", "javascript:getSelected('" + e.Row.Cells[1].Text + "');");
}
}
[html]
其中Default3.aspx中<head></head>之间的<base target="_self"/>和<form target="">作用是可以避免子页面点击选择按钮后弹出第三个窗体。
例子就这样,具体还是要根据自己的需求s去体验和改进。
Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
原生js生成图片验证码
Oct 11 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 #Javascript
js prototype截取字符串函数
Apr 01 #Javascript
javascript getElementsByClassName函数
Apr 01 #Javascript
JS getStyle获取最终样式函数代码
Apr 01 #Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 #Javascript
JS中confirm,alert,prompt函数使用区别分析
Apr 01 #Javascript
JavaScript中实现块作用域的方法
Apr 01 #Javascript
You might like
CI(CodeIgniter)框架介绍
2014/06/09 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
动态添加js事件实现代码
2009/03/12 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
理解javascript中的闭包
2017/01/11 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
详解微信UnionID作用
2019/05/15 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
华为慧通面试题
2012/09/11 面试题
高三自我鉴定范文
2013/10/19 职场文书
如何写你的创业计划书
2014/01/07 职场文书
2016年元旦寄语
2015/08/17 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android