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

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.

推荐答案

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

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屋！