Trying to display TempData msg with Ajax POST

Question

Hello I'm a bit stuck to display an alert msg with latest version of asp.net core 8 MVC. I have an edit post form with Ajax and this is the code.

View code:

@{
    ViewData["Title"] = "Edit book";
    var notification = TempData["Notification"];
}


@if (notification != null)
{
    <div class="alert alert-danger" role="alert">
       @notification
    </div>
}


// Ajax script

var url = '@Url.Action("EditBook", "Account")';
$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: url,
    data: {
        model
    },
    success: function (response, xhr) {
        if (response.redirectToUrl != undefined) {
            window.location.href = response.redirectToUrl;
        } else {

        }

    }
});

The end of my POST controller where I manage my alerts

if (result == 1)
{
    TempData["Notification"] = "The book has been published successfully!";
    return Json(new { redirectToUrl = Url.Action("Books", "Account") });
} else // Error
{
    TempData["Notificacion"] = "There was an error processing your request, please contact with support";
    return View(model);
}

Doing this with successful message works good because it is a redirect but I don't want to loose the model and that's why I'm trying to return the same view with model.

Edit Fixed was my gallery js breaking it. After disable, it works now.

Answer 1

   Create partial as _Notification view
@if (TempData["success"] != null)
{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        toastr.success('@TempData["success"]');
    </script>
}
@if (TempData["error"] != null)
{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script type="text/javascript">
        toastr.error('@TempData["success"]');
    </script>
}
   Add below link and code in layout 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />

<link rel="stylesheet" href="//cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css" />

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js" asp-append-version="true"></script>

<script src="https://cdn.tiny.cloud/1/g28lhnxtlihu4l4a381gw7tz47voznshwbi10lmsvlekrfme/tinymce/6/tinymce.min.js" referrerpolicy="origin">
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script></script>
@await RenderSectionAsync("Scripts", required: false)

<div class="container">
    <main role="main" class="pb-3">
        <partial name="_Notification" />
        @RenderBody()
    </main>
</div>
   Add in controller
TempData["success"] = "Category updated successfully";