Изменение входного значения в Blazor на javascript не меняет значение его свойства

Question

Я создаю сайт, используя app.net core 3.1 с blazor. В одном из моих компонентов у меня есть:

<input @bind="Message" type="text" id="input-message"/>

Message это просто строковое свойство.

и у меня есть javascript:

document.getElementById('input-message').value = 'some text';

Проблема в том, что после запуска вышеуказанного js, <input> значение изменяется, но значение Message не изменяется, и, конечно, если я что-то набираю или вставляю внутри <input>, Message значение тоже меняется.

Answer 1

Вы не должны изменять входное значение непосредственно в javascript, вам нужно вызвать функцию c#, которая обновляет значение, а затем обновит javascript.

вместо делать

document.getElementById('input-message').value = 'some text';

Вы должны сделать что-то вроде

DotNet.invokeMethodAsync('UpdateMessageValue', 'some text');

Где у вас есть

public void UpdateMessageValue(string value){
    Message = value;
}

И поскольку вы используете bind на входе, значение из document.getElementById('input-message').value будет изменено, и значение в c# также будет изменено.

Этот ответ не завершен, я передаю вам идею о том, как это сделать, а не правильно код для решения вашего дела, но если вам нужна дополнительная информация о том, как это сделать, вы можете взглянуть на Call. NET методов из JavaScript функций в ASP. NET Core Blazor .

Answer 2

Видимо, изменение значения <input> или любые другие изменения в DOM на javascript не изменяют состояние, поэтому Blazor не будет повторно визуализировать компонент. Даже вызов StateHasChanged(); вручную на вашей странице бритвы не будет работать.

Чтобы сделать это, вам нужно просто вызвать те же события DOM, которые происходят, если пользователь обычно изменяет <input>, как показано ниже :

var myElement = document.getElementById('input-message');
myElement.value = 'some text';
var event = new Event('change');
myElement.dispatchEvent(event);