ASP.NET Core 3.0：当 OnPost() 被命中时显示 GIF

Question

我正在尝试将 GIF 放到我的网站上，并且通过查看其他来源，我发现我需要使用一点 Ajax 和 Javascript 来做到这一点。但是，我对他们中的任何一个都没有经验。任何人都可以使用剃须刀页面发布网络应用程序的解决方案，允许我在我的一个页面上达到 onPost 功能后显示加载 gif 吗？任何链接也会很棒！到目前为止我找到的解决方案似乎是针对 aspx 文件的，我的项目中没有这些解决方案，我也不明白如何将代码转换为 cshtml / cshtml.cs 格式。感谢您的帮助！

编辑：关闭解决方案中发布的演示，我已经能够添加发布的脚本，但仍然存在问题。

这是我页面上的代码：

@page
@model CustomerPageTest.Pages.Assessment.UploadModel
@{
    ViewData["Title"] = "Upload";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="../Scripts/jquery-1.12.4.js"></script>
<script src="../Scripts/jquery-ui.js"></script>

<div class="col-md-offset-2 justify-content-center">
    <h1 style="color:yellowgreen">3) Import RVTools Spreadsheet (.xls or .xlsx)</h1>
</div>
<br />
<br />

<div class="col-md-offset-3">
    <form enctype="multipart/form-data" method="post">
        <table class="table">
            <tr style="border-top: hidden !important">
                <td class="col-md-1">
                    <input asp-for="@Model.FormFile" type="file" class="text-light">
                    <span asp-validation-for="@Model.FormFile"></span>

                    <input asp-for="@Model.CustomerId" type="hidden" />
                    <span asp-validation-for="@Model.CustomerId"></span>

                    <input asp-for="@Model.AssessmentId" type="hidden" />
                    <span asp-validation-for="@Model.AssessmentId"></span>
                </td>
                <td class="col-md-2">
                    <button id="buttonSubmit" asp-page-handler="Upload" class="btn btn-dark" type="submit">Upload File</button>
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <div style="position:center; height: 100%; width: 100%;"><img id="loadingImage" src="~/css/Images/ajax-loader.gif" alt="Loading ..." style="display:none" /></div>
    </form>
</div>

@section scripts{
    <script type="text/javascript">
        $('#showGif').click(

            function () {
                $.ajax({
                    url: "test",
                    method: "POST",
                    success: function (data) {
                        $('#loading').show();
                    }
                })

            }
        );

    </script>

}

如您所见，我有一部分接收 Excel 文件，因此我的 onPost 不能是 JsonResult OnPost() 函数，而是 Task<IActionResult> OnPostUploadAsync(IFormFile files)。我不确定这会如何影响加载 GIF。我还删除了脚本的标记部分，因为我不完全理解它是什么，但我认为这里不需要它。感谢您的帮助！不幸的是，我收到的解决方案不足以帮助我解决这个问题。

Answer 1

这是一个演示：

test.cshtml：

<div>
    <form method="post">
        </form>

        <img id="loading" src="~/Image/gif.gif" alt="Updating ..." style="display: none;" />
        <button id="showGif">show</button>
</div>
@section scripts{ 
    <script type="text/javascript">
        $('#showGif').click(

            function () {
                $.ajax({
                    url: "test",
                    method: "POST",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (data) {
                        $('#loading').show();
                    }
                })
                
            }
        );
   
    </script>

}

test.cshtml.cs:

public JsonResult OnPost() {
            return new JsonResult("success");
        }

startup.cs：

public void ConfigureServices(IServiceCollection services)
        {
            
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

        }

结果：

XSRF 令牌：

Razor 页面旨在自动防止跨站点请求伪造 (CSRF/XSRF) 攻击。您不必编写任何额外的代码。防伪令牌生成和验证自动包含在 Razor 页面中。在ajax post中，请求失败，页面上没有AntiForgeryToken。所以你需要在Header中添加“XSRF-TOKEN”。

使用<form method="post"></form>以便在html中找到$('input:hidden[name="__RequestVerificationToken"]').val()

由于脚本在名为 X-CSRF-TOKEN 的标头中发送令牌，因此配置防伪服务以查找 X-CSRF-TOKEN 标头： services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");