用于弹出ModalDialog进行数据选择的控件

过去写的webform程序, 很多地方需要弹出一个窗口进行数据选择. 最简单的情况是选择了弹出窗口某条数据后直接修改某个html元素的值, 麻烦一点的就是数据库可能保存的是被选择记录的id, 所以除了有用于显示文字的textbox, 还要有一个用来存放id的hidden. 更恐怖的就是选了一条记录后, 还要根据这条记录填充多个html元素的值. 最近写了个控件, 能比较通用的处理这些情况.

这是一个复合控件, 里面包含了一个用来显示文字的TextBox(Text对应控件Text属性), 一个用来存放幕后真实值的隐藏的TextBox(Text对应控件的Value属性), 和一个用Image做成的按钮.

按钮被点击后, 将会调用负责弹出ModalDialog的js函数, 这个函数由ClientOnClick属性指定. 然后这个函数则要根据实际需要去写. 对ModalDialog的要求是, 点击某条记录后应该返回一个包含所需属性的自定义的js对象, 对打开ModalDialog的函数要求是, 第一个参数是传入用于显示文字的TextBox的id, 第二个是hidden的Id. 如果有需要的话可以有更多参数, 在控件的ClientOnClickParams属性以,param1,param2...的形式传入. 用showModalDioalog函数打开用于选择数据的窗口并选择数据后, 给显示文字TextBox和hidden赋需要的值, 最后函数返回ModalDialog的返回值. 在下面的示例函数里虽然只处理了name和id属性, 但ModalDialog可以返回更多信息( 例如sex, birthday属性), 留给ClientAfterClick属性指定的js函数去处理. 示例代码中用了setControls函数读取sex, birthday并把他们填入相应的TextBox

function openTestWindow(displayId, valueId, more) {
var popUp;
var offsetTop = document.getElementById(displayId).offsetTop;
var offsetLeft = document.getElementById(displayId).offsetLeft;
var parentElement = document.getElementById(displayId).offsetParent;
while (parentElement) {
offsetTop += parentElement.offsetTop;
offsetLeft += parentElement.offsetLeft;
parentElement = parentElement.offsetParent;
}
offsetLeft += window.screenLeft - document.body.scrollLeft ;
offsetTop += window.screenTop + document.getElementById(displayId).offsetHeight - document.body.scrollTop;
if (!more) {
url = '/dialogs/SelectPerson.aspx';
}
else {
url = '/dialogs/SelectPerson.aspx?morePerson=' + more;
}
url = applicationPath + url;
popUp = window.showModalDialog(url,
[window],
'dialogWidth:300px;dialogHeight:300px;status:0;dialogLeft:' + offsetLeft + ';dialogTop:' + offsetTop ) ;
if (popUp != null) {
document.getElementById(displayId).value = popUp.name;
document.getElementById(valueId).value = popUp.id;
return popUp;
}
}

控件 示例