Как выбрать элемент Классом вместо идентификатора в ASP.NET?
Я имею, некоторые рассеялись <p> элементы на aspx странице, как которая я группируюсь с помощью класса так - <p class="instructions" runat="server">
В моем коде позади, с помощью C# я хочу скрыть эти элементы, с помощью чего-то как instructions.Visible = false;
Однако я понимаю, что могу только сделать это в codebehind, если я использую идентификатор, но это приведет к недопустимому Селектору HTML/CSS, так как у Вас не может быть нескольких идентификатор с тем же идентификационным названием...
Кроме того, там другой путь состоит в том, чтобы сгруппировать средства управления если не классом?
Править: Я не могу использовать JavaScript, таким образом, выбор должен быть сделан в C# codebehind/ASP.NET
7 ответов
Помимо группировки всех элементов управления в один контейнерный элемент управления, нет простого способа найти группу элементов управления с учетом некоторого свойства на сервере ASP.NET. -сторонний код.
На стороне клиента вы можете использовать что-то вроде jQuery , чтобы найти эти элементы и скрыть их:
$(".instructions").hide();
Я бы, вероятно, сделал это в ответ, когда страница полностью загружена:
$(document).ready(function() {
$(".instructions").hide();
});
Один недостаток скрытие элементов в Javascript заключается в том, что если данных достаточно, это может занять секунду и вызвать мерцание содержимого. Другое отличие состоит в том, что скрытие содержимого на стороне клиента не удаляет его из DOM - содержимое там просто скрыто. Скрытие элементов управления на стороне сервера предотвращает передачу их содержимого в HTML.
Сделать то же самое в C # немного сложнее - это требует рекурсивного обхода дерева элементов управления и поиска соответствующих элементов в коллекции Control . Это достаточно распространенная операция, поэтому полезная функция может оказаться полезной. Синтаксис итератора C # (yield return) помогает сделать это чистым:
// utility method to recursively find controls matching a predicate
IEnumerable<Control> FindRecursive( Control c, Func<Control,bool> predicate )
{
if( predicate( c ) )
yield return c;
foreach( var child in c.Controls )
{
if( predicate( c ) )
yield return c;
}
foreach( var child in c.Controls )
foreach( var match in FindRecursive( c, predicate ) )
yield return match;
}
// use the utility method to find matching controls...
FindRecursive( Page, c => (c is WebControl) &&
((WebControl)c).CssClass == "instructions" );
Скрыть элементы управления теперь относительно просто:
foreach( WebControl c in FindRecursive( Page, c => (c is WebControl) &&
((WebControl)c).CssClass == "instructions" ) )
{
c.Visible = false;
}
Дело обстоит довольно просто. В вашем ASPX:
<p class="instructions" runat="server" OnPreRender="Paragraph_PreRender">
В вашем codebehind:
protected void Paragraph_PreRender(object sender; EventArgs e)
{
Control paragraph = (Control)sender;
paragraph.Visible = !paragraph.CssClass.Contains("instructions");
}
Codebehind будет автоматически подключен к обработчику события PreRender в вашем классе. Это приведет отправителя к элементу управления и установит его Visibility в зависимости от класса css. Вам просто нужно настроить теги, и вам не нужно много кода, перемещающегося по вашей коллекции элементов управления.
Основываясь на решении Sebastian P.R. Gingter, вот что я сделал, хотя это все еще кажется немного хаком, учитывая, что я должен использовать MS-based WebControl вместо того, чтобы выбрать более простой HTML-контроль.
В C#:
protected void Paragraph_PreRender(object sender, EventArgs e)
{
WebControl paragraph = (WebControl)sender;
paragraph.Visible = !paragraph.CssClass.Contains("instructions");
}
В aspx:
<asp:Label ID="Label1" CssClass="instructions" runat="server" Text="Label" onPreRender="Paragraph_PreRender"></asp:Label>
Можно создать рекурсивную функцию для просмотра массива элементов управления страницы, проверяя атрибут CssClass для каждого элемента управления и устанавливая его по мере необходимости.
Вы можете использовать JQuery Class Name Selector для этой цели.
Другое решение - сохранить одинаковые идентификаторы и не делать элементы управления на стороне сервера. В JavaScript используйте document.getElementById для получения элементов управления, в вашем случае вы получите массив, который будет содержать все элементы управления с одинаковыми идентификаторами. Переберите эти элементы управления и установите их атрибуты отображения соответствующим образом.
Вы можете поместить их все внутрь панели, если они последовательно расположены в вашей форме. Таким образом, вы можете легко переключать свойство .Visible панели, чтобы скрыть части формы.
JavaScript подход
Вы можете использовать ClientScriptManager.RegisterStartupScript() для эмиссии JavaScript, а затем использовать jQuery для скрытия по классам.
Если вы включаете ядро JQuery, все, что вам нужно сделать, это зарегистрировать этот скрипт на своей странице:
<script>
$(document).ready(function() {
$(".instructions").hide();
});
</script>
Он использует селектор классов JQuery http://api.jquery.com/class-selector/