如何在 blazor 服务器端禁用所有按钮输入模板？答案

【问题标题】：How can I disalbe all button&input templately in blazor server-side?如何在 blazor 服务器端禁用所有按钮输入模板？
【发布时间】：2020-11-17 16:06:18
【问题描述】：

现在我有一个 CSS3 动画（不是全屏动画）要显示在我的页面上。

播放动画时，我想禁用所有按钮和输入。

动画完成后，启用所有按钮和输入。

我怎样才能做到这一点？我不想在每个 void 中添加一个布尔值“IsEnabled”来实现这一点。

谢谢。

【问题讨论】：

标签： asp.net-core .net-core blazor

【解决方案1】：

您可以收听animationstart and animationend event。然后，在 animationstart 事件中，使用“disabled”属性禁用按钮。在动画结束事件中，启用按钮。

示例代码如下：

<style> 
    #myDIV {
        margin: 25px;
        width: 550px;
        height: 100px;
        background: orange;
        position: relative;
        font-size: 20px;
    }

    /* Chrome, Safari, Opera */
    @@-webkit-keyframes mymove {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
    }

    @@keyframes mymove {
        from {
            top: 0px;
        }

        to {
            top: 200px;
        }
    }
</style>  

<div id="myDIV" onclick="myFunction()">Click me to start the animation.</div>
<div class="btn_group">
    <input type="button" value="Submite" onclick="alert('click')" class="btn btn-info" />
    <input type="button" value="Crete" onclick="alert('crete')" class="btn btn-light" />
</div>
<script>
    var x = document.getElementById("myDIV");
      
    // Start the animation with JavaScript
    function myFunction() {
        x.style.WebkitAnimation = "mymove 4s 1"; // Code for Chrome, Safari and Opera
        x.style.animation = "mymove 4s 1";     // Standard syntax
    }

    // Code for Chrome, Safari and Opera
    x.addEventListener("webkitAnimationStart", myStartFunction);
    x.addEventListener("webkitAnimationEnd", myEndFunction);

    // Standard syntax
    x.addEventListener("animationstart", myStartFunction);
    x.addEventListener("animationend", myEndFunction);

    function myStartFunction() {
        this.innerHTML = "animationstart event occured - The animation has started";
        this.style.backgroundColor = "pink";

        //find the elements and disable them.
        var elems = document.getElementsByClassName("btn");
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = true
        }
    }


    function myEndFunction() {
        this.innerHTML = "animationend event occured - The animation has completed";
        this.style.backgroundColor = "lightgray";
        //find the elements and enable them.
        var elems = document.getElementsByClassName("btn");
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = false;
        }
    }
</script>

输出如下：

【讨论】：

非常感谢。

【解决方案2】：

您可以为此目的使用 javascript。

在 js 中你可以按类获取所有元素并为它们添加禁用属性：

document.getElementsByClassName("buttons-to-disable").disabled = true;

并启用它们：

document.getElementsByClassName("buttons-to-disable").disabled = false;

调用js，可以使用IJsRuntime

【讨论】：