Чистіша HTML-розмітка в ASP.NET 4 Web Forms

Це шістнадцята стаття з серії, присвяченій майбутньому виходу VS 2010 і. NET 4.


Сьогоднішній пост перший із серії, що розповідає про важливі зміни, які ми виробили з Web Forms в ASP.NET 4 для генерації чистої, відповідної стандартам CSS-дружньої розмітки. Сьогодні я розповім про виконану нами роботу, для надання кращого контролю над атрибутом “ID”, генерований серверними елементами управління для клієнта.


Генерація чистою, відповідною стандартам CSS-дружньої розмітки


Однією з найпоширеніших скарг розробників була неможливість генерувати нормальну верстку для серверних елементів управління в ASP.NET Web Forms. Ось список конкретних проблем в попередніх версія ASP.NET:



ASP.NET 4 надає поліпшену підтримку побудови відповідну стандартам сторінки прямо з коробки. Тепер, вбудований серверний елемент управління в ASP.NET 4 генерує більш чисту розмітку і підтримує CSS стилізацію, що позбавляє від всіх вищеперелічених проблем.



Сумісність розмітки під час оновлення існуючих ASP.NET Web Forms додатків


Частим питанням, яке задають люди, коли чують про більш чистої розмітці, що з’явилася в ASP.NET 4 – “Чудово, а що тепер буде з моїми існуючими додатками? Дані нововведення все зламають, коли я оновлення даних для проект? “


Щоб ви були впевнені про незмінність верстки і стилізації в існуючих ASP.NET Web Forms додатках, ми додали конфігураційний прапор – controlRenderingCompatbilityVersion, в web.config, який дозволяє вам вирішити, яку версію генератора розмітки використовувати:


image


Коли прапор controlRenderingCompatbilityVersion встановлений в “3.5”, ваш додаток і серверні елементи управління за замовчуванням отрісовиваємих розмітку соответствующую.NET 3.5. Коли прапор controlRenderingCompatbilityVersion встановлений в “4.0”, ваш додаток і серверні елементи управління генерують семантичну розмітку, відповідну стандарту XHTML 1.1, більш чисті клієнтські ID, а також відсутні сторонні рядкові стилі.


За замовчуванням, даний прапор дорівнює 4.0 для всіх нових ASP.NET Web Forms додатків, побудованих з використанням ASP.NET 4. Для всіх інших, більш ранніх додатків, які оновлюються за допомогою VS 2010 ми автоматично встановлюємо прапор controlRenderingCompatbilityVersion в 3.5. Пізніше, ви з легкістю зможете змінити його значення, як на рівні всього додатку, так і у файлі web.config окремо для кожної сторінки або для всієї директорії.


Клієнтський ID


Можливість мати чистий, передбачуваний атрибут ID у генерується HTML елемента – це те, що просили розробники довгий час для Web Forms (значення ID, типу “ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1” не особливо популярні). Володіючи контролем над значенням ID, вам стає простіше писати JavaScript, використовувати CSS, а також зменшити кількість розмітки на великих сторінках.


Нове властивість для елементів управління ClientIDMode

ASP.NET 4 підтримує нову властивість ClientIdMode в базовому класі Control. Властивість ClientIdMode указвают, як елемент управління повинен генерувати клієнтський ID. Властивість ClientIdMode підтримує чотири можливих значення:



Властивість ClientIDMode може бути встановлено безпосередньо будь-якого елементу управління або в контейнері і тоді внутрішні елементи будуть з успадкованими настройками:


image


Або воно може бути задано на рівні всієї сторінки, використовуючи директиви <% @ Page%> або <% @ Control%>, в даному випадку елементи керування всередині сторінки або користувача елементу управління спадщини налаштування і можуть опціонально їх перевантажувати.


image


Або його можна встановити в web.config додатки, в даному випадку сторінки в додатку успадкують налаштування і, так само, можуть перевантажити їх.


image

Все це дає вам гнучкість в налаштування або перевантаженні поведінки іменування так, як ви цього хочете.


Приклад: використання властивості ClientIdMode для не списковому елементів управління


Давайте поглянемо, як ви можете використовувати нової властивість ClientIdMode для елементів управління на сторінці, задаючи “ID”. Для демонстрування ми створимо просту сторінку, назвемо її “SingleControlExample.aspx”, яка заснована на master-page “Site.Master”, і містить один елемент з ID “Message”, що знаходиться в з ім’ям “MainContent”:


image


У нашому code-behind файлі додамо простий код, як показано нижче, для завдання тексту Label динамічно:


image


Якщо ми запускаємо додаток, використовуючи ASP.NET 3.5 або ми налаштували ASP.NET 4 додаток використовувати отрисовку з версії 3.5, або встановили ClientIdMode = AutoID, тоді згенерувала розмітка, відіслана клієнтові, буде виглядати наступним чином:


image


ID є унікальним, що добре, але потворним через “ctl100” префікса, що не особливо радує.


Генерація розмітки, коли ClientIdModel встановлений в “Predictable”

З ASP.NET 4, серверні елементи управління за замовчуванням генеруються, використовуючи ClientIdMode = “Predictable”. Це дозволяє бути впевненим, що всі значення ID унікальні і на сторінці відсутні конфлікти, в теж час ID менш багатослівний і більш передбачуваний. Це означає, що згенерувала розмітка елемента керування за замовчуванням, в ASP.NET 4, буде виглядати наступним чином:


image


Зверніть увагу, префікс “ct100” зник. Так як елемент управління “Message” знаходиться в контейнері “MainContent”, за замовчуванням, його ID буде забезпечений префіксом “MainContent_Message” для запобігання потенційних колізій з іншими елементами управління на сторінці.


Генерація розмітки, коли ClientIdModel встановлений в “Static”

Іноді ви не хочете, щоб значення ID не були вкладено ієрархічними, а просто йшли з тим значенням, яке ми бажаємо встановити:


image


Все це дає нам можливість повністю контролювати значення клієнтського ID елементів управління.


Приклад: використання властивості ClientIdMode для списків пов’язаних з даними


Пов’язані з даними списки або гріди історично було складно використовувати або налаштовувати стилі, коли працювали з автоматично генеруються ID в Web Forms. Тепер давайте поглянемо на сценарій, де ми налаштуємо ID для ListView в ASP.NET 4.


Нижче представлений фрагмент коду ListView, який відображає вміст із зв’язаної колекції, в нашому випадку аеропортів:


image


Далі ми можемо написати код в code-behind файлі для динамічного зв’язування списку аеропортів з ListView:


image


Під час виконання список за замовчуванням буде виглядати, як