Focus on Microsoft Technologies - Tutorials, Articles, Code Samples.

Tuesday, June 29, 2010

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

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) {
                  return true;
              else {
                  var e = window.event;
                  e.cancelBubble = true;
                  if (e.stopPropagation) e.stopPropagation();
                  return false;
              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;
          window.onbeforeunload = doBeforeUnload;


Step 3:

Here is how the tabcontrol should look like

<asp:UpdatePanel ID="upTab" runat="server" UpdateMode="conditional">
                        <ajaxtoolkit:TabContainer ID="tcBaseline" runat="server" Height="400px" OnClientActiveTabChanged="ActiveTabChanged">
                            <ajaxtoolkit:TabPanel ID="tpPersonalInformation" runat="server">
                                    <asp:Label ID="lblPITab" runat="server" Text="<%$ Resources:Resources, Baseline_Tab_PersonalInformation %>"
                                    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

Post a Comment

Unknown said...

displays an error as "The resource object with key 'Baseline_Tab_PersonalInformation' was not found". Can u please help me out with this issue