How to do a cool flash notification message in asp.net mvc 3 in 6 easy steps

I pieced all of this together from various sources online, so the code is a bit rough, but here it is:

1.  Create a partial razor view, call it _NotifyBar.cshtml, it contains this:

@if (Request.Cookies["NotifyBar"]!=null)
{

@Request.Cookies["NotifyBar"].Value.ToString() X

var c = new HttpCookie(“NotifyBar”);
c.Expires = DateTime.Now.AddDays( -1 );
Response.Cookies.Add( c );

}

2.  Put this in the header of your _Layout.cshtml file
//here is the jbar stuff

<script type=”text/javascript”>//

$(document).ready(function () {

$(“#message”).fadeIn(2000);

$(“#message”).delay(5000).fadeOut(1000);

$(“#message a.close-notify”).click(function () {

$(“#message”).fadeOut(“slow”);

return false;

});

});

</script>

3.  Right after the body of your _Layout.cshtml page there is this code

@Html.Partial(“_NotifyBar”)

4. Create a file called ExtensionMethods.cs, add in this code

public static ActionResult SetStatusMessage(this ActionResult ar, string str)
{
var c = new HttpCookie(“NotifyBar”);
//c.Expires = DateTime.Now.AddDays(-1);
c.Value = str;
HttpContext.Current.Response.Cookies.Add(c);
return ar;
}

5. Put this in your stylesheet

#message {
font-family:Arial,Helvetica,sans-serif;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:bold;
font-size:100%;
color:white;
padding:10px 0px 10px 0px;
background-color:#8E1609;
}

#message span {
text-align: center;
width: 95%;
float:left;
}

.close-notify {
white-space: nowrap;
float:right;
margin-right:10px;
color:#fff;
text-decoration:none;
border:2px #fff solid;
padding-left:3px;
padding-right:3px
}

.close-notify a {
color: #fff;
}

6. Then in your controller, just return add “SetStatusMessage” on your RedirectToAction, for example

return RedirectToAction(“Index”).SetStatusMessage(“You have successfully edited the ” + project.ProjectName + ” project.”);

That’s it!  You can now have a fade-out notification message on any page you like.  The use of the cookies is a bit cumbersome, but I could implemnt it quickly.

This post originally appeared on the Stronico blog – with the absorption of Stronico into Digital Tool Factory this post has been moved to the Digital Tool Factory blog

This entry was posted on Tuesday, May 24th, 2011 at 7:04 pmand is filed under ASP.net, ASP.net MVC, Code Samples, Microsoft . You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

4 Responses to “How to do a cool flash notification message in asp.net mvc 3 in 6 easy steps”

1. Richard says:

   June 3, 2011 at 8:56 am

   I like this solution but I think it would be better if it could print the message stored in the Cookie.

   Do you know how to do this?

   Im new to web programming (JQuery, C#, MVC…etc) so dont worry about going overboard with an explanation on how to do it.

   Thanks

   Reply
2. Rake0 says:

   July 10, 2011 at 9:40 pm

   This will never work, have you tested it? Where does it actually grab the contents from your cookie and display it?

   Reply
3. German Rodriguez says:

   January 16, 2012 at 3:08 pm

   partial view is incomplete, should be

   @if (Request.Cookies["NotifyBar"]!=null)
   {
   var c = new HttpCookie(“NotifyBar”);
   c.Expires = DateTime.Now.AddDays( -1 );
   Response.Cookies.Add( c );

   @Request.Cookies["NotifyBar"].Value

   }

   Reply
4. Martha O. Monroe says:

   February 24, 2012 at 7:05 am

   Thank you very much for the nice post.

   Reply

Leave a Reply

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

Latest Tweets & Social