Intento configurar un InputCheckbox de Blazor a través de javascript y espero que se ejecute el enlace de datos y el valor se escriba en el modelo. Pero fue en vano. ¿Qué estoy haciendo mal?
// blazor <EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit" > <InputCheckbox @bind-Value="Model.Checked" class="tripCheckbox" /> </EditForm> // javascript const tripCheckBox = container.querySelector('.tripCheckbox'); if (tripCheckBox.checked === false) { tripCheckBox.setAttribute('checked', 'checked'); tripCheckBox.checked = true; } else { tripCheckBox.removeAttribute('checked'); tripCheckBox.checked = false; }Creo que quieres ejecutar tu js en algún evento:
<InputCheckbox @bind-Value="Model.Checked" class="tripCheckbox" @onclick=OnMyCheckboxClick /> // Code behind [Inject] private IJRunTime Js {get; set;} private async task OnMyCheckboxClick() { Js.InvokeVoidAsync("YourJSMethod"); }El problema de cambiar el valor con JS es que los eventos de Blazor no se llaman. Tienes que invocar los eventos DOM tú mismo.
Aquí hay una página de demostración y código, usando la mayor parte de su código:
Mi función JS cargada en _layout.cshtml.
<script> window.SetMyCheckBox = function() { const tripCheckBox = document.getElementById('tripCheckbox'); if (tripCheckBox.checked === false) { tripCheckBox.setAttribute('checked', 'checked'); tripCheckBox.checked = true; var event = new Event('change'); tripCheckBox.dispatchEvent(event); } else { tripCheckBox.removeAttribute('checked'); tripCheckBox.checked = false; var event = new Event('change'); tripCheckBox.dispatchEvent(event); } } </script>Y esta es una página de prueba:
@page "/" @inject IJSRuntime JS <PageTitle>Index</PageTitle> <h1>Hello, world!</h1> <EditForm Model="@model"> <InputCheckbox @bind-Value="model.Checked" id="tripCheckbox" /> </EditForm> <div class="m-2"> Checked: @model.Checked </div> <div class="m-2"> <button class="btn btn-primary" @onclick="Clicked"> Change </button> </div> @code { private Model model = new Model(); class Model { public bool Checked { get; set; } } private async Task Clicked() { await JS.InvokeVoidAsync("SetMyCheckBox"); } }