Как добавить хэш и инициировать обратную передачу одним щелчком элемента <a> веб-формы ASP.net?

Question

Я бы хотел щелкнуть элемент, чтобы добавить хэш к URL-адресу, а затем инициировать обратную передачу, но я могу получить только тот или иной случай.

Нажатие на элемент с атрибутом onserverclick инициирует обратную передачу, но не добавляет хэш.

<a href="#message" class="anchorButton" onserverclick="BackwardsPost" id="subAnchor" runat="server">Submit</a> 

Щелчок на элементе без onserverclick атрибута приводит к хэш, который будет добавлен к URL, но не постбэк не происходит.

<a href="#message" class="anchorButton" id="subAnchor" runat="server">Submit</a> 

Моя цель состоит в том, чтобы отобразить другой элемент, за счет использования селектора псевдо целевой CSS, как только пользователь нажимает на элемент и имеют тот же щелчок инициирует обратную передачу. Я знаю, что JavaScript является подходящим инструментом для этой задачи, но это не вариант.

Вот элемент Я хочу установить видимый с селектором целевыми псевдо:

<p class="targetMessage" id="message">Insert text here.</p> 

и вот классы CSS я использую:

.targetMessage { 
    display: none; 
} 

.targetMessage:target { 
     display: block; 
     color: red; 
} 

Я также рассматривал использование метатег html для автоматического обновления страницы при сохранении состояния страницы в состоянии сеанса; заставляя страницу перезагружаться сообщением по щелчку пользователя, а затем автоматически обновлять через несколько секунд, чтобы выполнить фактическую работу, но я бы предпочел не использовать эту опцию.

Ваш вход оценивается. Спасибо!

Answer 1

Поскольку ваше желаемое использование href, кажется, конфликтовать с тем, как ASP.NET делает управление, когда onserverclick определена, я хотел бы предложить альтернативный подход, который не опирается на анкер href.

Если вы открыты для перемещения сообщения в разметке, вы можете использовать селектор родственного в сочетании с :focus псевдо-классом, чтобы показать сообщение, когда нажата ссылка:

.targetMessage { 
 
    display: none; 
 
} 
 
.anchorButton:focus + .targetMessage { 
 
    display: block; 
 
    color: red; 
 
}

<a href="#" class="anchorButton" id="subAnchor">Submit</a> 
 
<p class="targetMessage" id="message">Insert text here.</p>

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