How to do a cool flash notification message in asp.net mvc 3 in 6 easy steps - Digital Tool Factory blog How to do a cool flash notification message in asp.net mvc 3 in 6 easy steps - Digital Tool Factory blog

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)
{

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

Tags:

 

Written By Steve French

 

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

  1. 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

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

  3. 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

    }

Leave a Reply

Your email address will not be published. Required fields are marked *






Copyright 2011 Digital Tool Factory. All Rights Reserved. Powered by raw technical talent. And in this case, WordPress.