How can I prevent the browser back button from reshowing my user notification?

Question

I've built a notification system for an ASP.NET MVC3 site I've been working on that lets the user know that various actions they performed happened successfully (a "pat on the back" message). The solution works pretty well, but I have one issue that I would love to solve, but I can't seem to wrap my head around how to do so.

In a controller, I have the following example action methods:

<HttpGet()>
Public Function Edit(id As Guid) As ActionResult
    Return View(GetMyViewModel(id))
End Function

<HttpPost()>
Public Function Edit(...) As ActionResult
    ' Save updated ... information

    Me.TempData("UserMessage") = "Data Saved! You are truly an awesome user!"

    ' PRG back to Edit
    Return RedirectToAction("Edit")
End Function

Then in my view (razor layout) I have code that looks for the existence of the "UserMessage" key in the TempData collection, and if it exists I build out some JavaScript to present a growl-like notification for the user:

/* This only exists when we have something to show */
$(function () {
    showNotification([the message from TempData]); 
});

The growl-like message then either goes away over time or the user can click on the message to dismiss it.

So far so good, everything is working as expected. User POSTs to Edit, they are RPGed back to Edit, the growl-like "Data Saved! You are truly an awesome user!" message is shown and dismissed.

If the user then navigates to another page and then hits the browser's back button, the browser then digs into its cache, resulting in the browser executing the same javascript, showing the user the same "Data Saved! You are truly an awesome user!" message again. This confuses the heck out of the user thinking that, by clicking the back button, they just did something that caused yet another save (or whatever the message was).

I'm looking for a way, that once the notification is shown once, I can somehow prevent the notification from ever showing back up -- basically making it a "one time shot" message. Things I have thought about are:

• including a Guid with every message, and using localStorage to store a list of shown message ids, and only if the message being requested doesn't already exist in the list of shown messages, show it.
  • I've thought of using a Cookie in the same way, but cringed at the idea that the cookie is needlessly blasted back to the server for future requests, plus the content of the cookie would need to be carefully considered and probably per-message anyhow.
• Instead of returning a message from the action method, return a Guid instead that points to a message in a database. Then on page load, AJAX back to the server to get that message. Once a message is got, it is deleted from the database, subsequent requests for that same message are handled by returning no message.
• include a Guid with every message, and before showing the message, AJAX back to the server to see if the message has already been shown. Once the message is shown, AJAX back to the server to log that the message has been shown.

These all seem pretty untenable to me, but I could be convinced otherwise if someone wants to argue support for one of these.

Things I have tried:

• After the message is dismissed removing all traces of the DOM element.
• When the message is shown, set a jQuery .data() property on the message's DOM element to indicate that the message was shown, then before showing the message, make sure the .data() field doesn't exist.

These don't work because the browser caches pages at a point in time where both of these DOM changes happen afterwards.

Basically, I need a mechanism that my javascript can check to see if it really needs to show this given message, and if it does, show it, but then mark the message as shown so that if it is requested to be shown again, it doesn't. Any suggestions?

Answer 1

You also may take advantage of the fact that browsers remember on form-values, simple example:

<input id="notification" style="display:none" value="Data Saved!">
<script  type="text/javascript">
$(function () {
    if($('#notification').val())
    {
      alert($('#notification').val());
      $('#notification').val('');
    }
});
</script>