Как я могу получить свойство css элемента, который щелкнул в Blazor?

Question

Вот некоторые A элементы на стороне сервера Blazor:

<div>
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
<a href="javascript:void(0)" class="Add" @onclick="SingleAddClick">
</div>

Все позиции элементов A выше абсолютны. Left и Top отличаются от каждого элемента A.

Теперь, когда щелкают по элементу A, я хочу получить Left и Top его позиции.

Мне нужно передать объект js из метода. Net в метод JS с помощью JS interop, хотя я не знаю, как получить объект JS в методе. Net.

Как этого добиться?

Спасибо.

Answer 1

Вы можете записать ссылку на свой элемент следующим образом:

<a @ref="anchorElement" href="javascript:void(0)" class="Add" 
                                                @onclick="SingleAddClick"> 

@code
{
    private ElementReference anchorElement;
}

Теперь вы можете вызвать метод JSInterop и передать ему ссылку на элемент. Вы должны использовать его в своем методе JS, как если бы он был получен методом getElementById.

Примечание. Вы не должны использовать JavaScript в Blazor. Используйте @onclick:preventDefault вместо href="javascript:void(0)"

Надеюсь, это поможет! Если вы застряли, дайте мне знать

Answer 2

Для того, чтобы идентифицировать left и top , вам необходимо предоставить уникальный идентификатор (uid) для каждого тега привязки. Ваш uid может быть ElementReference или просто статическим c (жестко заданным) именем. С помощью этого uid вы можете определить, откуда возникает событие, а затем искать его в dom, чтобы найти относительную позицию относительно области просмотра.

Ниже приведены изменения, которые вам нужно будет сделать, чтобы получить элементы слева и сверху позиции.

Razor Component

@inject IJSRuntime JSRuntime // need to inject IJSRuntime to invoke a JavaScript function.

<a id="anchor1" href="" class="Add" @onclick='() => SingleAddClick("anchor1")' @onclick:preventDefault>

@code{

    private async Task SingleAddClick(string clickedElementId)
    {
        //your existing code

        // call the javacript method that will be returing something.
        var dimensions = await JSRuntime.InvokeAsync<string>("getDimensions", clickedElementId);

        // I've used a dynamic type object so that I don't need to create a custom class to desealize it.
        dynamic d = Newtonsoft.Json.JsonConvert.DeserializeObject<dynamic>(dimensions);

        // Since I've used dynamic keyword thus the type will get resolved at runtime. 
        // Will throw exception if d is null thus need to be handled properly.
        string top = d.top;
        string left = d.left;
    }
}

JS Библиотека

Если вы используете какой-либо существующий файл js для службы взаимодействия, добавьте ниже метод javascript, иначе создайте новый файл js и укажите его в _host.

function getDimensions(element) {
    return JSON.stringify(document.getElementById(element).getBoundingClientRect());
}

Примечание. Метод getBoundingClientRect () возвращает размер элемента и его положение относительно области просмотра.