How do I show error messages back to an ASP.NET MVC page?

Question

Hi folks,

Notice how StackOverflow displays some nice Status Bar message based on your activity? (That orange bar at the top page) I'm hoping to do the same but I'm not sure how.

Now I know how to display validation errors to the UI using ASP.NET MVC 1.0 ... that's not too hard. But if i want to show a status bar thingy (not sure what they are called) and i'm guessing they are done with jQuery ... how do you do that.

Even more, I also wish to do it after I call another action

eg.

public ActionResult AuthoriseWithTwitter(string nickname)
{
   // Authorise, etc. etc.
   ....

   // If we have a Twitter OAuth Access token 
   // (ie. we've come BACK from twitter OK)
   // then go back to the Index action, but display a status bar 
   // message saying 'done / thanks / got it / etc..'
   return RedirectToAction("Index", new[] { nickname });
}

I'm not sure how i pass the message back to that action AND how to display that message with one of those status bar things.

cheers!

Answer 1

Several ways:

1. Put it to TempData["statusmsg"] and pick it from there in your action or View. Drawbacks: if user did not click on it and reload page, it is not displayed again.
2. Put it to Session. You will only delete it from session when user click on the status link.

You can access TempData/Session directly, or you can have BaseController with StatusMsg property and related stuff, or you can have BaseViewModel (base class for all your actions' view models) contain this StatusMsg property.

As for status bar jQuery, you can easily pick one from google, for example http://www.west-wind.com/WebLog/posts/388213.aspx, http://plugins.jquery.com/project/positionFooter. However if you want to position it on top, it's much easier, just couple of CSS/jQuery lines: position absolute at 0:0, width 100%, maybe set opacity, then when you get msg just do

<script>
  <% if (Model.StatusMsg != null) %>
    $(function(){ $("#statusbar").fadeIn(); });
  <% } %>
</script>

OK here's more. You have div with id="msg" and

  #msg {
    text-align: center;
    position: absolute;
    line-height: 2em;
    left: 0px;
    top: 0px;
    width: 100%;
    display: none;
    opacity: 0.7;
    background-color: #aaf;
    border-bottom: 1px solid black;
  }

You can fix element on top so that it doesn't scroll with page using http://plugins.jquery.com/project/jQueryFixedPositionPlugin.

Now, whenever you have status message you do Session["status"] = "mymessage". Alternatively, you override BaseController.OnActionExecuted and put message into Session there (if it's app-wide).

Then in your view you do

<script type="text/javascript">
   function showstatus(text) {
     $("#msg").fadeIn().append("<div>" + text + "</div>");
   }
   $(function(){
      <% if (Session["status"] != null) { %>
         var status = '<%= Session["status"] %>'; 
         showstatus(status);
      <% ; Session.Remove("status"); } %>
   });
</script>

You can avoid Session.Remove("status") by doing this in the base OnActionExecuting:

{
  if (Session["status"] != null)
  {
     ViewData["status"] = Session["status"];
     Session.Remove("status");
  }
}

and then reference ViewData instead of Session in the view.

Now, of course there can be more thing to do, and the code above is out of my head, untested... but if this is not enough to do the thing in 5 minutes then you can only hope someone will take time to provide complete working tested solution... and will not charge money for this ;-)