• asp.net下用js实现弹出子窗口选定值并返回


    某次暑假,某项目,老师说需要一个弹窗选值的功能。
    一开始以为这个功能很简单实现,后来发现其实非常麻烦。
    在此翻阅笔记回忆总结以下。
    我考虑的解决方案有以下几种:
    利用js提供的window对象的open和showModalDialog方法,这两种方法各有优劣。

    总的来说 open方法各个浏览器的兼容性更好,经过在ie chrome firefox上试验,都能顺利完成功能。

    但缺点有如下两点:
    1).部分浏览器会默认阻止open方法设置的弹窗。
    2).open方法打开新一个新的弹窗,可以同时对弹窗以及原窗口进行操作。

    用showModalDialog方法是打开一个遮罩层的子窗口,只要子窗口未关闭,就不能对父窗口进行
    操作。但是在实践的过程中,遇到了各种容错率差的问题。
    因为弹出窗口有一个gridview,所以首先就要从数据库获取数据并绑定。既然有gridview那么
    肯定就设计到分页和选中某行某值的问题,我选择了使用.net控件自带的两个方法进行选择和
    分页(SelectedIndexChanged方法和PageIndexChanging方法,其实还有表格的信息搜索功能)
    。那么这时候问题来了!!

    问题:在调用window对象showModalDialog方法时,如果在弹出的子窗口,调用任何一个后台的
    方法,或者说做出任何和服务器交互的动作,就会造成对象丢失,也就是说取到的值无法进行
    返回到父页面。

    别慌,有问题那么自然有有解决方案。

    解决方案一:既然调用后台的方法对象会丢失无法传参回父页面,那干脆使用session存储选择
    的数据,这样数据就一定能取到。

    本以为解决了,没想到问题又来了。老师提醒我说,session是有默认时间的,我想是啊,万一
    用户选择后,就去上厕所了,回来session过期了,那岂不是完蛋了。

    存在问题:session有默认时间的限制。

    又一次被老师拒绝了,心有不甘的我继续查阅资料,不久就有研究出一种解决方案。

    解决方案二:利用ifream框架将表格所在的页面包含在弹出的子页面中,在表格所在的页面中
    通过window.parent调用弹出子页面的js函数进行选定值的返回,这样技能调用后台的方法
    showModalDialog对象也不会丢失。

    我心想这样解决总是完成了吧。功能是实现了,但是。。。问题又来了。老师拿我的程序调试
    ,出现了弹出子窗口不能正确按照参数设置的大小进行显示,可在我的电脑上都能很好的实现
    啊。我又一次去查阅资料。

    存在问题:在ie9浏览器或者版本更低的ie浏览器,当showModalDialog对象弹出的子窗口包含
    框架时,浏览器就不兼容。

    这个问题我实在没有办法解决了。。。心想放弃showModalDialog方法。
    解决方案三(div模拟弹窗):很快我又写了一版用div隐藏模拟弹窗的方法。

    后来我仔细分析了一下,这种方法还是存在很大缺点的。既然是要求弹窗选择功能,那肯定表
    格中有很多数据了,如果用div模拟的方式,这样一个页面就要读取过多的数据,造成一个页面
    会加载过慢。

    存在问题:数据过多时,页面加载速度会很慢。

    解决方案四:后来通过查资料,gridview的分页和选择某行搜索操作都用js实现,这样总算是 实现了功能。

    总结:实现弹窗选值功能方法如下
    方法1.利用div 模仿弹出窗口(缺点:数据多加载页面会卡)
    方法2.window.open(缺点:浏览器会当做弹出组织,兼容性很差)
    方法3.window.showModalDialog
    缺点1:执行后台方法会丢失对象
    缺点2:利用框架封装对象时 IE9+以上的浏览器 不能规定大小
    解决方案:所有功能用JS实现

    window.open和window.showModalDialog方法和div实现弹窗示例代码网上很多,此处不做说明。

    潮平帆远,击水三千
  • 相关阅读:
    利用idea里面的mysql插件进行导入sql文件
    JSTL标签
    deepin20系统下配置JAVA开发环境
    deepin20安装及问题解决
    SpringBoot 在项目启之后执行自定义方法的两种方式
    Nick 的经验书
    Java 经验书
    SpringBoot 经验书
    Linux 经验书
    在MacOS中启动SSH服务
  • 原文地址:https://www.cnblogs.com/yfsmooth/p/4419380.html
Copyright © 2020-2023  润新知