Toast notifications in ASP.NET MVC

Question

I'm using the Toastr notification plugin in my MVC application to display status messages (successful edit, update, delete, etc), and I'm wondering if there is an easy way to put some logic in a Partial view and have it on my Layout or in each individual view where needed.

Partial

<script type="text/javascript">
    $(document).ready(function () {
        @if (ViewBag.Success == true) { 
            @:toastr.success("@ViewBag.Message");
        } else if (ViewBag.Success == false) {
            @:toastr.error("@ViewBag.Message");      
        }
    });
</script>

View

//Doesn't work
@Html.Partial("_ToastPartial")

//Tried this directly in the view instead of using the partial, didn't work
@if (ViewBag.Success == true) { 
    @:toastr.success("@ViewBag.Message");
} else if (ViewBag.Success == false) {
    @:toastr.error("@ViewBag.Message");  
}

Controller

    public ActionResult SomethingAwesome(MyViewModel model)
    {
        ViewBag.Success = true;
        ViewBag.Message = "Employee successfully added";

        return RedirectToAction("Index");
    }

This doesn't work. Is it possible to wrap something like this in a partial or does MVC strip out the <script> tags? Can I render the partial within a script block on the View?

I even tried to move the code within the script tags directly to the View and then setting the values on the Controller and it seems like nothing is happening.

Any help? Is the ViewBag cleared by the time the view is rendered again? Should I use TempData? Can I move a Success and Message property into my ViewModel and just pass that into my View like this?

public ActionResult Index(MyViewModel model) 
{
    //Do something with model.Success 
}

My Solution

I used a couple of answers to come to a final conclusion for this section of my site, and will most likely use the method for the accepted answer in other parts.

I went and added the following to my ViewModel

public bool Success { get; set; } 
public string Message { get; set; } 

I have the Action return the Index view with the ViewModel, after properties have all been set

//fetch the updated data and shove into ViewModel here
viewModel.Success = true;
viewModel.Message = "Employee successfully checked in";

return View("Index", viewModel);

And then just use the Razor syntax in my View

@if (Model.Success) { 
    @:toastr.success("@Model.Message");
} else if (!Model.Success && !String.IsNullOrWhiteSpace(Model.Message)) {
    @:toastr.error("@Model.Message");   
}

Also as a bonus (although implementation seems sloppy), render the Partial in my document.Ready block

@Html.Partial("_ToastPartial", Model)

and move the Toastr notification code to the partial

@if (Model.Success) { 
    @:toastr.success("@Model.Message");
} else if (!Model.Success && !String.IsNullOrWhiteSpace(Model.Message)) {
    @:toastr.error("@Model.Message");   
}

Most likely I would set up an interface with the Message and Success properties and make any ViewModels that will use the partial implement that interface

Solution 1

Your controller is performing a RedirectToAction. The ViewBag and ViewData only survives the current request. TempData is the thing to use when you use redirects (and only then):

http://rachelappel.com/when-to-use-viewbag-viewdata-or-tempdata-in-asp.net-mvc-3-applications states this clearly:

[...] the TempData object works well in one basic scenario:

• Passing data between the current and next HTTP requests

Solution 2

Using this nuget package, it was very easy for me to use toastr in mvc. I'm a bit surprised it's not used more... https://www.nuget.org/packages/RedWillow.MvcToastrFlash

Solution 3

Try This library NtoastNotify if you are looking for a implementation on ASP.NET core. (Disclaimer: Author here)

Comments

[dgarbacz]

This definitely works to solve my problem, however I've decided to use a different method and have updated my question to reflect it.

[Naila Akbar]

I've tried to use your library, but I'm using mvc version 1.0.0, and it gives me warning that this library is not compatible with this version, and I need to update mvc, But I couldn't update mvc version. Is there any other workaround??

[Nabin Karki Thapa]

@NullPointer This library works with ASP.NET Core MVC.

[Naila Akbar]

Yeah m also talking about ASP.NET Core MVC

[Nabin Karki Thapa]

can you show me your .csproj file for the web project?

[Nabin Karki Thapa]

if you web app targets netcoreapp1.1 or above then you can use this library. Check this sample .csproj github.com/nabinked/NToastNotify/blob/master/sample/… where this library is being used.