I was building a small internal application for my company as a pilot application that tests the Business Object framework we had just built. This web application could well serve as a useful too.
And now I wanted to try out a simple dirty state page – a page that tracks any changes made to it and notifies accordingly to the user. With AJAX extensions, I know it was possible, there are options to extend and create your own control - like a DirtyStateUpdatePanel or something. Anyways, I just wanted to try a basic version - so here is the simple version that I came up with. Consider this as a work done for a proof of concept.
DISPLAY
We need something to notify that the page has become dirty – even a div tag should be suffice
<div id="DirtyStateNotifyDivCtl" class="dirtyPanel" runat="server">div>
CONTROLS AND EVENTS
We need to notify if any of the bound controls have changed – we should be fine with each control’s changed event. Additionally we need them all to perform one common function – notify a dirty state change. So we can have our own event declared
Public Event DirtyStateChangedEvent(ByVal getDirtyStateMethod As IDirtyPage.GetDirtyState) Implements IDirtyPage.DirtyStateChangedEvent
And its handler:
Protected Sub ValueChanged(ByVal getDirtySateMethod As IDirtyPage.GetDirtyState) Handles Me.DirtyStateChangedEvent
With Me.DirtyStateNotifyDivCtl
If getDirtySateMethod.Invoke() Then
.InnerText = "*Unsaved Changes"
Else
.InnerText = " "
End If
End With
End Sub
And a cheeky way to expose the raise event from Master Page:
Public Sub RaiseDirtyStateEvent(ByVal getDirtyStateMethod As IDirtyPage.GetDirtyState)
RaiseEvent DirtyStateChangedEvent(getDirtyStateMethod)
End Sub
POSTBACK
We need to get all our controls wrapped into an UpdatePanel to “Ajaxify” things.
DETERMINE IF DIRTY
We can wire up the page controls to one common event handler (you can have as many event handlers). And pass in a delegate of a GetDirtyState method and let the Master page take care of the display of the Unsaved change text – or clear the unsaved change text.
Protected Sub Page_DirtyStateChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles EndDateTxtCtl.TextChanged, StartDateTxtCtl.TextChanged
Me.MasterPage.RaiseDirtyStateEvent(AddressOf Me.GetDirtyState)
End Sub
Public Function GetDirtyState() As Boolean
' TODOK: loop through your controls and find out if the page has become dirty by any chance
If Me.EndDateTxtCtl.Text <> Me.TeamProject.EndDate Then
Return True
Else
Return False
End If
End Function
And the icing on the cake would be the following:
<script language="javascript" type="text/javascript">
window.onbeforeunload = confirmIfDirty;
function confirmIfDirty(){
if(document.getElementById('ctl00_DirtyStateUpdatePanelCtl').innerText > "") {
event.returnValue = "There are some unsaved changes. Navigating away from this page would cause such data to be lost.";
}
}
script>
The slick onbeforeunload event pops up every time the user tries to navigate away from the page leaving it dirty.
You can find the sample files here.
