ASP.NET页面跳转提示保存

直接切入正题吧.

    要求:带母版页的ASP.NET页面实现Microsofe Word一样的提示保存效果:如果用户更改了某些控件的值,在未保存状态下进行其他操作,弹出对话框,提示是否保存,点击是则自动保存.

   网上查到很多的前人的例子,感觉都不是特别贴切.总结前人的经验,得出如下方案:

   在页面上设置一个隐藏控件,用以记录页面是否修改的状态,改变相应控件值时用JS改变该隐藏控件的值,在onunload事件中验证该控件值,如果发生改 变,弹出提示,如果选择是,找到页面的保存按钮,执行其click事件,如果选择不保存,直接跳过.这是大部分前人的做法,对于页面的一切事件都适用,伴 随而来的问题是:并非所以的控件事件都需要触发这个提示保存,比如保存按钮,为了排除这类按钮,引入另一个运行于客户端的html隐藏控件,用以存放是否 需要验证,保存按钮跳过验证的方法就是在该按钮的onclientclick事件中改变该html控件值,设为不需要验证,之所以引用运行于客户端的 html控件是有实质道理的,客户端html控件在每次页面回发之后能够自动恢复到初始值,这解决了回发验证数据不通过,页面应该仍然处于待保存状态的问 题.余下的就不用多说了,在保存之后把页面表征是否修改的控制值归位.

   事前准备:如果网站用了母版页,且每个页面都要实现这样的功能,建议把每个页面的保存按钮的ID设为相近的甚至相同的值,主要为了提示保存时点击是之后能够找到改保存按钮.

   第一步,在母版页设置两个隐藏的textbox.

  <input type="text" id="master_remind_tb" style="display: none;" value="1"/>
  <input type="text" id="master_remind_attach" style="display: none;" value="" runat="server"/>

  保存按钮<asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" />

 

   第二步,改变页面控件值时改变隐藏按钮值   

    <script language="javascript">

   function changeRemindValue()
            {
                var txtList = document.getElementsByTagName("input");// 返回表内嵌的所有 text 控件
                for(var j = 0; j < txtList.length; j++)
                {
                    if(txtList[j].id.indexOf("master_remind_attach") > -1) 
                    { 
                        txtList[j].value="1";
                    }
                }
            }

</script>

   第三步,为不触发验证的按钮添加如下onclientclick事件

    <script language="javascript">

   function returnRemindValue()
            {
                var txt= document.getElementById("master_remind_tb");
                txt.value="";
            }

    </script>

   第四步,在onunload里设置验证,并根据选中对话框的值执行操作

<script event="onunload" for="window">
    var txt= document.getElementById("master_remind_tb");//判断是否需要提示   
    if(txt.value!="")
    {
        var txtList = document.getElementsByTagName("input");// 返回表内嵌的所有 text 控件
        for(var j = 0; j < txtList.length; j++)
        {
            if(txtList[j].id.indexOf("master_remind_attach") > -1) 
            { 
                if(txtList[j].value!="")
                { 
                    if (window.confirm("你已经修改了页面内容，是否保存修改？"))
                    {
                        for(var i = 0; i < txtList.length; i++)
                        {
                            if(txtList[i].id.indexOf("btnSave") > -1)
                            {
                            txtList[i].click();                           
                            }
                        }       
                    }                               
                }
            }
        }
    }
    </script>

    OK了,后来又发现一个问题,页面上还存在除保存以外的其他按钮,他们的type同样是submit,他们有的是应该引起验证的,有的不用验证,你如果按 上面的方法做,会发现需要验证的按钮,弹出提示保存对话框后,点击是的时候他会执行自己的onclick事件,这是我们不想要的,我的解决方法是:把这些 按钮设成不需要验证,而换成在他的onclientclick事件里头验证,即onclientclick时先执行第三步,然后再执行以下部分:

function Check()
    {  
    returnRemindValue();
          
    var flag=true;
    var txtList = document.getElementsByTagName("input");// 返回表内嵌的所有 text 控件
    for(var j = 0; j < txtList.length; j++)
    {
    if(txtList[j].id.indexOf("master_remind_attach") > -1) 
    { 
    if(txtList[j].value!="")
    {    
    if(window.confirm("你已经修改了页面内容，是否保存修改？"))
    {
    for(var i = 0; i < txtList.length; i++)
    {
    if(txtList[i].id.indexOf("btnSave") > -1)
    {
    txtList[i].click();
    break;
    }
    }   
    flag=false;
    }  
    }
    break;
    }
    }
    return flag;   
    }

合起来便是:<asp:Button ID="btnNext" runat="server" Text="下一步" onclientclick="returnRemindValue()
;return Check() ;" OnClick="btnNext_Click" />

   大功告成,希望能给朋友们一点帮助,也希望各位不吝赐教!

文章来源：http://blog.csdn.net/jhk_lubao/article/details/2049488