在winform程序中经常用到这样一个功能:弹出一个子窗口,在子窗口中完成选择或计算,然后把选择或计算的结果返回给父窗口。这个功能在winform程序中很容易实现,那么在web程序中怎么实现这个功能呢?
其实web程序也是可以实现这个功能的,原理是利用页面元素的可见性,把父页面中的控件ID传递到子页面中,然后在子页面中对控件赋值,从而达到保存子页面的值的目的。代码如下:
<a href = "javascript:void(0)" onclick = "ShowProductWindow('<%=txtProduct.ClientID %>','<%=lblProductID.ClientID %>')" style="width:30px">查询</a>
定义一个超链接,点击超链接会弹出子页面,ShowProductWindow是一个javascript函数,有两个参数,分别是父页面中指定的两个控件的ID,在函数中,通过子页面的url的查询字符串来传递父页面的两个控件的id值,定义如下:
function ShowProductWindow(obj,objid)
{
var m = document.getElementById(obj); // 获取控件对象
var p = getPosition(m); // 获取控件对象在页面的位置
var url = 'ProductSelect.aspx?TBIN='+obj+'&TBINID='+objid;//定义子页面地址,注意父页面控件的ID是通过url中的查询字符串传递的
window.open(url,'newwindow', 'height=400, width=400, top='+p.Y+', left='+p.X+', toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'); // 弹出子页面,指定页面的大小,弹出位置
}
// 获取页面元素所在位置
function getPosition(e)
{
var left = 0;
var top = 0;
var scroll = e;
//计算位置
while(e)
{
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent
}
//滚动条位置
while(scroll)
{
if (scroll.scrollLeft){left -= scroll.scrollLeft;}
if (scroll.scrollTop){top -= scroll.scrollTop;}
scroll = scroll.parentElement
}
return {X:left,Y:top}
}
在子页面的page_load事件中,需要接受父页面控件的id值,可以把值保存在页面隐藏的控件中,这样就不用担心被刷新掉。
protected void Page_Load(object sender, EventArgs e)
{
lgc = new ProductManageLogic(cidCurrent);
if (!IsPostBack)
{
BindData();
string tbin = Request.Params["TBIN"] == null ? "" : Request.Params["TBIN"].ToString();
txtTBIN.Value = tbin; // 把父页面的一个控件id保存在txt控件中
string tbinid = Request.Params["TBINID"] == null ? "" : Request.Params["TBINID"].ToString();
txtTBINID.Value = tbinid; // 把父页面中的另一个控件id保存在另一个txt控件中
}
}
在子页面返回按钮中,需要把子页面的返回值写入父页面控件中,从而达到传递返回值的效果。这里还是需要借助javascript函数。
protected void gvContent_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "select")
{
string name = gvContent.DataKeys[int.Parse(e.CommandArgument.ToString())].Values["productname"].ToString();
string id = gvContent.DataKeys[int.Parse(e.CommandArgument.ToString())].Values["id"].ToString();
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "ReturnDetail('"+name+"','"+id+"');", true);
//Response.Write("<script>window.close();window.opener.location.href=window.opener.location.href;</script>");
}
}
本例中,是在单击gridview中名称为select的超链接进行返回。当单击超链接时,首先获取需要返回的值name和id,然后在页面中执行javascript函数ReturnDetail,在此函数中把返回值写入父页面的控件中,函数定义如下:
function ReturnDetail(BIN,BINID)
{
var _TBIN=document.all("txtTBIN").value; // 从子页面控件中获取父页面控件的ID(load时保存的)
var obj_TBIN= eval("window.opener.document.all('"+_TBIN+"')"); // 在页面中查找到父页面控件
obj_TBIN.value= BIN; // 把返回值赋到父页面控件中(另外一个返回值同理)
var _TBINID=document.all("txtTBINID").value;
var obj_TBINID= eval("window.opener.document.all('"+_TBINID+"')");
obj_TBINID.value= BINID;
window.close(); // 调用close函数关闭当前页面,达到返回的目的
}
返回父页面后,就可以从父页面控件中取出子页面的返回值,进行相应的操作了。