Show/Hide HTML 来自 Blazor Server 应用中输入 Select 选项的元素

Question

我正在使用以下 Javascript 函数在触发按钮时显示元素。

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

我用

在按钮上调用此函数

@onclick=showDiv

我想做同样的事情，但在 InputSelect 列表上。我已经试过了，但它不起作用

<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 样式来显示 model.NumberofEngines

中给定值 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 class 来显示给定的隐藏 div

Answer 3

前面的答案肯定有效。

从编码的角度来看，Blazor 渲染 dom 它不会操纵 dom。

Blazor 应用程序中javascript/css方法的问题是：

您必须设置 javascript。

您将不需要的内容渲染到 dom 中。这在 Blazor 和浏览器中都有运行时成本。如果“配置”使用组件或具有 blazor 逻辑，则它们 all 将被 instanced/bindings 配置等。即使“隐藏”。

A Blazor C# 方法是：

@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...
中的内容
显然每个 case 块中的配置 html 会增加复杂性，将它们分解成单独的 blazor 组件。这种设计也会使它变得更简单。

Show/Hide HTML 来自 Blazor Server 应用中输入 Select 选项的元素

Show/Hide HTML Elements from a Input Select option in Blazor Server app

javascript

c#

blazor

blazor-server-side