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）获取数据。基于行的索引和数组中的索引，我需要获取数据以填充网页上的另一个tables。

因此，第一个 table 是客户（名字、姓氏等...）。

当某些带有客户端的行被点击时，我需要在 table 中获取行（客户端）索引。通过该索引，我将从客户数组中获取数据。通过找到客户端对象，我计划在页面上动态填充另一个 tables。

Answer 1

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

或者

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

@code {
    ElementReference inputTypeFileElement;

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

Answer 2

如果你想获取元素，你可以使用 @ref 到 return 元素，但通常在 Blazor 中你对元素不感兴趣（就像你在 JQuery) 但它们与什么有关。

我创建了这个简单的 BlazorFiddle，它在 table 中列出了三个字符串。它与其他答案类似，但它表现出一点皱纹 - 当从循环或枚举中传递一个值时，您需要分配它。

https://blazorfiddle.com/s/br8lwsl2

这显示了三个字符串的 table。当您单击一行时，它会传递来自单击行的数据项 - 而不仅仅是索引。

    int index = i;
    <tr @onclick="()=> ClickedRow(list[index])" ><td>

希望对您有所帮助

C# - Blazor @onlick 如何让 HTML 元素被点击

C# - Blazor @onlick how to get HTML element clicked on

c#

jquery

.net-core

asp.net-core

blazor