使用模态窗口编辑数据
为提高客户的体验,经常使用模态窗口。以下为使用的一个例子。
1、建立一个含有iframe的html文件,用于防止自刷新的问题。
Fram.htm
2、 在要打开模态窗口的起始处,编写如下函数:
函数的作用是生成打开模态窗口的JS代码,可以指定窗口的宽度和高度,接收模态窗口关闭后传回的数据。
另处,在发生点击事件的控件处要注册些脚本。如下:
注意这里传递了一个StructureUID参数,用于在模态窗口中接收这个参数,然后根据参数提取数。
3、在模态窗口中进行数据处理。
在模态窗口的后台代码中添加如下函数:
函数可以指定是否刷新父窗口,在编辑完数据和取消编辑处进行调用。
1、建立一个含有iframe的html文件,用于防止自刷新的问题。
Fram.htm
<html>
<head>
<title>在模态窗口中打开的框架页</title>
</head>
<body topmargin="0" leftmargin="0" scroll="no">
<iframe width="100%" height="100%" border="0" id="frame1"></iframe>
<script Language="Javascript">
var el=document.frames.frame1;
if(el!=null){
var arg=window.dialogArguments;
if(arg!=null)
frame1.location.href=arg;
}
</script>
</body>
</html>
<head>
<title>在模态窗口中打开的框架页</title>
</head>
<body topmargin="0" leftmargin="0" scroll="no">
<iframe width="100%" height="100%" border="0" id="frame1"></iframe>
<script Language="Javascript">
var el=document.frames.frame1;
if(el!=null){
var arg=window.dialogArguments;
if(arg!=null)
frame1.location.href=arg;
}
</script>
</body>
</html>
2、 在要打开模态窗口的起始处,编写如下函数:
private string GetOpenModalDialogScript(int width, int height)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script language='javascript'>");
sb.Append("function EditStructure(arg)");
sb.Append("{");
sb.Append("var argument;");
sb.Append("argument = 'EditStructureData.aspx' + '?StructureUID=' + arg;");
sb.AppendFormat("var dialog = 'dialogWidth={0}px;' + 'dialogHeight={1}px;' + 'center=yes;status=no';", width, height);
sb.Append("var retValue=window.showModalDialog('Frame.htm',argument,dialog);");
sb.Append("if(retValue==1)");
sb.Append("top.location.href=top.location.href;");
sb.Append("}");
sb.Append("</script>");
}
{
StringBuilder sb = new StringBuilder();
sb.Append("<script language='javascript'>");
sb.Append("function EditStructure(arg)");
sb.Append("{");
sb.Append("var argument;");
sb.Append("argument = 'EditStructureData.aspx' + '?StructureUID=' + arg;");
sb.AppendFormat("var dialog = 'dialogWidth={0}px;' + 'dialogHeight={1}px;' + 'center=yes;status=no';", width, height);
sb.Append("var retValue=window.showModalDialog('Frame.htm',argument,dialog);");
sb.Append("if(retValue==1)");
sb.Append("top.location.href=top.location.href;");
sb.Append("}");
sb.Append("</script>");
}
另处,在发生点击事件的控件处要注册些脚本。如下:
LinkButton lbnName = e.Item.FindControl("lbnName") as LinkButton;
lbnName.Text = dataItem.Name;
if(!Page.IsClientScriptBlockRegistered("EditStructureData"))
{
Page.RegisterClientScriptBlock("EditStructureData", this.GetOpenModalDialogScript(300,300));
lbnName.Attributes.Add("onclick",
string.Format("EditStructure('{0}');return false;", dataItem.StructureUID.ToString()));
lbnName.Text = dataItem.Name;
if(!Page.IsClientScriptBlockRegistered("EditStructureData"))
{
Page.RegisterClientScriptBlock("EditStructureData", this.GetOpenModalDialogScript(300,300));
lbnName.Attributes.Add("onclick",
string.Format("EditStructure('{0}');return false;", dataItem.StructureUID.ToString()));
3、在模态窗口中进行数据处理。
在模态窗口的后台代码中添加如下函数:
private void EndModalDialog()
{
this.EndModalDialog(true);
}
private void EndModalDialog(bool refurbish)
{
//返回值为1表示成功,top.close()表示把Frame.htm关闭
string script = string.Format("<script language=\'Javascript\'>window.returnValue={0};top.close();</script>", refurbish ? 1 : 0);
Page.Response.Write(script);
Page.Response.End();
}
{
this.EndModalDialog(true);
}
private void EndModalDialog(bool refurbish)
{
//返回值为1表示成功,top.close()表示把Frame.htm关闭
string script = string.Format("<script language=\'Javascript\'>window.returnValue={0};top.close();</script>", refurbish ? 1 : 0);
Page.Response.Write(script);
Page.Response.End();
}
函数可以指定是否刷新父窗口,在编辑完数据和取消编辑处进行调用。