Using Alertify to show messages

Question

I use a JavaScript library called Alertify to show simple, pretty messages, like "note created", or whatever. Often I want to send the user to a new page and then show an Alertify message.

I'm trying to find a way to do this on the fly, without tons of configuration.

Currently I do this by creating an AlertifyMessages object:

public class AlertifyMessages
{
    public string LogMessage { get; set; }
    public string LogCallback { get; set; }

    public string SuccessMessage { get; set; }
    public string SuccessCallback { get; set; }

    public string ErrorMessage { get; set; }
    public string ErrorCallback { get; set; }

    public AlertifyMessages() { }

    public AlertifyMessages(string logMessage = null, string logCallback = null,
                            string successMessage = null, string successCallback = null,
                            string errorMessage = null, string errorCallback = null)
    {
        LogMessage = logMessage;
        LogCallback = logCallback;
        SuccessMessage = successMessage;
        SuccessCallback = successCallback;
        ErrorMessage = errorMessage;
        ErrorCallback = errorCallback;
    }
}

and passing it to an action method:

public ActionResult Test()
{
    // RedirectToAction([action], [controller], [routeValues])
    return RedirectToAction("Details", "Notes",  
        new AlertifyMessages(logMessage: "Lorem ipsum"));
}

and in the destination action method:

public class NotesController : Controller
{
    // GET
    public ActionResult Details(AlertifyMessages alertify)
    {
        return View(new NoteDetailsViewModel(alertify));
    }
}

which, finally, displays the messages in the view:

@if (Model.Alertify.LogMessage != null)
{
    @:@Html.Alertify("log", Model.Alertify.LogMessage, Model.Alertify.LogCallback)
}
@if (Model.Alertify.SuccessMessage != null)
{
    @:@Html.Alertify("success", Model.Alertify.SuccessMessage, Model.Alertify.SuccessCallback)
}
@if (Model.Alertify.ErrorMessage != null)
{
    @:@Html.Alertify("error", Model.Alertify.ErrorMessage, Model.Alertify.ErrorCallback)
}

The helper method Alertify just adds the JavaScript to call alertify.js, but you can see it here

---

Besides being a nightmare in so many ways, this doesn't even work unless the AlertifyMessage is all I need to pass. I could make some kind of complicated ToString() override to resolve this, but otherwise attempting to pass, say, an ID as well as an AlertifyMessages like so

return RedirectToAction("Details", "Notes",  
    new { id = 1, alertify = new AlertifyMessages(logMessage: "Lorem ipsum")});

yields a URL like

https://localhost/Notes/Details/1?alertify=Project.Namespace.AlertifyMessages

---

This is way too complicated. There must be a better way.

Edit: I'd like a way to specify the message in the calling action method (the one performing the redirect), and nowhere else. Is there a way to do this other than adding code to every single method and view?

Answer 1

You may start making your model simpler:

public sealed class AlertifyMessageModel
{
    public string Message { get; set; }
    public string Callback { get; set; }
}

Note that you do not need all those ugly ctor parameters:

public ActionResult Test()
{
    return RedirectToAction("Details", "Notes",  
        new AlertifyMessageModel { Message = "Lorem ipsum" });
}

You may also want to use nameof(Notes.Details) instead of hard-coded "Details" string. Usually I also have an helper method GetControllerName(nameof(NotesController)) or a static field NotesController.Name but it's verbose and not everyone likes it.

Now let's go to your View. We need to add a property to the model to hold the type of notification:

public sealed class AlertifyMessageModel
{
    public string Message { get; set; }
    public string Callback { get; set; }
    public string Type { get; set; } = "log"
}

Then we can simply write:

if (Model.Alertify.Message != null)
{
    @:@Html.Alertify(Model.Alertify.Type, Model.Alertify.Message, Model.Alertify.Callback)
}

Next step is to change Type to enum:

public NotificationType Type { get; set; } = NotificationType.Log;

---

For your URL problem you should change something more, you may serialize the whole object as JSON and post it in the request body instead of in the URL. I don't see code around that then I can't really suggest a nice method. Note that you may also override ToString() to return a parseable representation of AlertifyMessageModel (think about type converters).

Answer 2

One option is to use TempData, which is like ViewBag but not a part of the URL, and therefore only lasts for one request. A collection of AlertifyMessages can be added to a base controller class inherited by all other controllers. Then you can use action filters to transfer that property from the base class to TempData, and from TempData to the controller in the case of a redirect.

You end up with something like this:

public class AlertifyMessages
{
    public List<AlertifyMessage> Messages { get; private set; } = new List<AlertifyMessage>();
    public void Add(AlertifyType type, string message, string callbackUrl = null)
    {
        Messages.Add(new AlertifyMessage(type, message, callbackUrl));
    }
}

public class AlertifyMessage
{
    public AlertifyType Type { get; set; }
    public string Message { get; set; }
    public string CallbackUrl { get; set; }
    public AlertifyMessage(AlertifyType type, string message, string callbackUrl)
    {
        Type = type;
        Message = message;
        CallbackUrl = callbackUrl;
    }
}

public enum AlertifyType
{
    Log,
    Error,
    Success
}

public class AlertifyAttribute : ActionFilterAttribute
{
    private const string alertify = "Alertify";
    public override void OnResultExecuting(ResultExecutingContext context)
    {
        BaseController bc = (BaseController)context.Controller;
        bc.TempData[alertify] = bc.AlertifyMessages;
    }
    public override void OnActionExecuting(ActionExecutingContext context)
    {
        BaseController bc = (BaseController)context.Controller;
        bc.Messages = (bc.TempData[alertify] == null) ? new AlertifyMessages() : (AlertifyMessages)bc.TempData[alertify];
        // Faster? Better? Harder? Stronger?
        //bc.Messages = (AlertifyMessages)bc.TempData[alertify] ?? new AlertifyMessages();
    }
}

[Alertify]
public class BaseController : Controller
{
    public BaseController()
    {
        AlertifyMessages = new AlertifyMessages();
    }

    public AlertifyMessages AlertifyMessages { get; set; }
}

Usage:

public class MyController : BaseController
{
    public ActionResult Index()
    {
        AlertifyMessages.Add(AlertifyType.Success, "Yay!", Url.Action("Index"));
        return View(/*new ViewModel()*/);
    }
}
// Then loop through and display messages in view using TempData

More information about the redirect problem can be found here.