Use Toastr messages from codebehind

HenriM 16:52 , , , , , 1 comment
I have been using the excellent toastr library for my clientside messages now for a while.

Today I needed to send a message from codebehind to the client and I wanted to keep using toastr.

As I prefer to solve things only once I wanted this to be reusable through my app.
Something like:

var msg= new Message(Level.Error,"This is the text", "This is the title"));
viewmodel.Messages.Add(msg);

and then have this show up the nice toastr way:





(See demo over at GitHub for all the options.)


So to have a reusable way to send messages to my users with Toastr I came up with this model:


First I define a model for messages
public class Message
{
public Message(string text, Levels level)
{
Text = text;
Level = level;
}
public Message(string text, Levels level, string title, bool closebutton, int timeout)
{
Text = text;
Level = level;
Title = title;
Closebutton = closebutton;
Timeout = timeout;
}
public string MsgType { get { return Level.ToString(); } }
public Levels Level { get; set; }
public string Text { get; set; }
public string Title { get; set; }
public bool Closebutton { get; set; }
public int Timeout { get; set; }
public enum Levels
{
Info,
Warning,
Success,
Error
}
public static Message Info(string msg)
{
return new Message(msg, Levels.Info);
}
public static Message Warning(string msg)
{
return new Message(msg, Levels.Warning);
}
public static Message Success(string msg)
{
return new Message(msg, Levels.Success);
}
public static Message Error(string msg)
{
return new Message(msg, Levels.Error);
}
public static Message Error(string msg, string title, bool close=true, int timeout = 0)
{
return new Message(msg, Levels.Error, title, close, timeout);
}
}
view raw Message.cs hosted with ❤ by GitHub


Next I create a ViewModel class and inherit from it:
public class ViewModel
{
private readonly List<Message> _messages;
public ViewModel()
{
_messages = new List<Message>();
}
public IEnumerable<Message> Messages { get { return _messages.ToArray(); } }
public void AddMessage(Message msg)
{
_messages.Add(msg);
}
}
public class ContractView : ViewModel
{
private readonly Contract _contract;
public ContractView(Contract contract)
{
_contract = contract;
}
public Contract Contract
{
get { return _contract; }
}
}
view raw ViewModel.cs hosted with ❤ by GitHub



In the controller I can now easily add messages:

public class ContractController : Controller
{
//more actions..
public ViewResult Details(int id)
{
var contract = _contractService.Find(id);
var vm = new ContractView(contract);
if (contract.ContractTemplate == null)
{
vm.AddMessage(Message.Error("This is the text", "This is the title"));
}
return View(vm);
}
}
view raw Controller.cs hosted with ❤ by GitHub



Add finally make them pop up in the view:
function ProcessMessagesFromVM() {
var array = @Html.Raw(Json.Encode(
Model.Messages));
$.each(array, function(idx, n) {
if (n.MsgType === "Error") {
toastr.error(n.Text, n.Title, { "closeButton": n.Closebutton, "timeOut": n.Timeout });
} else if (n.MsgType === "Success") {
toastr.success(n.Text, n.Title, { "closeButton": n.Closebutton, "timeOut": n.Timeout });
} else if (n.MsgType === "Warning") {
toastr.warning(n.Text, n.Title, { "closeButton": n.Closebutton, "timeOut": n.Timeout });
} else if (n.MsgType === "Info") {
toastr.info(n.Text, n.Title, { "closeButton": n.Closebutton, "timeOut": n.Timeout });
}
});
}
$(document).ready(function() {
ProcessMessagesFromVM();
});
view raw ProcessMessages.js hosted with ❤ by GitHub






I can now add multiple messages with different levels, all from codebehind:



public class ContractController : Controller
{
//more actions..
public ViewResult Details(int id)
{
var contract = _contractService.Find(id);
var vm = new ContractView(contract);
if (contract.ContractTemplate == null)
{
vm.AddMessage(Message.Error("This is the text", "This is the title"));
vm.AddMessage(Message.Warning("Warning text"));
vm.AddMessage(Message.Info("Info text"));
vm.AddMessage(Message.Success("This is a success!"));
//Or configure message manually
var msg = new Message();
msg.Title = "Full title";
msg.Text = "The text";
msg.Closebutton = false;
msg.Timeout = 15;
vm.AddMessage(msg);
}
return View(vm);
}
}
view raw ContractController2.cs hosted with ❤ by GitHub

1 comment :

  1. SeoserviceOctober 10, 2021 at 1:48 PM

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. recover deleted iMessages

    ReplyDelete

Subscribe to: Post Comments ( Atom )

Contact Form

Name

Email *

Message *