C# - Blazor @onlick 如何让 HTML 元素被点击 [英] C# - Blazor @onlick how to get HTML element clicked on

问题描述

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

I am currently learning C# Blazor framework and I am faced with question, how to get HTML element I clicked on?

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

I need it to get it's position in DOM and in parent HTML element.

例如，JQuery 的经典方式:

For example, classic way with JQuery:

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

http://jsfiddle.net/bCTAH/

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

I know, that there is @onclick attribute in Blazor, for example:

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

@functions {
    ElementReference inputTypeFileElement;

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

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

How can I get index of TR HTML element that was clicked on?

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

My task is convert Windows Form app to Web-version. The old Windows Form has DataGridView, each row of that has onClick event and Tag Object too. When some of row of the DataGridView clicked, onClick get's Tag Object of the row and used it to fill data to another DataGridView's on the form. So, I need to know, what row clicked to get data from some object (it can be DataTable, or, to be more simply, Array). Based on index of row and index in Array, I need to get data for filling another tables on Web Page.

所以，第一个表是客户(姓名、姓氏等...).

So, first table is Clients (name, surname, etc...).

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

When some of row with Client has been clicked, I need to get row (Client) index in the table. By that index I'll get data from Array of Clients. By found Client object I plan to fill another tables on the page dynamically.

推荐答案

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

In this case, you can use JSInterop

或

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

@code {
    ElementReference inputTypeFileElement;

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

这篇关于C# - Blazor @onlick 如何让 HTML 元素被点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！