Если нам необходимо манипулировать на клиенте разметкой с помощью JavaScript, то для получения определенного контрола, мы используем метод document.getElementById("MyControlID_example").
Но в случае с серверными элементами управления такой фокус не пройдет, поскольку для любого серверного контрола с параметром runat="server", значение свойства ID в режиме выполнения кода имеет одно значение, например "MyControlID", А на клиенте тег для данного контрола будет иметь параметр id="ct100_maincontentplaceholder_ MyControlID", или еще что похлеще.
Для получения клиентского ID любого серверного контрола следует использовать свойство ClientID. Чаще, данным свойством пользуются в разметке страницы .aspx, а не в соответствующем бихайн-коде, хотя это дело привычки.
В этом случае применяют блоки вставки выполняемого кода <%Response.Write() %>, или аналогичную сокращенную запись <%=%>.
Понимаю, сразу трудно все понять, поэтому осмыслим данную информацию на примере.
В данном примере мы поместим на веб-форму два серверных элемента управления: Image и CheckBox. По выбору CheckBox будем прятать/отображать изображение.
Поместим на форму следующую разметку:
<body>
<form id="form2" runat="server">
<asp:CheckBox runat="server" id="CheckboxHideShow"
onclick="ShowHide()" Checked="true"
ToolTip="Установите галочку если Вы хотите
скрыть изображение" />
<br />
<asp:Image ID="MyImage" runat="server"
mageUrl="~/IMAGES/someImage.jpg" />
<hr />
</form>
</body>
Имеем три элемента: CheckBox, Image и горизонтальную линию.
Для элемента CheckboxHideShow назначена клиентская функция onclick="ShowHude()", которая будет вызываться при выборе/снятии в CheckBox.
Вот и сам код функции:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
function ShowHide()
{
image_ = document.getElementById(
"<%=MyImage.ClientID %>");
checkBox_ = document.getElementById(
"<%=CheckboxHideShow.ClientID %>");
if (checkBox_.checked == true)
{
image_.style.display='block';
}
else
{
image_.style.display='none';
}
}
</script>
</head>
Как видите, записями
image_ = document.getElementById("<%=MyImage.ClientID %>");
checkBox_ = document.getElementById("<%=CheckboxHideShow.ClientID %>");
мы получаем требуемые контролы по их клиентским ID.
А дальше проверяем состояние CheckBox и, в зависимости от него, скрываем, или отображаем соответствующее изображение, применяя к нему соответствующее значение стиля:
if (checkBox_.checked == true)
{
image_.style.display='block';
}
else
{
image_.style.display='none';
}
Так мы получили не только скрытие изображения, но и скрытие области, отведенное под изображение – горизонтальная линия вплотную поднялась к CheckBox.
Если же нам требуется оставить место под картинку, тогда следует манипулировать заранее определенными пользовательскими классами стилей:
StyleSheet.css
.visibilityOn
{
visibility: visible;
}
.visibilityOff
{
visibility: hidden;
}
А в клиентской функции внести изменения:
if (checkBox_.checked == true)
{
image_.className = 'visibilityOn';
}
else
{
image_.className = 'visibilityOff';
}
Теперь наблюдаем скрытие изображения, но нижняя горизонтальная линия так и осталась на своем первоначальном месте.