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

Posted 2023-04-12

【中文标题】我如何在登录 asp.net core razor 之前显示加载图标或禁用按钮

【英文标题】：How i can show loading icon or disable the button unitl logged in asp.net core razor

【发布时间】：2021-07-28 22:27:12

【问题描述】：

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

【问题讨论】：

嗨@Hasib，我可以知道回复是否解决了问题或者这个帖子有什么更新吗？如果答案解决了问题，请接受 - 请参阅What should I do when someone answers my question。如果您对我的回复有任何疑问，请随时告诉我。

【参考方案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"  />
</div>

在上述视图页面的最后，添加以下Scripts：

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

结果如下：

【参考方案2】：

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

这是一个工作spinet：

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