How to keep Toastr Notification alive after redirection to another page in ASP MVC

Question

I am developping an ASP MVC 5 application and I am heading up a problem with the showing of a Toast's Notifaction.

The toast notifaction appears after updating the informations of a user in order to confirm the success of operation.

Unfortunately it disappears quickly (in 2 seconds) after the loading of the next page. I think this is due to the using of server side code (C# in this case), where the entire page reloads, including the javascript files. This is why the toastr disappears too.

Is there any way to keep it a lil longer ?

I tried to o pass the necessary information to the next page, so that page two would know to display the toastr instead of page1 but it didn't work.

This is the code's snippet :

View :

 @using (Html.BeginForm("Edit", "Client", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <input type="submit" value="Save" class="btn btn-default" onclick="Update()">
    }

        <script src="/template/web/js/jquery-2.2.3.min.js"></script>
        <script src="~/Scripts/toastr.js"></script>
        <script>

            function Update() {
                toastr.success("Your infos are updated with succes !");
            }
        </script>

Controller :

[HttpPost]
    public ActionResult Edit(int id, Client cmodel)
    {
        try
        {

                ClientManagement cdb = new ClientManagement();
            if (cdb.UpdateDetails(cmodel))
            {
                ViewBag.Message = "Client Details Edited Successfully";
            }

            return RedirectToAction("Profil");
        }
        catch
        {
           return View();
        }
    }

Profil :

 public ActionResult Profil()
    {
        ClientManagement dbhandle = new ClientManagement();
        ViewBag.Message = TempData["Message"];
        return View(dbhandle.GetClientsInfo());
    }

In View Profil (buttom of page) :

 <link href="~/Content/toastr.min.css" rel="stylesheet" />
script src="~/scripts/toastr.js"></script>
        <script src="~/scripts/toastr.min.js"></script>

     @if (ViewBag.Message != null)
    {
        <script type="text/javascript">toastr.success("@ViewBag.Message");</script>
    }

Answer 1

If you want to pass one-time message from an action method to another action method, you will need to use TempData.

[HttpPost]
public ActionResult Edit(int id, Client cmodel)
{
   try
   {
      ClientManagement cdb = new ClientManagement();
      if (cdb.UpdateDetails(cmodel))
      {
         TempData["Message"] = "Client Details Edited Successfully";
      }
      return RedirectToAction("Profil");
   }
   catch
   {
      return View(cmodel);
   }
}

You then retrieve it at the next page either inside action method or view. Please note that it would be cleared out at the end of the request after you read it.

Profil.cshtml

@if (TempData["Message"] != null)
{
   <script type="text/javascript">toastr.success("@TempData["Message"]");</script>
}

Update

Above code works. If you use default ASP.NET MVC Layout, please make sure you place the script inside Scripts section, so that it renders after jQuery.

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
    @if (TempData["Message"] != null)
    {
        <script type="text/javascript">toastr.success("@TempData["Message"]");</script>
    }
}

FYI: If you use toastr in other places, you might want to consider bundle and minfy them with other scripts and styles.

Answer 2

If you don't need to redirect to "Profil", then I agree you could use Ajax and on the success callback you could show your toastr. If you need to redirect then you can set the ViewBag.Message as you do and then do something like

@if (ViewBag.Message != null)
{
<script type="text/javascript">toastr.success("@ViewBag.Message");</script>
}