Csharp 在等待OnGetAsync时打开Razor Page显示微调器

在Razor项目中，C#不能在客户端运行，这里有另外similar issue个提到过这个问题，所以我们最好控制加载是否显示.由于您没有提供最低限度的样本，所以我有一个带有以下代码的测试:

<form method="get">
    <div class="row">
        @* <button type="submit" class="btn btn-primary" name="action" value="1">1</button>
        <button type="submit" class="btn btn-primary" name="action" value="2">2</button> *@
        <button id="showImg">show loading</button>
    </div>
</form>

<div id="loadImg" style="display:none;">
    <img style="width:50px;height:50px;" src="~/loading.gif" />
</div>

@section Scripts{
    <script>
        $("#showImg").click(function(){
            $("#loadImg").show();
        });
    </script>
}

public class IndexModel : PageModel
{
    public IActionResult OnGet()
    {
        return Page();
    }
}

这是测试结果.

由于我在方法中有一个return Page()，每次调用onGet时，整个页面都会重新加载，这样我的加载图标就会变成默认的不可见.如果我们想像aecom一样重新加载页面的一部分，那么所有这些都应该由js控制.例如，在onclick事件中，我们可能会发送一个allocate请求，在发送请求之前，我们可以调用.show()方法来显示加载图标，而在回调方法中，我们可以调用.hide()方法使其不可见.

=UPDATE=

我们现在面临的问题是找到一个触发器来让页面知道表单提交已经完成，而我们实际上没有这样的回调方法，所以我找到了一个在此场景中起作用的解决方法.

$([window, top.window]).blur(function () {
    $("#loadImg").hide();
});

顺便说一句，我try 将文件与页面一起返回，以便页面重新加载并隐藏加载图标，但事实证明这是不可能的.我还试图定义一个变量，但razor Pages不像razor组件，因此我们无法监视变量以判断提交是否完成.我认为另一种可能的方式是，我们手动提交表单/通过Java脚本下载文件，这样我们就可以控制图标在文件下载过程中显示或不显示.例如，我们可以有这样的代码，这使得我们不能在文件返回时隐藏图标，但我相信如果我们总是试图返回一个小文件，那么1到2秒就足够了.

$("#showImg2").click(function(){
    $("#loadImg").show();
    downloadUrl("/?action=PDF");
    setTimeout(hideImg, 2000);
});

function hideImg() { 
    $("#loadImg").hide();
}