How to hide buttons and show them when clicking another button in c# and ASP.NET Core?

user_11406791 0
Viewed 6236

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>
blazor asp.net-core html c#
2 Answers
<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.

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

@code
{
  private bool ShowButtons = true;

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