Ссылка Blazor - отключить href, если есть метод onclick - PullRequest
Новая
       26

Ссылка Blazor - отключить href, если есть метод onclick

2 голосов
/ 17 мая 2019

В Blazor у меня есть элемент <a>, который имеет метод href и onclick: 

<a href="" onclick="@(() => ChangePage(_someObject))">Test</a>

onclick вызывает этот метод: 

  private bool ChangePage(object objectToDisplay)
  {
    _currentObject = objectToDisplay;
    StateHasChanged();

    return false;
  }

Обычно в JavaScript, возвращая false из метода события останавливает последующую навигацию по ссылке в href, но, похоже, это не работает с моим кодом выше.

Как я могу остановить Blazor, меняющий страницу на корневой URL после нажатия на ссылку?

(Очевидный ответ здесь состоит в том, чтобы полностью удалить href, но я использую ссылку в Таблетке начальной загрузки, и удаление href останавливает работу Таблеток)

Другие вещи, которые я пробовал, не работали:

  • Изменение элемента <a> на span и установка атрибута data-target, но это останавливает правильное отображение Pills.
  • Добавление return в событие onclick (согласно этого ответа ): onclick="return @(() => ChangePage(_overviewModel))", но это не компилируется.
  • Добавление return после события onclick: onclick="@(() => ChangePage(_overviewModel)); return false;", но оно также не компилируется.
  • с использованием компонента Blazor NavLink <NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>

Записка о принятом ответе

«Правильный» способ справиться с href, которые не ссылаются на URL, - это длинная и широко обсуждаемая тема и, как справедливо отмечает @Issac в комментариях, полагаясь на решение, которое затем использование JavaScript в значительной степени является противоположностью цели для Blazor.

К счастью, согласно ответу Криса, необходимость в этом должна исчезнуть с .NET Core 3 Preview 6. Как только это станет доступным, правильным способом обработки этого сценария будет использование атрибутов Blazor для остановки распространения события. Это скорее всего будет выглядеть примерно так : 

<a href="" onclick="@SomeAction" onclick-prevent-default="true" />

Ответы [ 2 ]

2 голосов
/ 17 мая 2019

Вы можете попробовать добавить метод javascript void в href.

<a href="javascript: void(0);" onclick="@(() => ChangePage(_someObject))">Test</a>

2 голосов
/ 17 мая 2019

В настоящее время вы не можете контролировать распространение событий в Blazor. Эта функция будет доступна в следующем предварительном просмотре, а именно в предварительном просмотре 6. Соответствующую проблему вы можете увидеть на GitHub, https://github.com/aspnet/AspNetCore/issues/5545.

Как вы выяснили, таблетки в начальной загрузке оформлены на основе используемых элементов, поэтому перестановка тега для другого приводит к поломке.

Я думаю, что сейчас вы можете либо дождаться предварительного просмотра 6, либо самостоятельно переписать таблетки.

...