在Blazor Server应用程序中的"输入选择"选项中显示/隐藏HTML元素

Question

当按钮被触发时，我使用以下Javascript函数来显示元素。

function showDiv() {
document.getElementById('myDIV').style.display = "block"; }

我在带有的按钮上调用此功能

@onclick=showDiv

我想做同样的事情，但在输入选择列表上。我试过了，但不起作用

<label>Number of engines:</label>
<InputSelect style="width: 25%" @bind-Value="model.NumberofEngines" class="form-control">
<option value="">-- Select the number of engines --</option>
<option>1</option>
<option @onclick=ShowDiv>2</option>
<option value="3">3</option>
<option value="4">4</option>
</InputSelect>

这个想法是一个计算船舶排放量的计算器，用户应该选择船舶的发动机数量，应用程序应该显示所需的输入。

Answer 1

我认为你应该使用onchange测试此代码：

function onChangeDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}

<select name="frm_select" onchange="onChangeDiv('result', this)">
<option value="1">show</option>
<option value="0">hidden</option>
</select>
<div id="result">This is a div</div>

Answer 2

您可以使用简单的css样式在模型中的值上显示隐藏给定的div。发动机数量

<div style="display: @(model.NumberofEngines == "1"  ? "block" : "none");">
ONE
</div>

这是完整的代码

<EditForm>
<label>Number of engines:</label>
<InputSelect style="width: 25%" @bind-Value="model.NumberofEngines" class="form-control">
<option value="">-- Select the number of engines --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</InputSelect>
</EditForm>

<div style="display: @(model.NumberofEngines == "1"  ? "block" : "none");">
ONE
</div>

<div style="display: @(model.NumberofEngines == "2"  ? "block" : "none");">
TWO
</div>
<div style="display: @(model.NumberofEngines == "3"  ? "block" : "none");">
THREE
</div>
<div style="display: @(model.NumberofEngines == "4"  ? "block" : "none");">
FOUR
</div>

或者，您也可以使用css类来显示隐藏给定的div

Answer 3

前面的答案肯定有效。

从编码的角度来看，Blazor降低了dom，而不是操纵dom。

blazor应用程序中的javascript/css aproach的问题是：

• 您必须设置javascript
• 您将不需要存在的内容渲染到dom中。这在Blazor和Browser中都有运行时成本。如果"；"配置"；使用组件或具有blazor逻辑-它们所有都将被实例化/绑定配置等等。即使"；隐藏">

ABlazorC#方法是：

@page "/"
@using static Index.CarEngines
<PageTitle>Index</PageTitle>
<EditForm Model=@model >
<InputSelect @bind-Value=model.Engines >
<option value=@One >One</option>
<option value=@Two >Two</option>
<option value=@Three >Three</option>
<option value=@Four >Four</option>
</InputSelect>
</EditForm>
@switch (model.Engines)
{
case One:
<div>One Engine Configuration</div>
break;
case Two:
<div>Two Engine Configuration</div>
break;
case Three:
<div>Three Engine Configuration</div>
break;
case Four:
<div>Four Engine Configuration</div>
break;
}
@code {
SomeModel model = new();
public class SomeModel 
{
public CarEngines Engines { get; set; } = One;
}
public enum CarEngines
{
One = 1,
Two,
Three,
Four
}
}

运行此并比较dom中的内容

显然，每个案例块中的配置html会增加复杂性，将这些分解为单独的blazor组件。这种设计也会使它变得简单得多。