1. Вступ. , ASP.NET, ASP, статті

 

DataGrid є потужним засобом відображення даних і у своєму,
найбільш загальному застосуванні, дозволяє відобразити будь-яку таблицю з
бази даних, наприклад:

Це таблиця Employee з навчальної бази даних Pubs, що входить в MS SQL
Server. Як бачимо, DataGrid відобразив всі поля, в тому числі, поля
є ключами для зв'язку з іншими таблицями. Зокрема, поле
job_id, вказане стрілкою, містить ідентифікатори посад
працівників. Самі ж назви посад знаходяться в таблиці jobs,
є батьківського по відношенню до шуканої таблиці.

А як зробити так, щоб в DataGrid (1) відображати тільки потрібні
поля, а поле job_id (2) відображало замість цифр найменування посад.
Та щоб в режимі редагування (3) вибирати ці посади зі списку
прямо в DataGrid.

Вирішуючи цю задачу, я знайшов дивно мало прикладів з виведення в
DataGrid інформації з батьківської таблиці. Хоча, в той же час,
досить багато відомостей по відображенню записів з підпорядкованої (дочірньої)
таблиці.

Як би там не було, завдання нашу можна вирішити кількома шляхами. Я
спробую показати варіант, який вимагає мінімум коду та кілька
рухів мишки. Благо, Visual Studio.NET дозволяє це зробити. В
процесі рішення задачі будуть виконані кроки зі створення проекту, що
виявиться корисним для початківців розробників ASP.NET

2. Створення проекту

 

Отже, відкриваємо студію і на початковій сторінці вибираємо "Новий
проект ".

У діалоговому вікні вибираємо мова програмування (я вибрав зручний
мені Visual Basic), далі – тип програми. У нас це "Веб-додаток
ASP.NET ". Змінимо ім'я по замовчуванню на осмислене HierarchyDataGrid.

 

Тиснемо кнопку ОК і дивимося, як створюється проект на локальному
Веб-сервер.

Після створення проекту, в оглядач рішень виводиться список
файлів, що входять в наш проект. І бачимо, що в назві проекту я
допустив помилку. Сподіваюся, з Вами цього ніколи не станеться:).

 

 

Відразу поміняємо назву нашої сторінки з WebForm1.aspx на
default.aspx. Це важливо, особливо в разі, якщо це початкова сторінка
сайту. Двічі клацаємо по назві нашої сторінки. Відкриється чиста
форма. Все, проект створений!

3. Створення з'єднання з базою даних і настройка DataAdapter

 

Наступний наш крок – з'єднання з базою даних Pubs. Зрозуміло, для
цього повинен бути встановлений і запущений MS SQL Server2000.

Відкриємо Обозреватель серверів і знайдемо наш SQL Server з базою даних
Pubs. Розгорнувши дерево об'єктів бази, знаходимо таблиці employee і jobs.

 

 

Захопивши мишкою назва таблиці employee, перетягнемо її на форму.
VS.NET автоматично створить в невидимій частині форми з'єднання з базою
Pubs під ім'ям SqlConnection1 і DataAdapter з ім'ям SqlDataAdapter1
для роботи з таблицею employee.

Ті самі дії проробимо з таблицею jobs.

Перейменуємо новостворені об'єкти:

Потім виділимо conPubs і перейдемо у вікно властивостей. У секції
Конфігурації розкриємо DynamicProperties і у властивості ConnectionString
натиснемо кнопку. У діалоговому вікні поставимо прапорець і закриємо
його.

 

 

В результаті цієї операції рядок з'єднання у нас додалася в файл
Web.config, що дає нам прекрасну можливість конфігурувати наше
з'єднання без необхідності лізти в код. Цим ми і скористаємося.
Вперед!

Відкриваємо файл Web.config, знаходимо секцію appSettings, а в ній запис
з нашою рядком з'єднання під ім'ям ключа "conPubs.ConnectionString".
Створену редактором рядок з'єднання замінимо на показану на
зображенні, і трохи відформатуємо її для зручності читання.

 

 

Чому я це зробив? Так ми уникнемо проблем з правами доступу та
настройками SQL Server. В результаті, ми створили з'єднання і готові робити
подальші кроки.

4. Створення Dataset і DataRelation

 

Тепер ми повинні створити так званий типізований Dataset.
Клацнувши правою кнопкою мишки по зображенню будь-якого DataAdapter, в даному
випадку з назвою daJobs, в контекстному меню виберемо пункт "Створення
Dataset…".

 

 

У діалоговому вікні на додаток до таблиці jobs, буде
запропоновано додати в Dataset і таблицю employee. Відмінно! Ставимо прапорець
і натискаємо ОК.

 

 

Наш Dataset створений. У браузері рішень це файл Dataset1.xsd, а в
невидимої частини форми – об'єкт Dataset11.

 

 

Клацнемо двічі по файлу Dataset1.xsd. Відкриється схема з двома нашими
таблицями. Зв'яжемо їх по полям job_id.

 

 

Для цього відкриємо Область елементів і перетягнемо об'єкт Relation на
одну з таблиць. Відкриється діалогове вікно. Батьківським елементом ставимо
таблицю jobs, ну а дочірнім, відповідно, таблицю employee. Поле
ключа
підставиться автоматично, а поле зовнішнього ключа
після вибору дочірньої таблиці. Ім'я Relation та найменування ключа
редактор визначить автоматично.

 

 

 

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

 

 

Все! Підготовча частина закінчена. Більш-менш наближено, ми
зробили те, що необхідно робити щоразу при створенні програми,
працює з базами даних. Створили новий проект, з'єднання з БД,
налаштували DataAdapter "и, створили Dataset і відносини між таблицями.

5. Налаштування DataGrid

 

У редакторі перейдемо на сторінку default.aspx. Перетягнемо на форму
DataGrid з Області елементів. Клацанням правої кнопки миші по ньому
викличемо контекстне меню і виберемо пункт "Автоформат". У ньому виберемо
формат "Профессіональний1" і закриємо діалогове вікно. Втім, це на
ваш смак. Я ще змінив шрифт по замовчуванню на Verdana і на один пункт
зменшив його розмір.

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

 

 

Ну, а тепер будемо його налаштовувати. Зв'яжемо наш DataGrid з Dataset.
Це дуже просто. У властивостях для поля DataSource вибираємо Dataset11.
Потім полю DataMember призначаємо ім'я таблиці employee, а полю
DataKeyField – назва стовпця emp_id з таблиці employee

 

 

Наступною дією буде відкриття будівника властивостей. Клацанням миші
на DataGrid викликаємо контекстне меню і вибираємо пункт "Будівник
властивостей … "

 

 

У формі починаємо формувати наш DataGrid. Зліва виберемо
пункт "Колонки" і відразу ж знімемо прапорець з параметра "Створювати стовпці
автоматично ".

У списку "Доступні стовпці" перераховані (як Поля даних) стовпці з
таблиці employee, яка входить в наш DataSet11, а також додаткові
стовпці для управління даними в DataGrid. Наше завдання полягає в тому,
щоб вибрати потрібні для відображення стовпці. Почнемо!

Перемістимо до списку "Вибрані стовпці" такі стовпці:

Важливо дотримуватися даного порядку додавання стовпців!

Далі, додамо ще один додатковий стовпець. Він знаходиться в групі
"Стовпець кнопки" під назвою "Правка, Оновити, Скасувати".

 

 

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

 

6. Створення шаблонів поля з DropDownList

Знову викликаємо контекстне меню DataGrid і бачимо, що в ньому з'явився
пункт "Змінити шаблон". У ньому тільки одне підменю: той самий стовпець,
який ми визначили шаблоном.

 

 

Вибираємо його – відкрився редактор шаблонного стовпця. Нас у ньому
цікавлять ItemTemplate – область, що знаходиться у рядку DataGrid в
режимі відображення даних. І EditItemTemplate – відповідно в режимі
редагування. Ліва частина зображення показує шаблон до нашого
втручання. Як бачимо, ItemTemplate містить усередині label, а
EditItemTemplate – textbox. Змінимо ширину Label1, і видалимо textbox.
Замість нього з Області елементів перетягнемо DropDownList і теж налаштуємо
по ширині, беручи до уваги довжину відображуваного в ньому тексту.

 

 

Залишимо його виділеним, і у вікні властивостей виберемо DataSource,
DataMember, DataTextField і DataValueField, як показано на малюнку.

 

 

Таким чином, ми прив'язали DropDownList до даних, якими він буде
заповнюватися з батьківської таблиці jobs.

Ту ж процедуру ми повинні зробити з Label1, але трохи інакше. Виділимо
його, у вікні властивостей знайдемо DataBindings, і викличемо діалогове вікно
прив'язки даних натисненням на кнопочку. Зліва виберемо властивість Text.
Справа ж, натиснемо нижній RadioButton і впишемо вираз, який ми
бачимо у вікні "Особливої ​​прив'язки вираження". Воно являє собою
функцію, яка буде у нас в коді.

 

 

Закриємо вікно, натискаючи на ОК. Правою кнопкою мишки кликнемо за шаблоном
і в контекстному меню виберемо пункт "Завершити зміна шаблону".

Все, конструювання закінчилося. Залишилось написати трохи коду,
щоб наш приклад запрацював.

 

7. Висновок

Public Class WebForm1
    Inherits System.Web.UI.Page

# Region "Код, автоматично створений конструктором веб-форм"

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        "Завантаження сторінки, з'єднання з БД, заповнення DataSet
        If Not IsPostBack Then
            daJobs.Fill(DataSet11, "jobs")
            daEmployee.Fill(DataSet11, "employee")
            DataGrid1.DataBind()
            Session("DS") = DataSet11
        Else
            DataSet11 = Session("DS")
        End If
    End Sub

    Private Sub DataGrid1_EditCommand(ByVal source As Object, 
		ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.EditCommand
        "Редагування даних в DataGrid
        DataGrid1.EditItemIndex = e.Item.ItemIndex
        DataBind()
    End Sub

    Private Sub DataGrid1_CancelCommand(ByVal source As Object, 
		ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.CancelCommand
        "Скасування редагування
        DataGrid1.EditItemIndex = -1
        DataBind()
    End Sub

    Private Sub DataGrid1_UpdateCommand(ByVal source As Object, 
		ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.UpdateCommand
        "Оновлення відредагованих даних в базі
        Dim id As String
        DataGrid1.EditItemIndex = -1
        "Визначаємо ID вибраного рядка
        id = CType(e.Item.Cells(0).Text, String)
        "Записуємо нові дані в Dataset
        With DataSet11.employee.FindByemp_id(id)
            .job_id = CType(e.Item.Cells(3).Controls(1), DropDownList).SelectedValue
        End With
        "Оновлюємо дані в БД
        daEmployee.Update(DataSet11)
        DataBind()
        Page.DataBind()
    End Sub

    "Public Function BindJob(ByVal o As Object) As String

    "    Dim drv As DataRowView = o
    "    Dim dr As DataSet1.employeeRow = drv.Row

    "Dim dp As DataSet1.jobsRow = dr.GetParentRow (" jobsemployee ")
    "    Return dp.job_desc

    "End Function
    Public Function BindJob(ByVal o As Object) As String
        " Alternatively, since this is strongly typed:

        Dim drv As DataRowView = o
        Dim dr As DataSet1.employeeRow = drv.Row

        Return dr.jobsRow.job_desc

    End Function

End Class


Тут написані чотири процедури, які виконують ініціацію DataSet
при відкритті форми, редагування даних в DataGrid, оновлення або
скасування оновлення. А також вищезгадана функція BindJob (у двох
варіантах), яка замість job_id виводить найменування посади.

Вставимо цей код (ув'язнений в червону рамку, із заміною процедури
Page_Load) всередину класу WebForm1 на сторінці default.aspx.vb і
спробуємо запустити проект.

Якщо все успішно, то ми повинні отримати ось таку картинку.

 

 

Виберемо іншу посаду і натиснемо "Оновити". Нові дані збережуться
в базі даних.

Хочу попередити: це всього лише приклад, і я використовував тільки
два поля – job_id і job_desc. Але в самій базі вони знаходяться під
взаємозв'язку з іншими полями, тому можливі випадки виникнення
винятків при зміні посад!

 

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

 

Ця стаття не була б написана без тестового завдання, яке мені дав
Андрій Філев (Murano Software), а також без допомоги Владислава
Бородіна
(Навчальний центр Support, Санкт-Петербург), який допоміг мені
зробити перші кроки в ASP.NET.

При написанні статті частково були використані матеріали

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Метки: , , , , , ,
Рубрики: ASP.NET

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*