Razor 页面在等待 OnGetAsync 时显示微调器打开

Question

我正在尝试在我的

OnGetAsync

处理时显示旋转器。

我有一个看起来像这样的表格：

<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>
    </div>
</form>

通过添加触发 jquery .show() 方法的 onclick，我已经能够在按下按钮时显示我的微调器。然而，当我的

OnGetAsync

返回时，我没有什么好办法阻止它。

处理此类事情的正确方法是什么？

Answer 1

在razor项目中，c#无法在客户端运行，这里有另一个类似问题提到过，所以我们最好控制加载是否显示。由于您没有提供最小样本，所以我用下面的代码进行了测试：

<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

时，整个页面都会重新加载，这样我的加载图标就会默认不可见。如果我们想像ajax那样重新加载页面的一部分，那么所有这些都应该由js来控制。例如，在onclick事件中，我们可能会发送一个ajax请求，在发送请求之前，我们可以调用

.show()

方法来显示加载图标，并且在回调方法中，我们可以调用

.hide()

方法使其不可见.