window.showModalDialog在.net中封窗口传数据方法

以上这个情景完全虚构,或者上边这一段文字在系统设计当中有问题。此刻,我们可以忽略掉。本文重点不再系统设计是否合理。

     直接上图:效果图大致如下:

     现在是需求是这样的:当网编点击超链接“选择的时候”,我们会有一个模态弹窗蹦出来让网编去选择某个数据。(当然这里可以用JS控制弹出DIV来实现,也不在本文讨论范畴!)

     以上情况是,姓名直到体重5个内容 ,网编可以去输入(如果网编想偷懒,也可以点击选择按钮),也可以选择。当在弹出的模态窗体中任意一行数据上鼠标点击的时候。返回这一行的数据。并且赋值给页面中的文本框。

    这种效果想想很容易实现,不过鉴于本人技术有限,以前实现类似功能只能返回一个数据。实现代码如下:

//超连接ID为 div , 点击超链接后调用本JS函数弹出datalist.aspx
//并且关闭datalist.aspx模态窗体之后给父页面返回一个string值
//并且赋值给 textbox1
$('#div').click(function() {
    var result = window.showModalDialog("datalist.aspx", title, 'dialogHeight:300px;dialogWidth:300px ;status:no;help:no');
    if (typeof (result) != "undefined") {
        $('#textbox1').val(result);
    }
    else {
        alert("没有选择任何数据");
        return false;
    }
});

接下来,在 datalist.aspx 页面代码实现如下:

<tr onclick="returnCode('李四')">
                <td>
                    李四
                </td>
                <td>
                    男
                </td>
                <td>
                    14
                </td>
                <td>
                    150
                </td>
                <td>
                    60
                </td>
            </tr>

由于需要点击模态窗体中的任意一行返回数据。非点击某个 “选择”连接才返回数据。所以将 click 事件写在 tr 中。

JS返回数据代码如下:

<script language="javascript">
    function returnCode(name) {
        //        if (confirm("您确定选择此顾客吗?") != true) {
        //            return;
        //        }

        window.returnValue = name;
        window.close();
    }
</script>

当在模态窗体中选择数据之后,关闭模态窗体 然后返回选择的数据。。。。

 

到这里,一个模态窗体返回数据的示例就完成了!不过这里有个问题。。

如果我需要返回的数据是多个。而并非单纯一个name…..好像我只能将多个数据用特殊符号比如‘&’或者别的什么分割组装成一个字符串来返回。然后在父页面在分拆!

NO。这不是个好办法!

 

经过思考以及同事的体系,我做了如下修改:

 

<script language="javascript">
    function returnCode(name, sex, age, height, weight) {
        //        if (confirm("您确定选择此顾客吗?") != true) {
        //            return;
        //        }
        var jsonData = {};
        jsonData.name = name;
        jsonData.sex = sex;
        jsonData.age = age;
        jsonData.height = height;
        jsonData.weight = weight;
        //alert(jsonData);
        window.returnValue = jsonData;
        window.close();
    }
</script>

我在返回之前声明一个类似json的数组。然后给数组赋值,将json数据返回去。比如这里,我返回 name,sex,age,heght,weight 5个数据组成的json数据。

html 代码如下: so easy!

<tr onclick="returnCode('王妩','女','21','170',90)">
    <td>
        王妩
    </td>
    <td>
        女
    </td>
    <td>
        21
    </td>
    <td>
        170
    </td>
    <td>
        90
    </td>
</tr>

如上写的话。我这个 datalist.aspx 页面只管负责返回json数组,数组里边放置了所有可能需要返回的内容。然后页面上你自个去拿出来真正需要的数据!

JS文件中我在高度封装一下。再允许我过度封装一下:o(∩_∩)o

function Choose(url, title, iWidth, iheight) {
    /// <summary>
    ///     JS模态弹窗辅助支持函数
    /// </summary>
    /// <param name="url" type="String">
    ///     列表页面相对地址
    /// </param>
    /// <param name="title" type="String">
    ///     列表页面页面标题
    /// </param>
    /// <param name="iWidth" type="Number">
    ///     弹窗宽度
    /// </param>
    /// <param name="iheight" type="Number">
    ///     弹窗高度
    /// </param>
    /// <returns type="String" />
    var height = 300;
    var width = 500;
    if (iheight != null)
        height = iheight;
    if (iWidth != null)
        width = iWidth;
    var retvalue;
    retvalue = window.showModalDialog(url, title, 'dialogHeight:' + height + 'px;dialogWidth:' + width + 'px ;status:no;help:no');
    return retvalue;
}

我把模态窗体的属性能提取的尽量都提取出来做成参数。

Choose 这个函数仅仅是实现一个功能。弹出并且返回数据。由于 js 是弱语言。var 真是 提供了极大的便利,我管你返回什么类型的数据。var 都可以搞定!

因为要封装。我要把这个函数做成近可能的公共。近可以的在客户端减少代码量。

我们先来思考一下,要弹出模态窗口:

1、首先必须得有选择数据的模态窗体内容。以上已经解释如何去做(没看明白的同学翻回去看。)

2、必须得有触发这个事件的对象

3、我要考虑将值在这个方法中就赋值给控件

4、还需要一个高度和宽度。因为Choose()方法虽然提供了默认的高度和宽度。但是也提供了这样可以修改的参数。

 

以上必备条件基本上算是完备了!但是有个问题。我如何才能在高度封装的JS函数中完成对页面文本框的赋值,而且要保证没有“嫁错郎”。由于调用页面是未知的世界。我不知道哪个页面要去调用这个函数。并且我不知道他会传来几个控件。怎么办?

好吧!我可以考虑约定一下,你要调用我这个函数来实现功能,那好,你传给我的文本框必须是个数组类型的。而且必须有可区分的“下标”。

接下来我就可以来封装了!封装封装封装封封封……装!

function ChooseDataFromUrl(EventControl, ValueControls, Url, Title, iWidth, iheight) {
    /// <summary>
    ///   js模态窗口
    /// </summary>
    /// <returns type="Json" />
    /// <param name="EventControl" type="String">
    ///     点击触发弹窗的对象
    /// </param>
    /// <param name="ValueControl" type="Elements">
    ///     要赋值的控件数组
    /// </param>
    /// <param name="Url" type="String">列表页面相对地址</param>
    /// <param name="Title" type="String">列表页面页面title标题(貌似没作用)</param>
    /// <param name="iWidth" type="Number">弹窗宽度</param>
    /// <param name="iheight" type="Number">弹窗高度</param>
    $('#' + EventControl).click(function() {
        var result = Choose(Url, Title, iWidth, iheight);
        if (typeof (result) != "undefined") {
            for (control in ValueControls) {
                $('#' + ValueControls[control]).val(result[control]);
            }
        }
        else {
            alert("没有选择任何数据");
            return false;
        }
    });
}

以上函数中有6个参数。

1、触发函数事件的对象

2、要赋值的控件s

3、一个string的url参数,这里就是模态窗体的相对路径地址

4、页面title(这个貌似没什么用)

5、高度

6、宽度

首先呢,当调用了这个函数之后就会传进来以上6个参数,首先给 触发该函数事件的对象绑定触发条件。

 代码如下 复制代码

$('#' + EventControl).click(function() { }

其次,调用Choose函数返回 var 类型的数据。大家知道,这个 Choolse 返回的是个 json 数组。

接下来,我要遍历 控件集合了!我取控件集合的可区分下标来从模态窗体中取值并且赋值给控件。

 代码如下 复制代码

for (control in ValueControls) { $('#' + ValueControls[control]).val(result[control]); }

这部分有点难以理解。看完页面调用就会豁然开朗!

 

页面HTML代码其实很简单:


 代码如下 复制代码
<body>
    <form id="form1" runat="server">
    <div>
        姓名:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <br />
        性别:<asp:TextBox ID="txtSex" runat="server"></asp:TextBox>
        <br />
        年龄:<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
        <br />
        身高:<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox>
        <br />
        体重:<asp:TextBox ID="txtweight" runat="server"></asp:TextBox>
        <br />
        <a href="javascript:;" id="selectEmployee">选择</a>
    </div>
    </form>
</body>

一用jquery库,我用的是1.6.2


 代码如下 复制代码
<script src="../Script/jquery-1.6.2.min.js" type="text/javascript"></script>

js调用代码也很简单:


 代码如下 复制代码
<script language="javascript" type="text/javascript">

    //声明集合,  .后边的关键字名称必须和弹窗页面返回的json 名称一致
    //声明一个文本框集合。
    var controls = {};
    controls.name = "<%=txtName.ClientID %>";
    controls.sex = "<%=txtSex.ClientID %>"
    controls.age = "<%=txtAge.ClientID %>"
    new ChooseDataFromUrl("selectEmployee", controls, "showlist.aspx", "选择员工",500,800);
    new ChooseDataFromUrl("<%=txtName.ClientID %>", controls, "showlist.aspx", "选择员工", 800, 500);

</script>

以上实现了2中触发ChooseDataFromUrl的事件。第一是点击“选择”超链接触发,另外一种是点击第一个,也就是“姓名”文本框触发。当然也可以在文本框旁边放个 小图标来触发咯。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索数组
, 数据
, 控件
, 函数
, 参数
代码
window.open 新窗口、window打开新窗口、window切换窗口快捷键、window.open弹出窗口、window.open 模态窗口,以便于您获取更多的相关知识。

时间: 2024-09-30 13:22:55

window.showModalDialog在.net中封窗口传数据方法的相关文章

浏览器兼容性-使用window.showModalDialog()在谷歌浏览器中打不开子窗口

问题描述 使用window.showModalDialog()在谷歌浏览器中打不开子窗口 父窗口相关代码 function funShowDialog(fileName, str_dialogWidth, str_dialogHeight, obj_Text, hid_value, ldObj, parentFieldName) { var path = fileName + "&check=" + hid_value; var SValue = ""; /

mysql 实现互换表中两列数据方法简单实例_Mysql

由于最近项目,有这样一个需求,是把数据库中的两列数据互换,经过好久才搞定,这里写个简单实例,做过记录. 1.创建表及记录用于测试 CREATE TABLE `product` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '产品id', `name` varchar(50) NOT NULL COMMENT '产品名称', `original_price` decimal(5,2) unsigned NOT NULL COMMEN

教你几种在SQLServer中删除重复数据方法_MsSql

方法一 复制代码 代码如下: declare @max integer,@id integer declare cur_rows cursor local for select 主字段,count(*) from 表名 group by 主字段 having count(*) > 1 open cur_rows fetch cur_rows into @id,@max while @@fetch_status=0 begin select @max = @max -1 set rowcount

教你几种在SQLServer中删除重复数据方法

方法一 复制代码 代码如下: declare @max integer,@id integer declare cur_rows cursor local for select 主字段,count(*) from 表名 group by 主字段 having count(*) > 1 open cur_rows fetch cur_rows into @id,@max while @@fetch_status=0 begin select @max = @max -1 set rowcount

window.showModalDialog两次加载问题清除缓存方法_实用技巧

今天遇到这样一件事情, 复制代码 代码如下: var frmHeight = 352; var frmWidth = 508; var frmTop = (window.screen.height - frmHeight) / 2; var frmLeft = (window.screen.width - frmWidth / 2); var url = "ChosePerson.aspx"; var parameter = "dialogHeight:" + fr

window.showModalDialog参数传递中含有特殊字符的处理方法_javascript技巧

程序没有改动过运行一直正常,突然有一天同事告知出现错误了.经过检查发现传递的数据中出现了#等特殊字符,浏览器只取到#号前面的数据,后面的被截断.然后首先想到先把数据用 Server.UrlEncode方法编码一下,虽然可以看到特殊字符已经被编码,可是正确的数据依然没有传递过去,错误依旧. 复制代码 代码如下: "JavaScript:window.showModalDialog('Info.aspx?bh=" + Server.UrlEncode(e.Row.Cells.FromKey

Asp.net mvc 中如何为window.showModalDialog指定路径

问题描述 一般window.showModalDialog都是指定相对或绝对路径打开页面,mvc中怎么处理我调指向路径指不过去,调控制器/方法/id也过不去.我想打印easyui的datagrid表数据,网上找到的js方法,这句搞不定啊--.谁懂求指教!! 解决方案

js中window.showModalDialog各浏览器居中和传参实例兼以及一些兼容性问题

  浏览器居中以及传参实例 window.showModelDialog可设置center参数为yes,保证其在子窗口在父窗口居中. 但是该参数只对IE浏览器有效,对火狐无效,只有通过计算模态窗口的居中位置.   解决办法 function openShowModalDialog(url,param,whparam,e){    // 传递至子窗口的参数  var paramObj = param || { };    // 模态窗口高度和宽度  var whparamObj = whparam

JavaScript中window.showModalDialog()用法详解_javascript技巧

今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,一个是window.open();一个是window.showModalDialog()方法,后者是存在父子关系的一种弹出窗口,只有子窗关闭,父窗口才激活,并且可以传送参数和返回值.正好又温习一遍用法,顺便在此记录过程中遇到的问题. 基本介绍: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来