只能有1个onclick属性,所以要么从JS调用C##方法,要么从C#调用JS代码。在这两种情况下,您都需要互操作,但不支持以您尝试的方式组合它。
“Test()”函数自动执行
是的,在
onclick="... @Test()"
中,它是在页面呈现时执行的,而不是在单击按钮时执行的。
您可以通过 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>