Это немного "хакерский", но чем больше я его убираю, тем менее очевидным становится то, что он делает:
<body>
<form id="form1" runat="server">
<table>
<asp:Repeater runat="server" ID="MyRepeater">
<ItemTemplate>
<tr>
<td>
<asp:TextBox runat="server" Text="Some value"
CssClass="js-changeBackgroundColor" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(".js-changeBackgroundColor").on("input", function () {
this.style.backgroundColor = "green";
});
</script>
</body>
Сначала мы добавляем класс CSS - js-changeBackgroundColorк каждому из текстовых полей на стороне сервера.Поэтому, когда каждый из них отображается, он будет содержать этот атрибут:
class="js-changeBackgroundColor"
Использование класса CSS для «маркировки» элементов (вместо фактического применения стилей) может быть устаревшим.Скорее всего, вы можете сделать то же самое с другим атрибутом.Но префикс js- указывает, что класс предназначен для этой цели.(Префикс на самом деле ничего не делает - это просто соглашение, чтобы человек, читающий код, мог видеть разницу.)
Затем мы добавляем jQuery на страницу:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Наконец, мы выполняем скрипт, который говорит, найти все элементы этого класса и добавить к ним обработчик событий.Когда вызывается событие «input», измените цвет фона на зеленый:
<script>
$(".js-changeBackgroundColor").on("input",
function() {
this.style.backgroundColor = "green";
});
</script>
Это вряд ли отполировано, но вы можете увидеть это как введение в то, как смешивать код на стороне сервера и на стороне клиентабез того, чтобы они наступали друг на друга.
Хотя они все еще немного наступают друг на друга.Код на стороне сервера не «знает», что код на стороне клиента изменил цвет фона.Поэтому, если вы выполните обратную передачу, цвет фона вернется к тому, что был.