当使用Blazor服务器时,如何添加客户端DOM javascript事件处理程序?

…是的,我知道… Blazor服务器是服务端,我可以在服务器端用我的C#代码处理DOM事件……不过,添加一个纯客户端的javascript事件处理程序还是很有意义的,但令人惊讶的是,这似乎是不可能的,因为_frameworkblazor.server.js会吞噬它们……。

下面是最简单的隔离步骤,重现我的做法。

  1. 使用VS 2019模板创建一个Blazor App,下一步选择Blazor Server App。
  2. 在Index.razor中,在任何地方添加一行字 <div id="test">Hello, click me!</div>

  3. 在_Host.cshtml中,在已经存在的之后或之前添加以下脚本 <script src="_framework/blazor.server.js"></script> 行。

    …我的头发都快被拔光了,我无法插入代码块,在这里,看到第四步后… …

  4. 运行应用程序,按F12键查看控制台输出。

这里是第三步的脚本。

<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> 诊断的原因。事件处理程序现在被调用,我在浏览器中看到了控制台的输出。“点击处理程序被调用”

提前回答 “为什么我想这样做?”。

例如,我想实现一个DOM行为,点击一个元素,它就会改变它的属性。我知道,我可以附加一个C#处理程序,然后调用一个javascript函数,但我不喜欢这样的往返。除此之外,也许有很多现存的javascript插件和lib依赖于它的初始化脚本在DOM上附加事件处理程序。

解决方案:

…根据文档,mars的agua在他的评论中指出:(如果有人有更好的想法,请回答或评论)

如果我运行我的客户端脚本,它附加了事件处理程序 之后 服务器上的OnAfterRender事件,那么它就会工作。如果我在之前以任何方式运行它(例如在OnInitialized事件中),它将无法工作。

所以这里有一个有效的解决方案: Index.razor.

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

_Host.cshtml。

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

Swift: 图像的程序化自动布局。

2022-9-8 0:00:40

未分类

WEBGL在VS CODE中的自动完成。

2022-9-8 0:11:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索