是否可以在 DOM 事件中混合 Javascript 和 C# 代码?

问题描述 投票:0回答:2
javascript c# html blazor webassembly
2个回答
1
投票

只能有1个onclick属性,所以要么从JS调用C##方法,要么从C#调用JS代码。在这两种情况下,您都需要互操作,但不支持以您尝试的方式组合它。

“Test()”函数自动执行

是的,在

onclick="... @Test()"
中,它是在页面呈现时执行的,而不是在单击按钮时执行的。


0
投票

您可以通过 3 种不同的方式为一个 DOM 事件同时触发 C# 和 javascript 处理程序。

1。依赖事件冒泡

将按钮包裹在 div 或 span 中。将 javascript onclick 放在包含的 div 或 span 上,并将 C# onclick 放在按钮上。

<div onclick="console.log('Showing event from Js: ' + event)>
<button @onclick="Test">Test</button>
</div>

除了鼠标事件和大多数按键事件之外,DOM 还会冒泡选择、更改和其他一些事件


2。使用事件监听器

您可以通过像往常一样将 C# 放置为内联属性,但将 javascript 添加为事件侦听器,让 JS 和 C# 触发同一个 DOM 事件。

例如在 App.razor_Host.cshtml

<body>

的底部
    <script src="_framework/blazor.web.js"></script>
    <script>        
        document.addEventListener("click", function(e){
            if (e.target.id !== "testButton")return
            console.log("You clicked ", e.target.innerText)
            })

您可能需要查找“如何将事件侦听器添加到动态生成的元素。”


3.使用“足够好”的备用活动

内联,具有不同程度的正确性,有时您可以使用“备用”JavaScript 事件,其中几个事件几乎同时在同一元素上触发:

<input @onchanged="Test" onblur="javascript:…" />
<input @oninput="Test" onkeyup="javascript:…" />
<select @onchanged="Test" oninput="javascript:…">...</select>
<select @bind="Test" oninput="javascript:…">...</select>
<button @onclick="Test" onmouseup="javascript:…">...</button>
© www.soinside.com 2019 - 2024. All rights reserved.