Share via

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

Question

Thursday, November 30, 2017 1:42 PM

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 :

   {
        <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";
                ModelState.Clear();
            }

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

All replies (9)

Tuesday, December 5, 2017 1:03 PM âś…Answered

Hi,

TempData should work. Have you tried the suggested snippet or try to retrieve it once  (AFAIK it is cleared when read which might explain your issue).

Edit: for example :

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

Thursday, November 30, 2017 3:00 PM

the ViewBag is not preserved across requests, so its lost with a redirect. you will need to session to store the message, or pass on the redirect url.

 

Thursday, November 30, 2017 3:06 PM

the ViewBag is not preserved across requests, so its lost with a redirect. you will need to session to store the message, or pass on the redirect url.

Ok that's sound nice but how ? I tried to keep that using a **Tempdata ** but it didn't work :

[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);
   }
}

View : Profil.cshtml

<script src="/template/web/js/jquery-2.2.3.min.js"></script>
@section Scripts {
    <script src="~/scripts/toastr.js"></script>
    <script src="~/scripts/toastr.min.js"></script>
    <link href="~/Content/toastr.min.css" rel="stylesheet" /> 
    @if (TempData["Message"] != null)
    {
        <script type="text/javascript">toastr.success("@TempData["Message"]");</script>
    }
}

Thursday, November 30, 2017 3:15 PM

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

change your code like below

<script type="text/javascript">toastr.success("@(TempData["Message"] as string)");</script>

Thursday, November 30, 2017 3:21 PM

change your code like below

I think I have a problem with the rendered source inside browser because when I add this code inside my section scripts 

<script type="text/javascript">toastr.success("Hello!");</script>

It is didn't work also

Thursday, November 30, 2017 3:22 PM

   <script src="~/scripts/toastr.js"></script>
    <script src="~/scripts/toastr.min.js"></script>

You have two references of toaster js files. Remove one of the references and try again

Thursday, November 30, 2017 3:32 PM

A2H

You have two references of toaster js files. Remove one of the references and try again

Infact, I was using only one at the beginning but it didn't works that's why I tried also with two but it didn't work also

I have this error inside the browser :

Uncaught TypeError: $(...).datepicker is not a function

    at HTMLDocument.<anonymous> (http://localhost:60585/(S(gkiezxvswsx2uqia5x0d2tdm))/Client/Profil:268:34)

    at i (http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27151)

    at Object.fireWith [as resolveWith] (http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:27914)

    at Function.ready (http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29707)

    at HTMLDocument.J (http://localhost:60585/template/web/js/jquery-2.2.3.min.js:2:29892)

Friday, December 1, 2017 7:18 AM

Hi anouargan,

It seems that some conflicts between jQuery causes datepicker not working, the following sample using both toastr and jQuery ui datepicker works for me, if possible, you can try my referenced jQuery files.

<h4>ToastrJs</h4>
@Html.TextBox("data")
<input type="button" value="Toastr" id="toastr" onclick="Update()"/>
//Don't need to quote jquery file here, else it will be loaded for two times.
@section scripts{
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js "></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        $("#data").datepicker();
        function Update() {
            toastr.success("Your infos are updated with succes !");
        }
    </script>
}

 

Best Regards,

Daisy

Tuesday, December 5, 2017 12:22 PM

It seems that some conflicts between jQuery causes datepicker not working, the following sample using both toastr and jQuery ui datepicker works for me, if possible, you can try my referenced jQuery files.

Thanks for answering me and sorry for the late. I resolved the problem of the datapicker. I have no Errors now in my browser but the problem of the disappearing of the toast notification persist again.  

  • Last updated on