单击 c# 和 ASP.NET 内核中的另一个按钮时如何隐藏按钮并显示它们？

Question

I have a problem: how can I hide some buttons and make them visible when another button is clicked? I am using Blazor and ASP.NET Core, and I have seen several examples but they are in Javascript and jQuery but not in C#.

This is the button that will execute the event to show the buttons:

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

These are the buttons that I want to have hidden are inside a dropdown:

<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

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

@code
{
  private bool ShowButtons = true;

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

Answer 2

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

In Blazor it is preferable to speak in terms of rendering or not, rather than making them visible or hiding them. Thus, if GuardarCotizacion is a method that should hide some buttons when called can be as described in the @code block below:

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

Note: The code above defines a boolean variable set to false by default. Now, when you click on the "Guardar Cotización" button, the method GuardarCotizacion is called and set the variable to true, after which the StateHasChanged method is automatically called, and the component is rendered.

If you want, for example, to "hide" this button:

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

and show it only when you click on the "Guardar Cotización" button, you can wrap the button in an if statement like this:

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

}

Now, when your component is freshly created, this button is not going to be displayed, because the initial value of the variable show is false, but after changing it to true it is going to be rendered.

This is how you can do that with the rest of your button, together or separately, in a simple manner or a sophisticated manner, according to your whims.