I am currently working on an ASP MVC 5 application and encountering an issue with displaying a Toast notification.
The toast notification is supposed to appear after updating a user's information to confirm the success of the operation.
However, it disappears quickly (in just 2 seconds) after the next page loads. I suspect this is because of using server-side code (C# in this case), which causes the entire page, including the JavaScript files, to reload and thus the toastr disappears.
Is there a way to make it stay visible for a little longer?
I attempted to pass the necessary information to the next page so that it would display the toastr instead of the current page, but that didn't work.
Here is a snippet of the code:
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 information has been updated successfully!");
}
</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("Profile");
}
catch
{
return View();
}
}
Profile:
public ActionResult Profile()
{
ClientManagement dbhandle = new ClientManagement();
ViewBag.Message = TempData["Message"];
return View(dbhandle.GetClientsInfo());
}
In the Profile View (bottom of the 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>
}