如何通过 Javascript 设置 Blazor 输入控件

Question

我尝试通过 javascript 设置 Blazor InputCheckbox 并期望执行数据绑定并将值写入模型。但无济于事。我做错了什么？

// 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;
}

Answer 1

我认为你想在某些事件中执行你的js:

<InputCheckbox @bind-Value="Model.Checked" class="tripCheckbox" @onclick=OnMyCheckboxClick />
 // Code behind
 [Inject]
 private IJRunTime Js {get; set;}
 private async task OnMyCheckboxClick() { 
   Js.InvokeVoidAsync("YourJSMethod");
 }

Answer 2

使用 JS 更改值的问题是不会调用 Blazor 事件。您必须自己调用 DOM 事件。

这是一个演示页面和代码，使用了您的大部分代码：

我的 JS 函数在 _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>

这是一个测试页：

@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");
    }
}

如何通过 Javascript 设置 Blazor 输入控件

How To set a Blazor Input Control via Javascript

javascript

data-binding

blazor

blazor-server-side