如何在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>

- Jasiel Torres

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块中所描述的方式实现：

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

注意：上面的代码默认将布尔变量设置为false。 现在，当你点击“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之后，它将被渲染。

这就是如何通过简单或复杂的方式，根据你的喜好一起或分别实现剩下的按钮。

- enet

---

非常感谢您的时间和帮助。您的解释帮助我更好地理解了这个工作原理。 - Jasiel Torres

Answer 2

@if (ShowButtons) 
{
  <button....... />
} 

@code
{
  private bool ShowButtons = true;

  private void GuardarCotizacion() 
  {
    ShowButtons = !ShowButtons;
  } 
} 

- Peter Morris