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) { 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>
span.fullpost {display:none;}
