在showModalDialog函数打开的窗口中提交页面的时候重新打开新页面的解决办法

 

在showModalDialog函数打开的窗口中提交页面的时候重新打开新页面的解决办法

 

业务需求是这样的：在一个列表页面（ListPage）中，点击按钮打开一个弹出窗口（EditPage），在弹出窗口中编辑信息后，点击“确定”保存信息，关闭弹出窗口同时重新刷新ListPage。

 

打开弹出窗口的JS：

function openPage() {
    var seqId = document.getElementById("hidId").value;

    if (seqId != "") {
        var width = 650;
        var height = 550;
        var left = eval(screen.width - width) / 2;
        var top = eval(screen.height - height) / 2;
        var open_feature = "dialogWidth=" + width + "px;dialogHeight=" + height + "px;left=" + left + "px;top=" + top + "px,toolbar=0;menubar=0;resizable=0;location=0;status=0;";
        var ret = window.showModalDialog(rootPath + "Home/Edit?seqId=" + seqId, window, open_feature);
        if (ret==1) {
            window.location.href = rootPath + "Home/Index"; //重新刷新列表页面
        }
    }
}

 

在EditPage页中，点击确定按钮的JS函数如下：

function Save() {
    var theForm = document.forms[0];
    if (theForm && (!theForm.onsubmit || (theForm.onsubmit() != false))) {

             theForm.action = rootPath + "Home/Update";
        theForm.submit();
    }
}

 

对应的服务器端的代码：

        [ValidateInput(false)]
        [HttpPost]
        public void Update (AddSupportHistoryModel addSupportHistoryModel)
        {
            //数据库的保存操作…

	   //保存成功后，关闭弹出窗口
            Response.Write("<script type=\"text/javascript\">window.close();window.returnValue=1</script>");
            Response.Flush();
            Response.End();
        }

 

出现的问题：点击“确定”按钮后，又弹出了一个新的空白窗口，并且先前弹出编辑窗口也没有关闭

 

解决办法：在弹出编辑窗口的head中添加以下代码，以上问题即可解决。

<base target="_self"></base>

 

另外，Google浏览器Chrome不支持直接对showModalDialog弹出窗体设置returnValue，替代方法是在弹出窗口中设置window.opener.returnValue。

 

以上代码经过修改后，如下：

打开弹出窗口的JS：

function openPage() {
    var seqId = document.getElementById("hidId").value;

    if (seqId != "") {
        var width = 650;
        var height = 550;
        var left = eval(screen.width - width) / 2;
        var top = eval(screen.height - height) / 2;
        var open_feature = "dialogWidth=" + width + "px;dialogHeight=" + height + "px;left=" + left + "px;top=" + top + "px,toolbar=0;menubar=0;resizable=0;location=0;status=0;";
        var ret = window.showModalDialog(rootPath + "Home/Edit?seqId=" + seqId, window, open_feature);
        if (ret==undefined) {
            ret = window.returnValue; //*****
        }
        if (ret==1) {
            window.location.href = rootPath + "Home/Index"; //重新刷新列表页面
        }
    }
}

对应的服务器端的代码：

        [ValidateInput(false)]
        [HttpPost]
        public void Update (AddSupportHistoryModel addSupportHistoryModel)
        {
            //数据库的保存操作…

	   //保存成功后，关闭弹出窗口
            Response.Write("<script type=\"text/javascript\">window.close();window.returnValue=1;if(window.opener) { window.opener.returnValue=1;}</script>");
            Response.Flush();
            Response.End();
        }