Estoy usando la siguiente función de Javascript para mostrar elementos cuando se activa un botón.
function showDiv() { document.getElementById('myDIV').style.display = "block"; }Llamo a esta función en un botón con
@onclick=showDivMe gustaría hacer lo mismo pero en una Lista InputSelect. He intentado esto pero no funciona
<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>La idea es una calculadora que calcule las emisiones del barco y el usuario debe elegir la cantidad de motores que tiene el barco y la aplicación debe mostrar las entradas requeridas.
Creo que deberías usar onchange Probar este código:
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>Puede usar el estilo css simple para mostrar ocultar el div dado en el valor en model.NumberofEngines
<div style="display: @(model.NumberofEngines == "1" ? "block" : "none");"> ONE </div>Aquí está el código completo
<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>Alternativamente, puede usar la clase css también para mostrar ocultar dado div
Las respuestas anteriores funcionan seguro.
Desde una perspectiva de codificación, Blazor representa el dom, no lo manipula.
Los problemas con el enfoque javascript/css en una aplicación blazor son:
Una forma Blazor C# de hacer esto es:
@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 } }Ejecute esto y compare lo que hay en el dom...
Obviamente, la configuración html dentro de cada bloque de casos agregará complejidad, divídalos en componentes blazor separados. Este diseño también lo hará mucho más simple.