我如何显示加载图标或禁用登录 asp.net core razor 的按钮

问题描述

我想在用户点击登录按钮时显示加载图标，直到登录完成。在 login.cshtm.cs 文件中，我有一些代码可以处理并花时间登录用户。现在我想在用户点击登录页面 asp.net core razor 中的登录按钮时向用户显示加载图标

解决方法

您可以像使用其他 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>    
  

,

尝试参考以下示例：

<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> 
}

结果如下：