c# - 在 C# 和 ASP.NET Core 中单击另一个按钮时如何隐藏按钮并显示它们？

Question

我有一个问题:如何隐藏一些按钮并在单击另一个按钮时使它们可见？我正在使用 Blazor 和 ASP.NET Core，我已经看到了几个示例，但它们是在 Javascript 和 jQuery 中而不是在 C# 中。

这是将执行事件以显示按钮的按钮:

<button class="btn btn-dark" @onclick="GuardarCotizacion"><i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar Cotización</button>

这些是我想隐藏在下拉列表中的按钮:

<div class="box-footer">
    <div class="pull-right">
        <div class="btn-group">
            <div class="btn-group">
                <div class="dropdown">
                    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <button class="dropdown-item" type="button" @onclick="@DescargarPDF"><i class="oi oi-envelope-closed"></i> Descargar Cotización</button>
                        <button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Correo</button>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-outline-info" @onclick="@AgregarProducto"><i class='fa fa-plus'></i> Agregar productos</button>
        </div>
    </div>                              

    <div class="btn-group">
        <div class="btn-group">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Facturación</button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                @if (isFacturado)
                {
                    <button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Factura</button>
                }
                else
                {
                    <button class="dropdown-item" type="button" @onclick="FacturarDemo"><i class="oi oi-file"></i> FacturarDemo</button>
                    <button class="dropdown-item" type="button"><i class="oi oi-file"></i> ---- </button>
                    <button class="dropdown-item" type="button" @onclick="Facturar"><i class="oi oi-file"></i> Facturar</button>
                }
                </div>
            </div>
        </div>
    </div>

    <a class="btn btn-outline-primary" href="detalles-carritos"><i class="oi oi-eye"></i> Ver Artículos</a>
</div>

Answer 1

<button class="btn btn-dark" @onclick="GuardarCotizacion"><i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar Cotización</button>

在 Blazor 中，最好用渲染或不渲染来说话，而不是让它们可见或隐藏它们。因此，如果 GuardarCotizacion 是一种在调用时应该隐藏一些按钮的方法，则可以如下面的 @code block 中所述:

@code 
{
   private bool show = false;
   private void GuardarCotizacion()
   {
       show = true;
   } 
}

注意:上面的代码定义了一个默认设置为 false 的 bool 变量。 现在，当您单击“Guardar Cotización”按钮时，会调用 GuardarCotizacion 方法并将变量设置为 true，之后会自动调用 StateHasChanged 方法，并呈现组件。

例如，如果你想“隐藏”这个按钮:

<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>

并且仅在您单击“Guardar Cotización”按钮时显示它，您可以将按钮包装在 if 语句中，如下所示:

@if( show)
{
   <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>

}

现在，当你的组件刚创建时，这个按钮是不会显示的，因为变量 show 的初始值为 false，但是在将其更改为 true 之后，它会被渲染。

这就是您如何使用按钮的其余部分一起或单独执行此操作， 根据您的想法，以简单的方式或复杂的方式。