шаблони gridview

До сих пір в прикладах елемент управління DataGrid використовувався для відображення даних за допомогою окремо прив'язаних стовпців для кожного поля. Якщо потрібно помістити множинні значення в одну клітинку або мати необмежені можливості настройки вмісту комірки, додаючи HTML-дескриптори і серверні елементи управління, то для цього потрібно застосовувати стовпець типу TemplateField.

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

Наприклад, припустимо, що необхідно створити стовпець, який комбінує поля імені і прізвища співробітника з тестової бази даних Northwind. Щоб виконати такий трюк, можна сконструювати приблизно такий TemplateField:

Якщо тепер прив'язати GridView, він витягне інформацію з джерела даних і пройде по колекції елементів. Він опрацює ItemTemplate для кожного елемента, вирахує вираження прив'язки даних і додасть сгенерированную HTML-розмітку до таблиці. Цей шаблон досить простий - він всього лише визначає два вирази прив'язки даних. Після обчислення ці вирази перетворюються в звичайний текст:

шаблони gridview

Як ви помітили, в цих висловлюваннях використовується Eval () - статичний метод класу DataBinder. Присутність Eval (одночасно) відбувся обов'язково - він автоматично витягує елемент даних, прив'язаний до поточної рядку, використовує рефлексію для знаходження відповідного поля (для об'єкта DataRow) або властивості (для призначеного для користувача об'єкта даних) і витягує значення. Процес рефлексії додає трохи роботи. Однак малоймовірно, що ці накладні витрати набагато збільшать час обробки запиту.

Якщо ви спробуєте прив'язати поле, яке відсутнє в результуючому наборі, то отримаєте помилку часу виконання. Якщо ви витягнете додаткові поля, які не будуть прив'язані до жодного шаблону, ніяких проблем не виникне.

При виконанні прив'язки SqlDataSource в режимі DataSet елементом даних є DataRowView. Коли SqlDataSource прив'язується в режимі DataReader, елементом даних буде DbDataRecord.

Метод Eval () також додає виключно корисну можливість форматувати поля даних "на льоту". Щоб використовувати цей засіб, знадобиться перевантажити версію методу Eval (), яка прийме додатковий параметр - форматну рядок.

Шаблонні стовпці можна змішувати за допомогою стовпців інших типів, як показано в попередньому прикладі. Або ж можна позбутися від усіх інших стовпців і помістити інформацію з таблиці Employees в форматований шаблон:

Результат показаний на малюнку:

шаблони gridview

Використання множинних шаблонів

У попередньому прикладі застосовувався окремий шаблон для конфігурації зовнішнього вигляду елемента даних. Однак ItemTemplate - не єдиний шаблон, який пропонує GridView. Фактично GridView дозволяє конфігурувати різні аспекти свого зовнішнього вигляду за допомогою безлічі шаблонів. Усередині кожної шаблонного стовпця можна використовувати шаблони, описані в таблиці нижче:

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

З усіх шаблонів, перерахованих в таблиці, EditItemTemplate є одним з найбільш корисних, оскільки він надає можливість керувати поведінкою поля при редагуванні. Якщо ви не використовуєте шаблонні стовпці, то обмежені простими текстовими полями, без будь-якої перевірки достовірності. GridView також визначає два шаблони, які можна застосовувати поза стовпців. Це шаблон PagerTemplate. що дозволяє настроїти зовнішній вигляд елементів управління сторінками, і EmptyDataTemplate. дозволяє бачити вміст, який буде відображено, якщо GridView буде прив'язаний до порожнього об'єкту даних.

прив'язка методу

Одна з переваг шаблонів полягає в тому, що вони дозволяють використовувати вирази прив'язки даних, які розширюють можливості форматування та подання прив'язаних даних. Один з ключових прийомів, який виникає в багатьох сценаріях - це застосування методу класу сторінки для обробки значення поля. Це скасовує обмеження простий прив'язки даних і дозволяє включити динамічну інформацію і умовну логіку.

Наприклад, припустимо, що необхідно створити стовпець, в якому поряд з кожним рядком буде відображатися значок. Однак ви не хочете використовувати статичний значок. Замість цього зображення повинне вибиратися на основі даних рядка. На малюнку нижче показаний приклад, в якому позначки ставляться біля продуктів, які є на складі:

шаблони gridview

Ось як можна визначити стовпець стану і джерело даних:

Такий прийом застосовується в багатьох сценаріях. Наприклад, його можна використовувати для коригування цін відповідно до поточного курсу валют або ж для перекладу числового коду в більш осмислений фрагмент тексту. Можна навіть створювати повністю обчислювані стовпці - наприклад, застосовувати поле EmployeeDateOfBirth (дата народження співробітника) для обчислення значення стовпця EmployeeAge (вік співробітника).

За допомогою такого підходу в розглянутому прикладі можна встановити атрибут alt дескриптора . Це дозволить вказати альтернативний текст, який дасть більш осмислене опис (таке як ОК або Cancel), що відбиває стан відповідного об'єкта.

Обробка подій в шаблоні

У деяких випадках знадобиться обробляти події, ініційовані органами управління, які додаються до шаблонного колонки. Наприклад, припустимо, що попередній приклад змінений таким чином, що замість показу статичного значка стану він створює посилання у вигляді активного зображення за допомогою елемента управління ImageButton. Досягти цього досить просто:

Проблема в тому, що при додаванні елемента управління до шаблону, GridView створює безліч копій цього елемента управління - по одній для кожного елемента даних. Коли виконується клацання на ImageButton, необхідний спосіб визначення, на якому саме екземплярі зображення він був здійснений, і до якого рядка він відноситься.

Спосіб вирішення цієї проблеми полягає у використанні події GridView, а не події кнопки, яку він містить. Для цієї мети служить подія GridView.RowCommand, тому що воно ініціюється при натисканні на будь-якій кнопці в будь-якому шаблоні. Процес, коли подія елемента управління в шаблоні перетворюється на подію містить його елемента управління, називається бульбашковим поширенням подій.

Зрозуміло, вам все ще потрібен спосіб передачі інформації події RowCommand для ідентифікації рядки, в якій дія мала місце. Секрет - в двох строкових властивості всіх кнопкових елементів управління: CommandName і CommandArguments. У CommandName встановлюється описову назву, яке можна використовувати для того, щоб відрізнити клацання на ImageButton від клацань на інших кнопкових елементах управління в GridView. У CommandArguments вказується фрагмент специфічних для рядка даних, які можна використовувати для ідентифікації рядки, де був виконаний клацання. Передати цю інформацію можна з використанням виразу прив'язки даних.

Нижче показано шаблонне поле, що містить змінений дескриптор ImageButton:

А ось код, необхідний для реагування на клацання на ImageButton:

Наведений приклад просто відображає ProductID всередині мітки Label1.

Пам'ятайте, що за рахунок використання вбудованої в GridView підтримки вибору рядків ви можете полегшити собі життя. Просто встановіть CommandName в Select і обробляйте подія SelectIndexChanged, як було описано в статті "Вибір рядків". Хоча цей підхід забезпечує простий доступ до рядка, на якій виконаний клацання, він не допоможе, якщо ви хочете надати безліч кнопок, які вирішують різні завдання.

Редагування за допомогою шаблону

Одним з головних аргументів на користь застосування шаблонів є забезпечення розширених можливостей редагування. Раніше було показано, як GridView підтримує автоматичні можливості редагування. Все, що для цього знадобиться - переключити рядок в режим редагування, встановивши властивість GridView.EditItemIndex.

Найпростіший спосіб зробити це можливим - додати стовпець CommandFieId з властивістю ShowEditButton. встановленим в true (або встановити властивість GridView.AutoGenerateEditButton в true). У будь-якому випадку ви прийдете до виділеного одну, використовуваному для відображення команд редагування. Спочатку цей стовпець буде відображати посилання на ім'я Edit (Правка) поряд з кожним записом. Коли користувач клацає на цим посиланням, все мітки у всіх стовпцях рядка замінюються текстовими полями (якщо тільки вони не є доступними лише для читання).

Стандартної підтримки редагування притаманні деякі обмеження:

Не завжди доцільно редагувати значення в текстових полях. Деякі типи даних краще обробляються іншими елементами управління (наприклад, розкриваються списками), великі поля вимагають багаторядкових текстових областей і т.д.

Немає ніякої перевірки достовірності. Було б непогано обмежити можливості редагування таким чином, щоб не можна було вводити негативні грошові значення і т.п. Це можна зробити, додаючи елементи управління перевіркою достовірності до шаблону EditItemTemplate.

Часто це виглядає непривабливо. Рядок текстових полів поверх екранної таблиці вимагає занадто багато місця і рідко виглядає професійно.

У шаблонних шпальтах всього цього немає. Натомість ви явно визначаєте редагують елементи управління і їх компонування з використанням шаблону EditItemTemplate. Цей процес може виявитися досить трудомістким.

Нижче показаний шаблон редагування, який дозволяє редагування окремого поля - поля Notes (видозмінений перший приклад):

Прив'язуючи редагується значення до елементу управління, замість звичайного методу Eval () в вираженні прив'язки даних слід застосовувати метод Bind (). Тільки метод Bind () створює двосторонню посилання, гарантуючи, що оновлені значення будуть відправлені сервера.

Інший важливий факт, який необхідно мати на увазі - коли GridView фіксує оновлення, то робить це тільки з прив'язаними, редагуються параметрами. У попередньому прикладі це означає, що GridView відправить назад єдиний параметр @Notes для поля Notes. Це важливо, тому що коли ви пишете параметризрвані команди оновлення (в разі застосування SqlDataSource), то повинні використовувати лише один параметр, як показано тут:

Аналогічно, якщо ви використовуєте ObjectDataSource, то повинні переконатися в тому, що метод поновлення приймає тільки один параметр на ім'я Notes. На малюнку показана рядок в режимі редагування:

шаблони gridview

Редагування за допомогою розширених елементів управління

Перевага редагування на основі шаблонів особливо проявляється, коли потрібно прив'язати більш складні елементи управління, такі як списки. Наприклад, попередній приклад можна змінити, зробивши поле TitleOfCourtesy редагується через список, що розкривається. Ось шаблон, який знадобиться для цього:

Цей шаблон дає можливість користувачу вибирати титул для ввічливого поводження з обмеженого набору допустимих. Щоб створити цей список, доведеться вдатися до невеликого трюку - встановити в DropDownList.DataSource вираз прив'язки даних, що вказує на призначене для користувача властивість. Це властивість може потім повертати відповідний джерело даних можливих титулів. Нижче наведено визначення властивості TitleOfCourtesy в класі веб-сторінки:

Цей крок забезпечує наповнення списку, але не вирішує пов'язану проблему з вихідним вибором правильного титулу в списку для існуючого значення поля. Кращий підхід полягає в прив'язці SelectedIndex до призначеного для користувача методу, який приймає поточний титул і повертає індекс його значення в списку. В даному прикладі це завдання виконує метод GetSelectedTitle (). Він приймає титул на вході і повертає індекс відповідного значення в масиві, повернутому TitlesOfCourtesy:

Цей код здійснює пошук в масиві з використанням статичного методу Array.IndexOf (). Зверніть увагу на необхідність явного приведення титулу до строковому типу. Це пояснюється тим, що метод DataBinder.Eval () повертає об'єкт, а не рядок, і це значення передається методу GetSelectedTitle (). На малюнку нижче показаний список, що розкривається в дії:

шаблони gridview

На жаль, на цьому приклад все ще не завершений. Тепер ви маєте вікно списку, наповнене в режимі редагування з автоматично обраним правильним елементом. Однак якщо ви зміните вибір, значення не буде відправлено назад джерела даних. У цьому прикладі можна спробувати вирішити проблему, використовуючи метод Bind () з властивістю SelectedValue, оскільки текст в елементі управління в точності відповідає тексту, який потрібно внести до запису.

Однак іноді справи йдуть не так просто, і потрібно транслювати значення в інше уявлення бази даних. У такій ситуації єдиний вибір - обробити подія RowUpdating, знайти списковий елемент управління в поточному рядку і витягти текст. Потім можна динамічно додати додаткові параметри, як показано нижче:

UpdateCommand в SqlDataSource також слід оновити для використання параметра @TitleOfCourtesy:

Тепер успішно оновляться обидва поля - Notes і TitleOfCourtesy. Як бачите, редаговані шаблони надають значні можливості, але іноді їх довго кодувати.

Схожі статті