Как добавить клиентский обработчик событий DOM javascript при использовании Blazor Server? - PullRequest
Новая
       48

Как добавить клиентский обработчик событий DOM javascript при использовании Blazor Server?

2 голосов
/ 23 апреля 2020

... да, я знаю ... Blazor Server обслуживается на стороне, и я могу обрабатывать события DOM с помощью моего C# кода на стороне сервера ... все же имеет смысл добавить событие javascript на чистой стороне клиента обработчик и, что удивительно, кажется, что это невозможно, потому что _framework / blazor.server. js проглатывает их ...

Вот самые простые изолированные шаги для воспроизведения того, что я делаю.

  1. Создайте приложение Blazor, используя шаблон VS 2019, выберите приложение сервера Blazor на следующем шаге.

  2. В Index.razor добавьте строку в любом месте <div id="test">Hello, click me!</div>

  3. В _Host.cs html добавьте следующий скрипт после или до уже существующей строки <script src="_framework/blazor.server.js"></script>:

    ... потянув меня за волосы, я не могу вставить код блок, см. после шага 4 ...

  4. Запустите приложение и нажмите F12, чтобы увидеть вывод консоли.

здесь это сценарий на шаге 3: 

<script>
    console.log("script is executing...");
    console.log("element found, its innerText is: " + document.getElementById("test").innerText);

    document.getElementById("test").addEventListener("click",
        function() {
            console.log("click handler called");
        });
</script>

enter image description here

Вопрос

Я что-то упустил? Можно ли заставить эту работу работать без сервера? Если это невозможно, то многие из существующих javascript виджетов и jQuery плагинов как будут их инициализировать?

Что я пробовал до сих пор?

  • Используйте другое событие, например mouseup: не работает.
  • Измените порядок моего пользовательского сценария и <script src="_framework/blazor.server.js"></script>: ни один из них не работает ...
  • Закомментируйте строку <script src="_framework/blazor.server.js"></script> для диагностики c причины: обработчик событий теперь вызывается, и я вижу вывод консоли в браузере: "обработчик щелчка" с именем "

Чтобы заранее ответить «почему я хотел бы сделать это?»:

Я хотел бы, например, реализовать поведение DOM, при котором нажатие на элемент изменяет его атрибуты. Я знаю, я могу прикрепить обработчик C#, а затем вызвать функцию возврата javascript, но мне бы не хотелось этого туда и обратно. Кроме того, возможно, существует множество javascript плагинов и lib, которые полагаются на то, что его скрипт инициализации присоединяет обработчик событий к DOM.

1 Ответ

0 голосов
/ 23 апреля 2020

... основываясь на документации, на которую Агуа из Марса указал в своем комментарии: (Если у кого-то есть идея получше, тогда, пожалуйста, ответьте или прокомментируйте)

Если я запускаю свой скрипт на стороне клиента, который присоединяет событие обработчики после события сервера OnAfterRender, затем оно работает. Если я запускаю его каким-либо образом раньше (например, в событии OnInitialized), оно не будет работать:

Итак, вот рабочее решение: Index.razor 

@code
{
    protected override void OnAfterRender(bool firstRender)
    {
        _jsRuntime.InvokeVoidAsync("attachHandlers");
    }
}

_Host.cs html : 

window.attachHandlers = () => {
    document.getElementById("test").addEventListener("click", function()
    {
         console.log("click handler called");
    });
};
...