先允许我简单的啰嗦两句,可能由于我几年C/S开发的这种惯性思维,总希望主要的业务逻辑在主窗口中完成,有时,可能会用到弹出窗口,这就必然会有主
、弹窗口间数据的传递。在C/S中,实现这样的业务操作,还是比较简单的,而且功能很强大,适合任何类型数据的传递。所以,我就想到,在Web开发中,
应该也有这个功能。好了,下面就进入主题吧。
首先,我在项目中。添加了三个aspx页面。MainForm.aspx、DialogForm1.aspx、DialogForm2.aspx。
接着, 在MainForm页面中添加下面代码:
<form id="mainWinForm" runat="server">
<div>
<p>待接受数据1:<input type="text" id="txtData1" /></p>
<p>待接受数据2:<input type="text" id="txtData2" /></p>
<br />
<p>
<input type="button" id="openDialog1" value="打开弹出窗口1" οnclick="openWin1();" />
<input type="button" id="openDialog2" value="打开弹出窗口2" οnclick="openWin2();" />
</p>
</div>
</form>
<script type="text/javascript">
var parentWin = mainWinForm;
var winFeature = "dialogHeight:300px; dialogLeft:200px ";
function openWin1() {
var url = "DialogForm1.aspx";
window.showModalDialog(url, parentWin, winFeature);
}
function openWin2() {
var url = "DialogForm2.aspx";
var retValues = window.showModalDialog(url, parentWin, winFeature);
if (retValues) {
parentWin.txtData1.value = retValues;
}
}
</script>
在DialogForm1.aspx中添加下面代码:
<form id="sendForm2" runat="server">
<div>
<p>待传数据1:<input type="text" id="Data1" /></p>
<p>待传数据2:<input type="text" id="Data2" /></p>
<br />
<p><input type="button" id="btnSend" value="传数据回父窗口" οnclick="sendData(sendForm2.Data1.value,sendForm2.Data2.value);"/></p>
</div>
</form>
<script type="text/javascript">
function sendData(val1, val2) {
var obj = window.dialogArguments;
//if (obj) {
//obj.txtData1.value = val1;
//obj.txtData2.value = val2;
// }
if (obj) {
var data1Obj = obj.document.getElementById("txtData1");
data1Obj.value = val1;
var data2Obj = $(obj.document).find("[id='txtData2']");
data2Obj.val(val2);
}
window.close();
}
</script>
在DialogForm2.aspx中添加下面代码:
<form id="sendForm2" runat="server">
<div>
<p>传数据至父窗口:<input type="text" id="Data1" /></p>
<br />
<p><input type="button" id="btnSend" value="传数据回父窗口" οnclick="sendData(sendForm2.Data1.value);"/></p>
</div>
</form>
<script type="text/javascript">
function sendData(val) {
window.returnValue = val;
window.close();
}
</script>
说明:在上面两个弹出窗口中用到了Jquery,所以需要引用Jquery.js。
以上就能实现简单的窗口间的数据传递,若有不妥的地方,还请多多指点,或者有更好的补充点,也请不吝赐教,谢谢!