如何显示加载图标或禁用登录 ASP.NET Core Razor Pages 的按钮？

Question

我想在用户单击登录按钮直到登录完成时显示加载图标。在我的 login.cshtm.cs 文件中，我有一些处理登录用户并花费时间的代码。现在我想在用户单击登录按钮时向用户显示加载图标。我怎样才能做到这一点？

Answer 1

尝试参考以下示例：

<style type="text/css">

    .modal {
        position: fixed;
        z-index: 998;
        height: 100% !important;
        width: 100% !important;
        top: 0;
        display: block;
        background-color: Black !important;
        filter: grayscale(100%);
        opacity: 0.6;
    }

    .loading {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

<input type="button" value="Login" id="btnLogin" />

<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="https://www.aspsnippets.com/demos/loader.gif" alt="" />
</div>

在上述视图页面的末尾，添加以下脚本：

@section Scripts{
    @*Since I have already added the JQuery reference in the layout page, there is no need to add JQuery reference here.
        If you didn't add the JQuery reference before, please remember to add the JQuery reference first*@
    <script type="text/javascript">
        var modal, loading;
        function ShowProgress() {
            modal = document.createElement("DIV");
            modal.className = "modal";
            document.body.appendChild(modal);
            loading = document.getElementsByClassName("loading")[0];
            loading.style.display = "block";
            var top = Math.max(window.innerHeight / 2 - loading.offsetHeight / 2, 0);
            var left = Math.max(window.innerWidth / 2 - loading.offsetWidth / 2, 0);
            loading.style.top = top + "px";
            loading.style.left = left + "px";
        };

        function HideProgress() {
            document.body.removeChild(modal);
            loading.style.display = "none";
        };
        $(function () {
            $("#btnLogin").click(function () {
                //show the loading image
                ShowProgress();

                //using JQuery ajax to call the event handler and login,
                //and then, in the Ajax success function, call the HideProgress function to hide the loading image.
                setTimeout(function () {
                    HideProgress();
                }, 5000);
            });
        });
    </script> 
}

结果是这样的：

Answer 2

您可以像我们使用其他Web应用程序一样使用jquery来实现它。

这是一个正在工作的尖晶石：

* {
margin: 0;
padding: 0;

}


.loader {
 display: none;
 top: 50%;
 left: 50%;
 position: absolute;
 transform: translate(-50%, -50%);
}


 .loading {
 border: 2px solid #ccc;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border-top-color: #1ecd97;
 border-left-color: #1ecd97;
 animation: spin 1s infinite ease-in;
 }

 @keyframes spin {
 0% {
 transform: rotate(0deg);
 }

 100% {
 transform: rotate(360deg);
 }
}

<button type="submit" class="sbtn btn btn-secondary btn-c" onclick="spinner()">
  Log in</button>
 <div class="loader">
 <div class="loading">
 </div>
 </div>


  <script type="text/javascript">
   function spinner() {
    document.getElementsByClassName("loader")[0].style.display = "block";
    }
    </script>