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

Question

我有一个问题：如何隐藏一些按钮并在单击另一个按钮时使它们可见？我正在使用 Blazor 和 ASP.NET Core，并且我见过几个示例，但它们是用 Javascript 和 jQuery 编写的，而不是用 C# 编写的。

\n

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

\n

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

\n

这些是我想要隐藏在下拉菜单中的按钮：

\n

<div class="box-footer">\n    <div class="pull-right">\n        <div class="btn-group">\n            <div class="btn-group">\n                <div class="dropdown">\n                    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>\n                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">\n                        <button class="dropdown-item" type="button" @onclick="@DescargarPDF"><i class="oi oi-envelope-closed"></i> Descargar Cotizaci\xc3\xb3n</button>\n                        <button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Correo</button>\n                    </div>\n                </div>\n            </div>\n\n            <button type="button" class="btn btn-outline-info" @onclick="@AgregarProducto"><i class='fa fa-plus'></i> Agregar productos</button>\n        </div>\n    </div>                              \n\n    <div class="btn-group">\n        <div class="btn-group">\n            <div class="dropdown">\n                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Facturaci\xc3\xb3n</button>\n                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">\n                @if (isFacturado)\n                {\n                    <button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Factura</button>\n                }\n                else\n                {\n                    <button class="dropdown-item" type="button" @onclick="FacturarDemo"><i class="oi oi-file"></i> FacturarDemo</button>\n                    <button class="dropdown-item" type="button"><i class="oi oi-file"></i> ---- </button>\n                    <button class="dropdown-item" type="button" @onclick="Facturar"><i class="oi oi-file"></i> Facturar</button>\n                }\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <a class="btn btn-outline-primary" href="detalles-carritos"><i class="oi oi-eye"></i> Ver Art\xc3\xadculos</a>\n</div>\n

\n

Answer 1

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

\n

在 Blazor 中，最好用渲染或不渲染来表达，而不是使它们可见或隐藏它们。因此，如果 GuardarCotizacion 是一种在调用时应隐藏某些按钮的方法，则可以如下面的 @code 块中所述：

\n

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

\n

注意：上面的代码定义了一个默认设置为 false 的布尔变量。\n现在，当您单击“Guardar Cotizaci\xc3\xb3n”按钮时，会调用 GuardarCotizacion 方法并将该变量设置为 true，之后调用 StateHasChanged 方法被自动调用，并且组件被渲染。

\n

例如，如果您想“隐藏”此按钮：

\n

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

\n

并且仅当您单击“Guardar Cotizaci\xc3\xb3n”按钮时才显示它，您可以将按钮包装在 if 语句中，如下所示：

\n

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

\n

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

\n

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

\n