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: 391

Filed under:
|

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

Related posts about AJAX

Related posts about .NET Tips and Tricks