Більше чиста 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, який дозволяє вам вирішити, яку версію генератора розмітки використовувати:



Коли прапор 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 може бути встановлено безпосередньо будь-якого елементу управління або в контейнері і тоді внутрішні елементи будуть з успадкованими настройками:



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



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



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


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


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



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



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



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


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

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



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


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

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



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


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


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


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



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



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