ASP.NET MVC Flash Messages (Razor)

_Flash.cshtml

<div id="flash-messages" class="alert-message" style="display:none;">    
    <a class="close" href="#">&times;</a>
    <p></p>
</div>

<script type="text/javascript">
    $(function () {
        $("#flash-messages").flashMessage();
    });
</script>

_Layout.cshtml

@Html.Partial("_Flash")

ExampleController.cs

// Usage within MVC Controller
[HttpPost]
public ActionResult Create()
{
  return RedirectToAction("Index").Success("Message shown to user after redirect");
}

FlashMessageExtensions.cs

internal static class FlashMessageExtensions
{
    public static ActionResult Error(this ActionResult result, string message)
    {
        CreateCookieWithFlashMessage(Notification.Error, message);
        return result;
    }

    public static ActionResult Warning(this ActionResult result, string message)
    {
        CreateCookieWithFlashMessage(Notification.Warning, message);
        return result;
    }

    public static ActionResult Success(this ActionResult result, string message)
    {
        CreateCookieWithFlashMessage(Notification.Success, message);
        return result;
    }

    public static ActionResult Information(this ActionResult result, string message)
    {
        CreateCookieWithFlashMessage(Notification.Info, message);
        return result;
    }

    private static void CreateCookieWithFlashMessage(Notification notification, string message)
    {
        HttpContext.Current.Response.Cookies.Add(new HttpCookie(string.Format("Flash.{0}", notification), message) { Path = "/" });
    }

    private enum Notification
    {
        Error,
        Warning,
        Success,
        Info
    }
}

jquery.cookie.js

/*jslint browser: true */ /*global jQuery: true */

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

// TODO JsDoc

/**
 * Create a cookie with the given key and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String key The key of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given key.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String key The key of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function (key, value, options) {
    
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
        
        value = String(value);
        
        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

jQuery.flashMessage.js

$.fn.flashMessage = function (options) {
    var target = this;
    options = $.extend({}, options, { timeout: 3000, alert: 'info' });

    if (!options.message) {
        setFlashMessageFromCookie(options);
    }

    if (options.message) {
        $(target).addClass(options.alert.toString().toLowerCase());

        if (typeof options.message === "string") {
            $('p', target).html("<span>" + options.message + "</span>");
        } else {
            target.empty().append(options.message);
        }
    } else {
        return;
    }

    if (target.children().length === 0) return;

    target.fadeIn().one("click", function () {
        $(this).fadeOut();
    });

    if (options.timeout > 0) {
        setTimeout(function () { target.fadeOut(); }, options.timeout);
    }

    return this;

    // Get the first alert message read from the cookie
    function setFlashMessageFromCookie() {
        $.each(new Array('Success', 'Error', 'Warning', 'Info'), function (i, alert) {
            var cookie = $.cookie("Flash." + alert);

            if (cookie) {
                options.message = cookie;
                options.alert = alert;

                deleteFlashMessageCookie(alert);
                return;
            }
        });
    }

    // Delete the named flash cookie
    function deleteFlashMessageCookie(alert) {
        $.cookie("Flash." + alert, null, { path: '/' });
    }
};

To avoid encoding issues for German Umlauts change the method CreateCookieWithFlashMessage in FlashMessageExtensions to

private static void CreateCookieWithFlashMessage(Notification notification, string message)
{
HttpContext.Current.Response.Cookies.Add(new HttpCookie(string.Format("Flash.{0}", notification), HttpUtility.UrlEncode(message)) { Path = "/" });
}

Additionally, it seems that in the current state all options given to the method are overwritten with the defaults. Changing

    options = $.extend({}, options, { timeout: 3000, alert: 'info' });

into

    options = $.extend({ timeout: 3000, alert: 'info' }, options);

should preserve user-defined arguments.

The "jQuery.flashMessage.js" javascript no longer works properly if you use latest version (v1.4.0) of jquery.cookie.js! Hopefully someone who knows javascript will post an update :) By the way, great utility I found it very helpful.

I like everything that you've done here but I'm getting an error and I can't seem to figure it out.

'System.Web.Mvc.RedirectToRouteResult' does not contain a definition for 'Success' and no extension method 'Success' accepting a first argument of type 'System.Web.Mvc.RedirectToRouteResult' could be found (are you missing a using directive or an assembly reference?)

I created a folder called, Extensions and I put the FlashMessageExtensions.cs file in there. In my controller I have a reference to "MyProject.Extensions".

Any help would be appreciated.

jimkiely@yahoo.com

I updated this for jQuery Cookie Plugin v1.4.0 and Bootstrap 3.0.3 here:

https://gist.github.com/thomkaufmann/a1d301789fc3066ebdd5

Please let me know if there are any remaining issues!

Made some change to show multiple message like below.

return RedirectToAction("DashBoard", "agent").Danger("Danger message.").Success("this is a success").Warning("it's a warning");

https://gist.github.com/13orno/d44d0117f17bcd9d0cb7

whould you please add references.
'System.Web.Mvc.RedirectToRouteResult' does not contain a definition for 'Success' and no extension method 'Success' accepting a first argument of type 'System.Web.Mvc.RedirectToRouteResult' could be found (are you missing a using directive or an assembly reference?
i can't remove this problem

MohammadSabbir: you have to have using with extension namespace in your controller.

For example, if your FlashMessageExtensions.cs is in namespace Something.Extensions, you have to add using Something.Extensions; in your controller.

The "jQuery.flashMessage.js" javascript no longer works properly if you use latest version (v3.1.1) of jquery! Hopefully someone who knows javascript will post an update :) By the way, great utility I found it very helpful.

I'm using one of the fixes done to the original code (by thomkaufmann) and wanted to know the license terms if the code snippet can be used in other projects.

Thanks