尝试使用 Ajax POST 显示 TempData 消息

Question

您好，我在使用最新版本的 asp.net core 8 MVC 显示警报消息时有点卡住了。 我有一个带有 Ajax 的编辑帖子表单，其中包含此代码。

查看代码：

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


@if (notification != null)
{
    <div id="alertDisplayMsg" class="my-3">
        @Html.Partial("_Alert", new AlertEntity { Notification = notification.ToString(), TypeMsg = typeAlert.ToString() })
    </div>
}


// Ajax script

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

    }
});

我的 POST 控制器的末端，用于管理我的警报

if (result == 1)
{
    TempData["TypeMsg"] = 1;
    TempData["Notification"] = "The book has been published successfully!";

    return Json(new { redirectToUrl = Url.Action("Books", "Account") });
} else // Error
{
    TempData["TipoMsg"] = 3;
    TempData["Notificacion"] = "There was an error processing your request, please contact the support team.";
    return View(model);
}

使用成功的消息执行此操作效果很好，因为它是重定向，但我不想丢失模型，这就是为什么我尝试使用模型返回相同的视图。 按照带有断点的代码，我可以看到通知到达并可以正确查看，但应该出现的 div“alertDisplayMsg”却没有显示。

有什么建议吗？ 谢谢。

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";