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

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

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

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

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

当在模态窗体中选择数据之后，关闭模态窗体 然后返回选择的数据。。。。
 
到这里，一个模态窗体返回数据的示例就完成了！不过这里有个问题。。
如果我需要返回的数据是多个。而并非单纯一个name…..好像我只能将多个数据用特殊符号比如‘&’或者别的什么分割组装成一个字符串来返回。然后在父页面在分拆！
NO。这不是个好办法！
 
经过思考以及同事的体系，我做了如下修改：
 

我在返回之前声明一个类似json的数组。然后给数组赋值，将json数据返回去。比如这里，我返回 name,sex,age,heght,weight 5个数据组成的json数据。
html 代码如下： so easy!
="returnCode('王妩','女','21','170',90)">
    td>
        王妩
    >
    td>
        女
    >
    td>
        21
    >
    td>
        170
    >
    td>
        90
    >
tr>
如上写的话。我这个 datalist.aspx 页面只管负责返回json数组，数组里边放置了所有可能需要返回的内容。然后页面上你自个去拿出来真正需要的数据！
JS文件中我在高度封装一下。再允许我过度封装一下：o(∩_∩)o
function Choose(url, title, iWidth, iheight) {
    /// 

    ///     JS模态弹窗辅助支持函数
    /// 
    /// 
    ///     列表页面相对地址
    /// 
    /// 
    ///     列表页面页面标题
    /// 
    /// 
    ///     弹窗宽度
    /// 
    /// 
    ///     弹窗高度
    /// 
    /// 
    var ;
    var ;
    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) {
    /// 

    ///   js模态窗口
    /// 
    /// 
    /// 
    ///     点击触发弹窗的对象
    /// 
    /// 
    ///     要赋值的控件数组
    /// 
    /// 列表页面相对地址
    /// 列表页面页面title标题（貌似没作用）
    /// 弹窗宽度
    /// 弹窗高度
    $('#' + 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代码其实很简单：


	  

		
 代码如下
		
复制代码
	  
	  

		

>
    form id="form1" runat="server">
    div>
        姓名：>
        br />
        性别：>
        br />
        年龄：>
        br />
        身高：>
        br />
        体重：>
        br />
        a href="javascript:;" id="selectEmployee">选择>
    div>
    form>
body>

	  
	
一用jquery库，我用的是1.6.2


	  

		
 代码如下
		
复制代码
	  
	  

		



	  
	
js调用代码也很简单：


	  

		
 代码如下
		
复制代码
	  
	  

		



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