How to check if the tab page is dirty and prompt the user to save before navigating away using ajaxtoolkit tab control in ASP.NET
        Posted  
        
        on Microsoft .NET Support Team
        
        See other posts from Microsoft .NET Support Team
        
        
        
        Published on Tue, 29 Jun 2010 13:58:00 +0000
        Indexed on 
            2011/01/11
            9:57 UTC
        
        
        Read the original article
        Hit count: 467
        
AJAX
|.NET Tips and Tricks
Step 1: Put a hidden variable in Update panel
<asp:HiddenField ID="hfIsDirty" runat="server" Value="0" />
Step 2: Put the following code in ajaxcontrol tool kit tabcontainer OnClientActiveTabChanged="ActiveTabChanged"
Copy the following script in the aspx page.
<script type="text/javascript">
      //Trigger Server side post back for the Tab container      
      function ActiveTabChanged(sender, e) {       
          __doPostBack('<%= tcBaseline.ClientID %>', '');       
      } 
      //Sets the dirty flag if the page is dirty      
      function setDirty() {       
          var hf = document.getElementById("<%=hfIsDirty.ClientID%>");       
          if (hf != null)       
              hf.value = 1;       
      } 
      //Resets the dirty flag after save      
      function clearDirty() {       
          var hf = document.getElementById("<%=hfIsDirty.ClientID%>");       
          hf.value = 0;       
      } 
function showMessage() { return "page is dirty" }
      function setControlChange() {      
          if (typeof (event.srcElement) != 'undefined')       
          { event.srcElement.onchange = setDirty; }       
      } 
      function checkDirty() {      
          var tc = document.getElementById("<%=tcBaseline.ClientID%>");       
          var hf = document.getElementById("<%=hfIsDirty.ClientID%>");       
          if (hf.value == "1") {       
              var conf = confirm("Do you want o loose unsaved changes? Please Cancel to stay on page or OK to continue ");       
              if (conf) {       
                  clearDirty();       
                  return true;       
              }       
              else {       
                  var e = window.event;       
                  e.cancelBubble = true;       
                  if (e.stopPropagation) e.stopPropagation();       
                  return false;       
              }       
          }       
          else       
              return true;       
      } 
      document.body.onclick = setControlChange;      
      document.body.onkeyup = setControlChange; 
var onBeforeUnloadFired = false;
      // Function to reset the above flag.      
      function resetOnBeforeUnloadFired() {       
          onBeforeUnloadFired = false;       
      } 
function doBeforeUnload() {
var hf = document.getElementById("<%=hfIsDirty.ClientID%>");
          // If this function has not been run before...      
          if (!onBeforeUnloadFired) { 
              // Prevent this function from being run twice in succession.      
              onBeforeUnloadFired = true; 
              // If the form is dirty...      
              if (hf.value == "1") { 
                  event.returnValue = "If you continue you will lose any changes that you have made to this record.";      
              }       
          }       
          window.setTimeout("resetOnBeforeUnloadFired()", 1000);       
      } 
      if (window.body) {      
          window.body.onbeforeunload = doBeforeUnload;       
      }       
      else       
          window.onbeforeunload = doBeforeUnload; 
</script>
Step 3:
Here is how the tabcontrol should look like
<asp:UpdatePanel ID="upTab" runat="server" UpdateMode="conditional">      
                    <ContentTemplate>       
                        <ajaxtoolkit:TabContainer ID="tcBaseline" runat="server" Height="400px" OnClientActiveTabChanged="ActiveTabChanged">       
                            <ajaxtoolkit:TabPanel ID="tpPersonalInformation" runat="server">       
                                <HeaderTemplate>       
                                    <asp:Label ID="lblPITab" runat="server" Text="<%$ Resources:Resources, Baseline_Tab_PersonalInformation %>"       
                                        onclick="checkDirty();"></asp:Label>       
                                </HeaderTemplate>       
                                <ContentTemplate>       
                                    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>       
</ContentTemplate>       
                            </ajaxtoolkit:TabPanel>
© Microsoft .NET Support Team or respective owner