C# - Blazor @onlick 如何单击 HTML 元素

Question

我目前正在学习 C# Blazor 框架，我面临着一个问题，如何获取我点击的 HTML 元素？

我需要它来获取它在 DOM 和父 HTML 元素中的位置。

例如，使用 JQuery 的经典方法:

$('selector').click(function (event) {
    alert($(this).index());
});

http://jsfiddle.net/bCTAh/

我知道，Blazor 中有 @onclick 属性，例如:

<tr @onclick="OnYes">...</tr>

@functions {
    ElementReference inputTypeFileElement;

    public async Task MainTableOnClick(MouseEventArgs e)
    {
        Console.WriteLine("clicked!");
    }
}

如何获取被点击的 TR HTML 元素的索引？

我的任务是将Windows Form应用程序转换为Web版本。旧的Windows窗体有DataGridView，它的每一行也有onClick事件和Tag对象。当单击 DataGridView 的某些行时，onClick 获取该行的标记对象，并使用它将数据填充到表单上的另一个 DataGridView。因此，我需要知道单击哪一行来从某个对象获取数据(可以是 DataTable，或者更简单地说，Array)。基于行的索引和数组中的索引，我需要获取数据来填充网页上的另一个表。

因此，第一个表是客户(姓名、姓氏等...)。

当单击带有客户端的某些行时，我需要获取表中的行(客户端)索引。通过该索引，我将从客户端数组中获取数据。通过找到 Client 对象，我计划动态填充页面上的另一个表格。

Answer 1

在这种情况下，您可以使用 JSInterop

或者

<tr @onclick="() => TrClickedAtIndex(0)">...</tr>

@code {
    ElementReference inputTypeFileElement;

    public void TrClickedAtIndex(int index)
    {
        Console.WriteLine($"tr clicked at index {index}!");
    }
}