单击 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 块中所述：

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

注意：上面的代码定义了一个默认设置为 false 的布尔变量。 现在，当您点击“Guardar Cotizacion”按钮时，会调用 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 后，它将被渲染。

这就是您可以使用按钮的其余部分一起或单独执行此操作的方法， 以简单的方式或复杂的方式，根据你的心血来潮。

Answer 2

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

@code
{
  private bool ShowButtons = true;

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