Разработка интерактивных сайтов с помощью Microsoft Visual Web Developer 2005: Учебный курс

Представительство Майкрософт   Разработка интерактивных  сайтов с помощью Microsoft Visual  Web Developer Учебный курс...
Author:  Бельчусов А.А. Чувашский государственный педагогический университет
18 downloads 495 Views 4MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF


В ListBox или DropDownList свойство Selected объекта Listltem определяет, выбран ли данный элемент (true) или нет (false). В CheckBoxList или RadioButtonList то же свойство определяет, включен ли данный элемент. После возврата

формы серверному сценарию не надо проверять каждый элемент списка, чтобы определить выбранный. Элементы управления со списками наследуют от базового класса ListControl свойства Selectedlndex и Selectedltem. Таким

образом, сценарий может определить, какая кнопкапереключатель выбрана, считывая ее индекс (индексы

начинаются с 0):

int Index = MyRadioButtonList.SelectedIndex;

Для элементов управления CheckBoxList свойства Selectedlndex и Selectedltem не столь интересны, так как может быть установлено более одного флажка из списка, но для других списков они крайне полезны. При изменении выбора, т. е. при выборе нового элемента ListBox и DropDownList или по щелчку кнопки в CheckBoxList и RadioButtonList элементы управления со списками

генерируют событие SelectedlndexChanged. По умолчанию событие не генерируется, пока какое-либо иное событие не вызовет возврат формы. Однако все списки наследуют от ListControl свойство AutoPostBack, которое можно установить в true, чтобы события SelectedlndexChanged генерировались немедленно.

Элементы управления DropDownList

Отображают элементы в выпадающем списке, напоминающем поле со списком в Windows. Классический пример применения элемента управления DropDoumList -

отображение списка семи базовых цветов. Следующий код создает такой список и отображает выбор пользователя на Web-странице:

protected void Select_Color_Click(object sender, EventArgs e) { Color.Text = ColorList.SelectedItem.Text;

} Элементы управления ListBox

Похожи на элементы управления DropDownList, но отображают свои элементы в статичном, а не в выпадающем списке. Вот как создается элемент управления ListBox с

перечнем семи базовых цветов, а выбор пользователя отображается на Web- странице:

protected void Select_Color_Click(object sender, EventArgs e) { Color.Text = ColorList.SelectedItem.Text; }

По умолчанию размеры ListBox устанавливаются так, что одновременно видны только 4 пункта списка. Атрибут Rows в показанном выше тэге увеличивает высоту списка до 7 элементов.

Единственным функциональным различием между ListBox и DropDownList является поддержка множественного выбора первым из них. Атрибут SelectionMode=«Multiple» в тэге элемента управления создает ListBox с множественным выбором:



К сожалению, в классе ListBox нет открытого метода или свойства для получения индексов элементов, выбранных в

списке с множественным выбором. Чтобы определить, какие элементы были выбраны, вам придется перебрать все

элементы списка по одному, проверяя значение свойства Selected. Следующий метод принимает ссылку на ListBox как входной параметр и возвращает массив целых чисел,

содержащий индексы всех выбранных элементов, начиная с нуля;

int[] GetSelectedlndices(ListBox lb) { ArrayList a = new ArrayList(); for (int i=0; i
Используя показанный выше метод GetSelectedlndices, оператор: int[ ] indices = GetSelectedlndices(ColorList) ;

определяет полный список элементов, отобранных в списке с множественным выбором «ColorList». Элементы управления CheckBoxList

Создают массивы флажков. Следующий оператор отображает 4 флажка, расположенные по вертикали:

Чтобы в серверном сценарии определить, установлен ли данный флажок, обратитесь к значению его свойства Selected: if (Auto_List.Items[2].Selected)

{ // Флажок установлен. } else { // Флажок сброшен. } Элементы управления RadioButtonList

Элемент управления RadioButtonList упрощает создание групп переключателей и определение выбранного переключателя. Операторы:

создают столбец переключателей и включают первый из них. Чтобы определить, какой переключатель выбран пользователем, серверный сценарий может применить RadioButtonList,Selectedlndex. int index = Auto_List.SelectedIndex;

Лабораторная №03  Создайте страничку, которая выводит персональное приветствие посетителю сайта. От посетителя сайта требуется ввести свое имя. Используйте элементы управления TextBox, Label|, Button.

Приведите фрагмент кода Web-страницы, с помощью которого задаются использованные вами элементы управления _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ Приведите текст функции, с помощью которой выводится приветствие: _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________ _________________________________________

В таблицу запишите сведения об элементах управления, которые вы использовали. № 1 2 3

Тип элемента TextBox Label Button

Название

Значение

Тема 2.Работа с кодом C Sharp.     При создании Web страницы, например, Default.aspx, одновременно создается и файл Default.aspx.cs или Default.aspx.vb, в котором могут размещаться фрагменты кода на языке C Sharp или VB соответственно. Эти фрагменты позволяют обрабатывать значения возвращаемые элементами управления. В дальнейшем будем ориентироваться на использование языка C Sharp, поэтому кратко рассмотрим основные типы данных и операторы этого языка. В C Sharp используются следующие типы данных: ■ int - значениями этого типа являются целые числа ■ char - значениями этого типа являются элементы конечного упорядоченного множества символов. Каждому символу ставится в соответствие число, которое называется кодом символа. Для кодировки используется код ASCii (American Standard Code for international interchange) ■ string - значениями этого типа являются строки символов ■ bool - тип bool называется логическим. Его величины могут принимать значения true (истина) и false (ложь). ■ float (вещественный) и double (вещественный с двойной точностью). Внутреннее представление вещественного числа состоит из 2 частей: мантиссы и порядка. Мантисса – это численное значение со знаком, порядок – это целое со знаком, определяющее значимость мантиссы.

Переменной в C Sharp называется именованная область памяти, в которой хранятся данные определенного типа. У переменной есть имя и значение. Имя служит для обращения к области памяти, в которой хранится значение. Перед использованием любая переменная должна быть описана, например, так: int a; float x; При описании можно присвоить переменной начальное значение (инициализация): int a = 10; float b = 20.5; Из констант, переменных, разделителей и знаков операций можно конструировать выражения. Каждое выражение представляет собой правило вычисления нового значения. Если выражение формирует целое или вещественное число, то оно называется

арифметическим. Пара арифметических выражений, объединенная операцией сравнения, называется отношением. a+b+64 // арифметическое выражение (c-4) > (d*e) // отношение В C Sharp имеются следующие типы операторов: ■ составные операторы; ■ операторы выбора; ■ операторы циклов; ■ операторы перехода.

Оператор "выражение" это любое выражение, заканчивающееся точкой с запятой. Оно рассматривается как оператор, выполнение которого заключается в вычислении этого выражения. i++; a += 2; x = a+b; К составным операторам относят собственно составные операторы и блоки. В обоих случаях это последовательность операторов, заключенная в фигурные скобки. Блок отличается от составного оператора наличием определений в теле блока. { n++; summa += n; } { int n = 0; n++; summa += n; } Условный оператор имеет полную и сокращенную форму. if (выражение-условие) оператор1; // сокращенная форма if (выражение-условие) оператор1; else оператор2; // полная форма Если значение выражения-условия истинно, то выполняется оператор1, иначе выполняется оператор2

Оператор выбора позволяет сделать множественный выбор. switch (выражение) { case константа1: оператор1;break; case константа2: оператор2; break; ........... [default: операторы;] } При выполнении оператора switch, вычисляется выражение, записанное после switch, оно может быть числовым или строковым. Полученное значение последовательно сравнивается с константами, которые записаны следом за case. При первом же совпадении выполняются операторы, помеченные данной меткой, а остальные игнорируются. Если значение выражения, записанного после switch, не совпало ни с одной константой, то выполняются операторы, которые следуют за меткой default. Цикл с предусловием while (выражение-условие) оператор; Если выражение-условие истинно, то тело цикла выполняется до тех пор, пока выражениеусловие не станет ложным. while (a!=0) { a= Convert.ToInt16(Console.ReadLine()); s+=a; } Цикл с постусловием do оператор; while (выражение-условие); Тело цикла выполняется до тех пор, пока выражение-условие истинно. do { a= Convert.ToInt16(Console.ReadLine());

s+=a; } while(a!=0); Цикл с параметром for (выражение_1;выражение-условие;выражение_3) оператор; Выражение_1 – задает начальные условия для цикла (инициализация). Выражение-условие определяет условие выполнения цикла, если оно не равно 0, цикл выполняется, а затем вычисляется значение выражения_3. Выражение_3 – задает изменение параметра цикла или других переменных (коррекция). Выражение_1 и выражение_3 могут состоять из нескольких выражений, разделенных запятыми. Любое выражение может отсутствовать, но разделяющие их " ; " должны быть обязательно.

Лабораторная №04  1. Создайте

страничку с использованием элементов управления DropDownList и Label, которая предлагает пользователю выбрать из раскрывающегося списка свой пол (мужчина, женщина, оно) и выводит следующие сообщения:

■ Мужчина - Я думаю что вы - это он ■ Женщина – Я думаю что вы - это она ■ Оно - "Ой, кто вы?"

Для написания функции обработки выбранного значения в элементе DropDownList предлагается использовать операторы If или Switch Запишите ниже код получившейся у вас функции обработки выбранного значения в элементе DropDownList ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________

2. Создайте страничку с использованием элементов управления Textbox, Button и Label, которая предлагает пользователю ввести свое имя и по окончанию имени пытается угадать его пол. При выполнении работы учесть, что должны вводится полные имена, такте же: ■ Мужские имена как правило имеют окончание й, р, н ■ Женские имена как правило имеют окончание а,я

Для получения последней буквы имени используйте функции работы со строками Запишите ниже код получившейся у вас функции обработки выбранного значения в поле Textbox ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________

3. Создайте страничку с использованием элементов управления Textbox, Button и Label, которая предлагает пользователю ввести свое имя и возраст, а затем подсчитывает количество прожитых дней. При выполнении работы считать, что: ■ в году 365 дней ■ високосные года не учитывать ■ учитывать только число полных прожитых лет

Для перевода значения строковой переменной (тип string), опредялющей число лет в числовое представление (тип int) рекомендуется использловать функцию Convert.ToInt16 Запишите ниже код получившейся у вас функции обработки количества прожитых лет в поле Textbox

___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________

4. Создайте страничку с использованием элемента управления CheckBoxList и Label, которая выводит слова «Привет» или «Hello» или оба слова вместе в зависимости от того, напротив какого языка установлен флажок: ■ Установлено Russian – вывести «Привет»; ■ Установлено English – вывести «Hello»; ■ Установлено Russian и English – вывести «Hello Привет»

Для проверки установки флажка воспользуйтесь свойством CheckBoxList1.Items[j].Selected, принимающем значения trueпри установленном флажке и false в противном случае. Запишите ниже код получившейся у вас функции обработки установленных флажков элемента управления CheckBoxList. ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________

5. Создайте

страничку с использованием элементов управления DropDownList и Image, которая выводит изображение соответствующее выбранному знака зодиака: Изображения знаков зодиака можно взять с любого сайта гороскопов (например http://www.goroskop.ru/); Для проверки выбранного значения в элементе DropDownList рекомендуется использовать свойство DropDownList1.SelectedItem, а для осуществления последующих действий рекомендуется использовать оператор switch. Запишите ниже код получившейся у вас функции обработки выбранного значения в элементе DropDownList и вывода изображения. ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________ ___________________________________________________________________________________

Тема 3. Запуск и отладка проекта     Запустить проект в VWD 2005 EE можно одним из следующих способов; щелкнуть кнопку Start на панели инструментов, выбрать из меню Debug команду Start или нажать клавишу F5. После запуска проекта VWD 2005 EE компонует его файлы, показывая в окне Error List сообщения об ошибках, если таковые возникнут (Рисунок 23). Дважды щелкнув описание ошибки в окне Error List, вы быстро найдете строку с ошибкой, чтобы исправить ее. Если во время компоновки ошибки не обнаружены, VWD 2005 EE запускает Internet Explorer и открывает в нем начальную страницу Web-приложения. Если при исполнении приложения в режиме отладки возникает ошибка. VWD 2005 EE показывает в браузере соответствующее сообщение. (Рисунок 24). Дальше можно выполнить одно из следующих действий: если причина ошибки Рисунок 23. Сообщения об ошибках, возникших при известна, стоит остановить компоновке проекта приложение, закрыв окно браузера и вернуться в VWD 2005 EE, чтобы исправить ошибку; если причина ошибки неизвестна, следует щелкнуть кнопку Back (Назад) в браузере и переключиться в VWD 2005 EE, чтобы установить в коде точку прерывания перед предполагаемым местом возникновения ошибки. Затем, переключившись обратно в браузер, попробуйте еще раз выполнить Рисунок 24. Сообщение об ошибке, возникшей при выполнении проекта

действие, вызывавшее ошибку. Встретив точку прерывания, VWD 2005 EE остановит исполнение приложения. Далее путем пошагового исполнения вы локализуете ошибку. Установка точки прерывания позволяет остановить исполнение проекта перед некоторой строкой кода. Встретив при исполнении проекта строку с точкой прерывания, VWD 2005 EE остановит приложение перед этой строкой и откроет ее в окне Code Editor, выделив, как показано на Рисунок 25. Чтобы установить точку прерывания, щелкните мышкой по серому полю слева от строки, перед которой нужно остановить исполнение программы, либо выделите эту строку и нажмите F9. После останова приложения перед точкой прерывания стоит просмотреть значения активных переменных, наводя на них указатель мыши или воспользоваться вкладкой Local. Для отслеживания и просмотра значений переменных сложного типа, следует добавить эти переменные в окно Watch, показанное на Рисунок 26 Чтобы сделать это, выделите переменную Рисунок 25. Проект, остановленный перед точкой (объект) и перетащите ее в прерывания окно Watch. Для просмотра значений вложенных элементов (например, элементов массива или свойств объекта) щелкните знак «+» справа от сложного элемента в окне Watch. Чтобы возобновить исполнение приложения, остановленного перед точкой прерывания, щелкните кнопку Continue на панели инструментов либо нажмите F5. Можно также исполнять приложение построчно, нажимая F10 или F11. F10 заставляет при вызове процедуры исполнить ее как одну команду. Другими Рисунок 26. Окно Watch

словами, процедура исполняется без захода в нее (step over), после чего исполнение останавливается на следующей после вызова этой процедуры строке. Нажатие клавиши F11 вызывает исполнение процедуры с заходом в нее (step in), при этом исполнение останавливается на первой строке вызванной процедуры

Лабораторная №05  1. Откройте созданный в ходе выполнения лабораторной работы №4 проект «Сколько

дней ты прожил?» (задание №3). Установите точки прерывания в каждой строке. Запустите проект на выполнение. Запишите в приведенной ниже таблице запишите, какие значения принимают переменные, когда выполняется первая строка кода, вторая строка кода и т.д. Номер строки fio 1 2 3 4

god

Переменные dni

Label1

2. Откройте проект, созданный в ходе выполнения задание №5 лабораторной работы №4.

Запишите каждую строчку кода в соответствующую строку таблицы. Установите точки прерывания так, чтобы по ним проходило выполнение программы при выборе в элементе управления DropDownList знака зодиака «Телец» Точка Номер Код прерывания строки

Сколько таких точек прерывания вы установили?

Модуль 4. Дизайн страниц Когда мы говорили о дизайне, то не раз упоминали шаблоны страниц как мощное средство, помогающее быстро и качественно оформить внешний вид сайта, а также впоследствии легко изменять его. VWD-2005 EE предоставляет в распоряжение web разработчика мастерстраницы, таблицы стилей и темы. Их использование позволяет быстро создать заготовку типового сайта. Разработчики WEB-сайтов, используя мастер-страницы, таблицы стилей и темы конструируют собственные шаблоны для придания своим сайтам «фирменного» вида. Как правило, при построении шаблонов активно используются таблицы, потому, что с их помощью легко выполнить: ■ выравнивание данных путем вставки в ячейки таблицы; ■ распределение текста и графики по разным колонкам; ■ создание обрамления вокруг текста или графических изображений; расположение текста по контуру графического изображения; ■ создание цветного фона для текстового фрагмента или отдельного изображения;

Изучив данный модуль, вы сможете: ■ создавать мастер-страницы и контент-страницы; ■ создавать таблицы стилей и применять их к web страницам ■ создавать темы, добавлять в них стили и шкурки ■ применять темы к web страницам

Тема 1. Создание и использование мастер страниц   Мастер-страницы, служат шаблоном для отображения, других страниц. Для этого на мастер-странице выделяются области, не подлежащие изменению, и области где будет отображаться информация связанных страниц (страниц контента) Контент-страница - любая страница, которая использует мастер страницу. Каждый раз, когда посетитель запрашивает контент-страницу, ASP.NET загружает мастер-страницу, производит слияние с контент-страницей и посылает объединенный результат пользователю. Слияние мастер-страницы и контент-страницы на лету имеет два важных последствия. ■ посетитель всегда получает текущие версии шаблона и его содержания. ■ полученная после слияния страница обладает всеми возможностями обычной ASP.NET страницы. Например, мастер-страница, как и контентстраница может содержать любые элементы управления, или фрагменты кода. Лучше всего разрабатывать мастер страницу на этапе планирования сайта.

Чтобы создать сайт, использующий мастер страницы нужно выполнить следующие действия: 1. Создайте новый сайт 2. Удалите любые Web-страницы, которые содержит сайт. Например, удалите страницу default.aspx, которая создается по умолчанию 3. В окне Solution Explorer, щелкните правой кнопкой мыши по папке сайта и выберите Add New Item из контекстного меню 4. Когда диалоговое окно Add New Item появится, выполните следующие действия

Рисунок 27. Новая мастер страница содержит только один элемент: управление ContentPlaceHolder

■ Выберите из всех элементов списка Master Page ■ Оставьте название страницы по умолчанию MasterPage.master. ■ Выберите язык программирования (по умолчанию C#). ■ Поставьте галочку напротив Place code in separate file.

5. Нажмите Add, чтобы создать мастер-страницу

Рисунок 28. Отредактированная мастер страница

Созданная мастер-страница, доступна для редактирования за исключением одного элемента управления ContentPlaceHolder, который создается на ней по умолчанию. Этот элемент резервирует пространство для содержимого контент-страницы (см. Рисунок 27). Редактирование мастер-страницы такое же, как и редактирование обычной ASP страницы. Поэтому к ней можно применить все элементы управления, рассмотренные ранее. Рисунок 28 показывает отредактированную мастер-страницу. Самый удобный способ использования мастер-страницы состоит в том, чтобы привязать ее, к новой странице во время ее создания, что может быть выполнено следующим образом. 1. Откройте сайт, который содержит мастер-страницу. 2. В окне Solution Explorer, щелкните правой кнопкой мыши по папке, где Вы хотите разместить новую контент-страницу, затем выберите Add New Item из контекстного меню. 3. Когда диалоговое окно Add New Item появится, не забудьте сделать следующее: ■ Выбрать шаблон документа: Web Form. ■ Поставить галочку напротив Select Master Page.

4. Щелкните на кнопку Add. Тогда появится диалоговое окно

Рисунок 29. Выбор мастер страницы

Master Page, тогда вы сможете выбрать мастер-страницу. Рисунок 29 5. Чтобы создать страницу, щелкните кнопкой OK. Когда Вы видите контент-страницу в режиме конструктора, части, которые добавились из мастер страницы, будут недоступны для редактирования. Чтобы изменить что-нибудь в них, вам придется открыть и отредактировать мастер-страницу (см. Рисунок 30.) Рисунок 30 показывает контент-страницу, которая использует присоединенную мастер страницу. Кроме того, контент-страница отображает некоторое собственное содержание. Чтобы создать

такую страницу выполните следующие действия: Создайте ASP страницу, в нашем примере она называется Бык.aspx. На этапе создания подключите мастер-страницу (MasterPage.master), так как это было описано выше. 1. Задайте содержание страницы внутри элемента ContentPlaceHolder. Вы можете напечатать текст или вставить его и изображения. Затем сохраните страницу. 2. Щелкните правой кнопкой мыши по странице в Solution Explorer и выберите View In Browser из контекстного меню Контент-страницы, которые используют мастер-страницы первоначально, содержат очень небольшой исходный текст. Вот типичный пример: <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="бык.aspx.cs" Inherits="бык" Title="Untitled Page" %> Директива @Page определяет язык программирования для любого кода, добавленного к странице, название файла мастер-страницы, и заголовок страницы. Тэг определяет имя элемента управления ContentPlaceHolder на главной странице, и атрибут Runat="Server". Данные теги позволяют понять принцип работы мастер-страниц:

Рисунок 30. . Контент-страница с присоединенным шаблоном.

■ Мастер-страница содержит один или более элементов управления ContentPlaceHolder, каждый с собственным индивидуальным именем. ■ Когда контент-страница использует мастер-страницу, она должна содержать один или несколько тегов для каждого элемента управления ContentPlaceHolder в мастер-странице. ■ Когда посетитель запрашивает контент-страницу, ASP.NET сливает ее содержание с каждым элементом управления ContentPlaceHolder в мастер-странице, затем показывает результаты.

Заметьте, что контент-страница, которая использует мастер-страницу, не содержит никаких тегов типа , раздела , тега и тега
. Все они заимствуются с мастер-страницы.

К сожалению VWD 2005 EE не имеет никакой команды или мастера, который применяет главную страницу к существующей Web-странице. Однако, это можно сделать вручную, выполнив следующую процедуру: 1. Создайте новую контент-страницу, которая использует нужную вам мастер-страницу 2. Скопируйте содержимое со старой страницы в буфер обмена 3. Вставьте содержание из буфера обмена в новую страницу. 4. Удалите старую контент-страницу, затем переименуйте новую. Если Вы обнаружили, что этот подход не принес желаемого результата, то откройте страницу в редакторе, переключитесь в режим Source и попробуйте другую процедуру: 1. Удалите все строки от тега до начала содержания, которое Вы хотите сохранить. Вы должны удалить по крайней мере тэги , , и
. 2. Удалите все строки, что идут после содержания, которое нужно сохранить. То есть, по крайней мере теги , и . 3. Вставьте сохраненное содержание между тегами Рисунок 31. . В браузере, контент-страницы и мастер-страницы отображаются слитно и , удостоверьтесь, что в теге есть код ID=, ContentPlaceHolderlD=, Runat="Server", а значение ContentPlaceHolderlD в контент-странице совпадает с названием элемента управления ContentPlaceHolder в мастер-странице. 4. Убедитесь, что значение MasterPageFile соответствует названию нужной вам мастер-страницы. 5. Проверьте работоспособность полученной страницы. Мастер страницы по существу шаблоны для Web-страниц. Посетители не просматривают их непосредственно. Вместо этого они просматривают контент-страницы, прикрепленные к ним. Это делает сайт более однородным и более простым в сопровождении.

Лабораторная №06  Начиная с этой лабораторной работы, мы будем работать над проектом сайта «Зодиак», конечной целью которого будет создание сайта посвященного западному и восточному гороскопам. (Вы уже, наверное, обратили внимание что примеры и задания, так или иначе, связанные с этой темой встречались и ранее) Существует два вида гороскопов: восточный и западный. Западный гороскоп основан на 12 знаках зодиака, которые сменяют друг друга в течение года и подразделяются на четыре группы, так называемые стихии: вода, земля, огонь и воздух. Китайский гороскоп, также основан на 12 знаках зодиака, но сменяют они друг друга в течение 12 лет. Стихий в китайском гороскопе всего пять: железо, вода, дерево, огонь, земля и они также сменяют друг друга через год. Таким образом, в китайском гороскопе полный цикл осуществляется за 60 лет Вам нужно создать две мастер страницы: ■ для отображении информации западного гороскопа ■ для отображения информации восточного гороскопа

При разработке мастер страниц учитывайте следующие рекомендации: ■ Каждая мастер страница должна содержать заголовок «Сайт гороскопов «Зодиак»» ■ Вверху каждой мастер страницы должен быть соответствующий подзаголовок: «Восточный гороскоп» или «Западный гороскоп» ■ Внизу мастер страниц должен стоять знак копирайта разработчика, т.е. ваш, например: © Иванов Иван Иванович, ЧГПУ, Чебоксары 2007г. E-mail [email protected] ■ Слева от элемента управления ContentPlaceHolder должно быть

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

При размещении текстовых и графических элементов на мастер-странице учитывайте метод золотого сечения, изложенный выше. Чтобы определить степень соответствия вашей страницы методу золотого сечения заполните следующую таблицу: № Элемент мастер страницы

длинна ширина Золотое сечение

Теперь запишите среднее значение золотого сечения для всех элементов мастер страницы _________ если оно близко к 21/34, то вы можете отметить это событие!  

Тема 2. Использование CSS  Чтобы определить стиль для определенного элемента страницы, сначала выделите его в Режиме конструктора и затем выполните следующие действия: ■ Выберите пункт Style из меню Format или ■ Выберите признак Style в окне Properties, а затем щелкните на появившейся в той же строке кнопке.

После того, как Вы выполните любое из этих действий, VWD2005 EE отобразит диалоговое окно Style Builder, которое показано на Рисунок 32. Свойства CSS сгруппированы в восемь категорий, которые расположены по левому краю диалогового окна. Правая часть диалогового окна меняется в зависимости от выбранной категории. Большинство параметров CSS можно определить интуитивно. Если Вы найдете неизвестный параметр, то можете проконсультироваться со встроенной системой помощи или просмотреть официальную спецификацию CSS на сайте http://www.w3.org/Style/CSS. Применение свойств CSS к индивидуальным элементам страницы обеспечивает большую гибкость в оформлении, но не большую однородность. Чем большее количество страниц содержит сайт, тем тяжелее задача сохранения Рисунок 32. Это диалоговое окно применяет CSS шрифтов и цветов. К счастью, можно создать общедоступный файл таблицы свойства к элементам страницы или к правилам стилей, который решит эту проблему. таблицы стилей Процедура создания нового файла таблицы стилей состоит в следующем. 1. Выберите New File из меню File или щелкните правой кнопкой мыши по папке в Solution Explorer, и выберите пункт Add New Item. 2. Когда диалоговое окно Add New Item появляется, выберите шаблон Style Sheet, если желаете, измените название файла, которое дается по умолчанию, и затем щелкаете кнопкой Add. В файле таблицы стилей содержатся правила, каждое правило состоит из названия, сопровождаемого списком свойств CSS и значений. Ошибка! Источник ссылки не найден. показывает типы названий стиля Есть два способа добавить новое правило стиля к файлу таблицы стилей. Вот они: ■ Напечатать название правила, и пару изогнутых фигурных скобок ({}).

■ Выбрать пункт Add Style Rule из меню Styles, что приведет к появлению диалогового окна Add Style Rule, которое показано на Рисунок 33

Таблица 6. Типы Названий Стиля CSS Консорциум WWW Tape Selector

VWD 2005 EE

Применяется к

Element Name

Все элементы HTML соответствующего типа. Например, правило стиля, названное td применяется к тегам .

Class Selector

Class Name

Все элементы, относящиеся к соответствующему классу. Например, правило стиля, названное error, применялось бы к любым тэгам, которые вы поместили в класс error.

ID selector

Element ID

Все элементы, имеющие соответствующее имя. Например, правило стиля по имени #test будет применяться ко всем элементам, для которых ID= "test".

Если Вы хотите использовать диалоговое окно Add Style Rule, то продолжите следующим образом: 1. Выберите тип названия стиля, которое вам нужно: Element, Class Name, или Element ID. 2. Выберите или напечатайте название 3. Если Вы создаете правило класса, то можете ограничить его применение определенным названием тэга. Например, правило стиля по имени TABLE.test применялось бы только к тэгам, закодированным как . Чтобы использовать эту особенность:

■ Определите имя класса. ■ Выберите флажок Optional Element. ■ Выберите название тэга из раскрывающегося списка.

4. Щелкните кнопкой, на которой изображена стрелка вправо (>). Это

действие добавит новое название тэга к полю Style Rule Hierarchy. 5. Щелкните кнопкой OK, чтобы создать новое правило стиля. Если Вы добавите несколько названий стиля к полю Style Rule Hierarchy, не нажимая кнопку OK, то VWD2005 EE создаст правило, которое будет применяться, только к тем тегам, которые удовлетворяют все этим условиям Как только вы создали правило стиля можно добавить к нему свойства, по одному из трех вариантов:

Рисунок 33. Это диалоговое окно создает новые правила стиля.

■ печатая их самостоятельно или с помощью IntelliSense. ■ выбрав правило стиля и выбирав Build Style из меню Styles. ■ щелкнув правой кнопкой мыши по стилю и выбирав Build Style из контекстного меню.

Рисунок 34 показывает, как VWD2005 EE отображает файл таблицы стилей. Слева отображается окно Outline CSS, которое облегчает нахождение и выбор стилей, объявленных в файле. Чтобы использовать созданный файл стилей нужно связать его с WEB-страницей с помощью следующих действий 1. Откройте Web-страницу, которая будет использовать файл таблицы стилей 2. Затем выполните любое из этих действий:

■ Откройте страницу в режиме Design, затем захватите файл таблицы стилей из окна Solution Explorer и поместите его на вашу страницу. ■ Выберите пункт DOCUMENT в окне Properties, выберите свойство StyleSheet, щелкните на кнопку, появившуюся в строке. Отобразится диалоговое окно, в котором вы сможете выбрать файл таблицы стилей, затем нажимаете OK.

Рисунок 34. Таблица стилей

Как только файл таблицы стилей будет связан со страницей, правила, заданные в нем будут применены к странице и вступят в силу немедленно. Работая с таблицами стилей (CSS), вы можете задавать Используя таблицы стилей, вы правила, которые изменяют свойства элементов на Webпредадите сайту более страницах. VWD2005 EE позволяет сформулировать эти правила графически (используя диалоговые окна) или в однородное и профессиональное оформление текстовом режиме (используя IntelliSense).

Тема 3. Использование тем  Как и таблица стилей, тема не имеет графического представления, поэтому работа с ней ведется в редакторе текста. Чтобы создать новую тему необходимо выполнить следующие действия: 1. Откройте Web сайт, для которого хотите создать тему. 2. Щелкните правой кнопкой мыши по папке сайта, выберите Add Folder из контекстного меню, а затем выберите папку Темы из выпадающего подменю. В этом случае: ■ Если сайт еще не содержит папку App_Themes, то VWD2005 EE создаст ее. ■ VWD2005 EE всегда будет создавать подпапку с названием Theme1, которую вы можете переименовать как считаете нужным.

3. Переименуйте подпапку Theme1. Название, которое получит папка, станет названием

Рисунок 35. Для сайта «Зодиак» создано четыре стиля: «Земля», «Вода», «Воздух», «Огонь»

темы Конечно, пустая папка темы не будет оказывать никакого влияния на ваш сайт. Чтобы задействовать тему, вы должны сначала добавить .skin или .css файлы. (см. Рисунок 35) В ASP.NET 2.0 skin файл определяет визуальные свойства для одного или более видов элементов управления расположенных на страницах вашего сайта. Подпапка темы может содержать как один, так и несколько skin файлов. Если вы разметили в ней несколько файлов, ASP.NET будет читать их все, как будто это один файл. Для создания skin файлов нужно выполнить следующие действия: 1. Щелкните правой кнопкой мыши по подпапке нужной темы, затем выберите Add New Item из контекстного меню. 2. Когда диалоговое окно Add New Item появляется, выберите шаблон Skin File, здесь вы также можете изменить имя файла данное по умолчанию, а затем щелкните кнопкой Add. 3. VWD2005 EE отобразит новый skin файл в редакторе кода. 4. Создайте тэг для каждого элемента управления, к которому вы хотите применить тему, ниже приведены примеры:

Рисунок 36. Эта страница посвящена знаку зодиака «Телец» и использует тему «Земля»

Эти теги очень напоминают те, что появляются, когда вы добавляете соответствующий элемент управления к Web-странице. Самый простой способ создать skin файл состоит в том, что вы просто копируете нужные теги с Web-страницы и редактируете их. 5. В пределах каждого тэга, добавьте параметры элементов управления и задайте их значения. Если вы забыли, как записать параметр или его значение, откройте WEB страницу в режиме дизайнера, измените соответствующие параметры, а затем переключитесь в режим редактирования кода и скопируйте получившийся код из WEB страницы в skin файл. 6. Когда все сделано, сохраните skin файл, выбрав Save из меню File. Учтите, что skin файл может только изменить отображение элементов Web-страницы, имеющие визуальные свойства, и не может управлять ими. Теперь, когда у вас появились папки с темами, файлы таблицы стилей можно хранить не отдельно, а в подпапках соответствующих тем. Тогда темы автоматически будут связывать хранимые в своих подпапках таблицы стилей с любыми страницами, которые используют данную тему. В нашем примере есть тема «земля» и тема «вода», которые располагаются в соответствующих папках: ■ папка App_Themes/вода, содержит файл вода.css. ■ папка App_Themes/земля, содержит файл земля.css

Результат применения темы «земля» показан на Рисунок 36, а темы «вода» на Рисунок 37 Вы можете применить темы к индивидуальным Web-страницам или ко всему сайту, Чтобы применить тему к единственной webстранице, сделайте следующее:

Рисунок 37. Эта страница посвящена знаку зодиака «Рак» и использует тему «Вода»

1. Откройте страницу в VWD2005 EE 2. Выберите DOCUMENT в окне Properties 3. Найдите свойство Theme, а затем выберите нужную тему из

Рисунок 38. . Эта страница посвящена знаку зодиака «Телец» и использует тему «Земля», с помощью которой произведена замена рисунка.

раскрывающегося списка. Чтобы определить тему, которая обращается ко всему Webсайту, Вы должны изменить файл конфигурации сайта (web.config): 1. Откройте файл web.config в VWD2005 EE. 2. Найдите пару тегов <system.web> и . Если ваш файл web.config не содержит этих тегов, то создайте их. 3. Теперь добавьте тег, задающий тему (он выделен зеленым цветом), как показано ниже. <system.web> <pages theme = "земля"/> Рисунок 36 и Рисунок 38 показывают одну и ту же страницу сайта «Зодиак». Но она выглядит по-разному, так как во втором случае в skin файл темы «земля» была добавлена строка

следующего вида: .

Лабораторная №07  Создайте шесть тем, которые могут быть использованы для оформления страниц западного и восточного гороскопов. В таблице ниже показано соответствие стихий и гороскопов Восточный Стихия Западный гороскоп гороскоп Вода Присутствует Присутствует Земля Присутствует Присутствует Огонь Присутствует Присутствует Воздух Присутствует Дерево Присутствует Железо Присутствует При создании темы используйте CSS и Skin файлы. В CSS файле для каждой темы выберите различающийся шрифт (его цвет, размер и начертание), а также цвет фона в соответствии с выбранной стихией. В Skin файле определите изображение для каждой стихии. Цветовое сочетание для каждой темы выбирайте в соответствии с методом, рассмотренным в Теме 2 (Модуль 1). Запишите содержимое CSS файлов для каждой из стихий Вода ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ Земля ______________________________________________ ______________________________________________

______________________________________________ ______________________________________________ ______________________________________________ Огонь ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ Воздух ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ Дерево ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ Железо ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________ ______________________________________________

Тема 4. Создание карты сайта  Каждый Web-сайт нуждается в системе навигации, которая позволяет посетителям получать быстрый доступ к информации, которую они ищут. При разработке большого сайта важно сохранить ясность и понятность системы навигации, поскольку с течением времени сайт будет изменяться и обновляться. С этой задачей помогут справиться следующие четыре компонента: ■ Файл Web.sitemap, который задает логическую структуру сайта. ■ Элемент управления Menu, который читает файл Web.sitemap и отображает структуру сайта в виде раскрывающегося меню. ■ Элемент управления TreeView, который читает файл Web.sitemap и отображает структуру в виде древовидного списка. ■ Элемент управления SiteMapDataSource, который связывает файл карты сайта (Web.sitemap) и элементы управления для ее отображения (TreeView или Menu).

Рисунок 39. Карта сайта «Зодиак».

Совместное применение этих компонент позволяет быстро и просто организовать систему навигации на сайте и поддерживать ее в постоянном актуальном состоянии. Построение системы навигации сайта проще всего начать с создания файла карты сайта, для этого сделайте следующее: 1. Откройте сайт, и щелкните правой кнопкой мыши по папке сайта, в появившемся меню выберите пункт Add New Item. 2. Когда диалоговое окно Add New Item появится, выберите шаблон Site Map. 3. Если это первый файл содержащий карту сайта, лучше согласитесь с его именем по умолчанию Web.sitemap. В противном случае задайте свое. 4. Щелкните кнопкой Add. По умолчанию, эта процедура создает файл по имени Web.sitemap, расположенный в папке сайта. Файл карты сайта представляет собой XML файл, поэтому VWD2005 EE отображает его в текстовом режиме. Только что созданный файл Web.sitemap выглядит следующим образом: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" />

<siteMapNode url="" title="" description="" /> Формат этого файла достаточно прост: ■ Тэг в первой строке, определяет используемую версию XML, и его менять не нужно. ■ Тэг <siteMap> во второй строке и его окончание в седьмой строке отмечает начало и конец XML документа, также не изменяйте эти тэги. ■ Каждый тэг <siteMap> должен содержать один и только один тэг верхнего уровня <siteMapNode>. Он обычно определяет стартовую страницу в карте сайта. В примере, это - тэг <siteMapNode> в третьей строке, а его окончание в шестой строке. ■ Между тегами верхнего уровня <siteMapNode> и можно добавить любое число дополнительных тегов <siteMapNode>. Каждый из них станет подуровнем в раскрывающемся меню или древовидном списке. Эти теги расположены в строках четыре и пять. ■ В пределах тегов второго уровня <siteMapNode> можно добавить любое число тегов <siteMapNode> третьего уровня и т.д.

Например, для сайта «Зодиак» предлагается следующая схема навигации см. Рисунок 39, чтобы ее задать нужно в файле Web.sitemap создать структуру, представленную на Рисунок 40 У тега <siteMapNode> есть три признака, которые можно менять: ■ URL - абсолютная или относительная ссылка на страницу, куда будет совершен переход при выборе ссылки в меню или древовидном списке. Не определяйте то же самое Рисунок 40. Код задающий карту сайта «Зодиак» значение URL дважды в одном файле карты сайта, иначе получите сообщение об ошибке. Чтобы создавать <siteMapNode>, который не связан со страницей, оставьте пробел в качестве значения URL. Это полезно для пунктов меню, которые представляют группу страниц, но сами ни на какие страницы не ссылаются.

■ TITLE название ссылки, которое появится как видимый текст в меню, или древовидном списке. ■ DESCRIPTION более длинное название ссылки, которое появится как текст подсказки, когда мышь будет находиться на ссылке. Этот признак является дополнительным, и заполнять его не обязательно.

Рисунок 41. Связывание меню и карты сайта

Описанную в файле Web.sitemap карту сайта можно использовать для создания выпадающего или раскрывающегося меню, следующим способом: 1. Откройте мастер страницу или любую другую страницу, которая будет отображать меню. 2. В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4. 3. В панели Toolbox, откройте группу Navigation и перетащите элемент Menu на открытую страницу, в нужное вам место. 4. VWD2005 EE отобразит меню задач как показано на Рисунок 41. Откройте список Choose Data Source и выберите название SiteMapDataSource1, которое было добавлено на шаге 2. 5. Сохраните страницу, затем можете просмотреть ее.( Рисунок 42) Чтобы настроить конфигурацию меню, выделите его, а затем определите нужные значения в окне Properties. Покажем, как установить свойство Orientation. Мы можем выбрать между значениями Horizontal и Vertical:

Рисунок 42. Пример раскрывающегося меню

■ Horizontal. Горизонтальные пункты меню Top-level появятся слева направо. Результат система раскрывающегося меню. ■ Vertical. Вертикальные пункты меню Top-level появятся сверху вниз. Результат - выпадающая система меню.

Рисунок 43. Пример меню-списка

Файл карты сайта можно также использовать для создания навигации аналогичной Windows Explorer, для этого нужно воспользоваться элементом TreeView из группы Navigation. Тогда посетители сайта смогут использовать значки плюс (+) и минус (-), чтобы развернуть или свернуть любые группы элементов меню. Чтобы создать меню-список нужно выполнить следующие действия: 1. Откройте мастер страницу или любую другую страницу, которая будет отображать меню-список. 2. В панели Toolbox откройте группу Data и перетащите элемент SiteMapDataSource на открытую страницу. Вы можете поместить его, где захотите, так как в любом случае при просмотре страницы этот элемент отображаться не будет. По умолчанию для этого элемента будет назначено имя SiteMapDataSource1. Это название появится в виде надписи на самом элементе, запомните его, чтобы использовать на шаге 4. 3. В панели Toolbox, откройте группу Navigation и перетащите элемент TreeView на открытую страницу, в нужное вам место. 4. VWD2005 EE отобразит меню задач, в котором нужно открыть список Choose Data Source и выбрать название SiteMapDataSource1, которое было добавлено на шаге 2. 5. Сохраните страницу, затем можете просмотреть ее (Рисунок 43). Наконец, файл карты сайта можно использовать для создания панели, которая показывает путь от главной страницы к текущей странице с помощью элемента управления SiteMapPath. На Рисунок 44 элемент управления SiteMapPath появляется в низу страницы. Вы можете добавить элемент SiteMapPath к любой .aspx Web-странице, или мастер странице. Для этого

достаточно в панели Toolbox открыть группу Navigation и перетащить элемент SiteMapPath на нужную страницу, открытую в режиме конструктора В отличие от элементов управления |Menu и TreeView, элемент управления SiteMapPath не получает данные от SiteMapDataSource, а всегда использует файл карты сайта по умолчанию: Web.sitemap. Это может служить серьезным основанием, чтобы не изменять имя файла карты сайта данное по умолчанию. Таким образом, мы рассмотрели четыре элемента управления, которые помогают организовывать гиперссылки в пределах сайта. Первый, SiteMapDataSource, обеспечивает доступ к иерархическому списку связей, который закодирован в файле web.sitemap. Этот элемент не виден в режиме просмотра и обеспечивает данными элементы управления Menu и TreeView. Элемент управления Menu отображает в зависимости от настроек раскрывающееся или выпадающее меню, а TreeView отображает те же самые данные в виде иерархического списка. Четвертый элемент управления, SiteMapPath, находит текущую страницу в файле web.sitemap и затем отображает путь от текущей страницы к домашней странице сайта. Рисунок 44. Пример использования SiteMapPath

Лабораторная №08  Сделайте три файла карты сайта. В каждом из файлов разместите ссылки на следующие Web-страницы 1. Общая карта сайта

■ западный гороскоп ■ восточный гороскоп ■ информация о разработчиках ■ страница заполнения анкеты ■ страница получения прогноза

2. Восточный гороскоп ■ Крыса ■ Бык ■ Тигр ■ Кролик ■ Дракон ■ Змея ■ Лошадь ■ Овца ■ Обезьяна ■ Петух ■ Собака ■ Свинья

3. Западный гороскоп

■ Стихия земли • Телец • Дева • Козерог ■ Стихия воды • Рак • Рыбы • Скорпион

■ Стихия воздуха • Близнецы • Весы • Водолей ■ Стихия огня • Овен • Лев • Стрелец

В каждом файле карты сайта заполните поля DESCRIPTION развернутыми описаниями ссылок Общую карту сайта используйте для заполнения элемента управления Menu на домашней странице сайта Файл карты сайта «Восточный гороскоп» используйте для заполнения элемента управления TreeView, который разместите на мастер-странице «Восточный гороскоп» Файл карты сайта «Западный гороскоп» используйте для заполнения элемента управления TreeView, который разместите на мастер-странице «Западный» На обоих мастер-страницах замените ссылку на домашнюю страницу элементом управления SiteMapPath.

Модуль 5. Работа с базами данных. Любой сайт только выиграет, если будет предоставлять возможность сохранения информации нужной для взаимодействия с пользователем. Как правило, такая информация хранится в базе данных и показывается на Web-странице по соответствующему запросу. Этот механизм позволяет создать поисковые системы, системы электронной коммерции, различные социальные сервисы. Такими образом, когда базы данных и Интернет используются вместе, получается больший эффект нежели при их отдельном использовании. VWD2005 EE позволяет очень просто создавать Webсайты, которые работают с базами данных. Во многих случаях от вас не потребуется написать даже строчку кода, потому что VWD включает мощные, интегрированные, и удобные в работе инструменты для взаимодействия с Microsoft SQL Server.

Тема 1. Создание базы данных и подключения 

Рисунок 45. Окно Database Explorer

Чтобы использовать базу данных совместно с VWD2005 EE, нужно сначала cконфигурировать подключение, в Database Explorer, которое указывает на необходимую базу данных. Каждое подключение соответствует только одной базе, но это не является ограничением, так как можно сконфигурировать столько подключений, сколько баз необходимо использовать. Создание, изменение и удаление подключений баз данных производится через Database Explorer. Это - окно Visual Web Developer, которое обычно используется совместно с Solution Explorer. (см. Рисунок 45) Чтобы переключиться между Solution Explorer и Database Explorer, нужно щелкнуть по одной из вкладок вдоль нижнего края окна. Если ни окно Database Explorer, ни вкладка Database Explorer не видимы, то нужно выбрать Database Explorer из меню View. Соединение с Существующей Базой данных 1. Запустите VWD2005 EE, откройте Web-сайт и активизируйте окно Database Explorer. 2. В окне Database Explorer щелкните правой кнопкой мыши по надписи Data Connections и выберите Add Connection из контекстного меню 3. Появится диалоговое окно Add Connection, как показано на Рисунок 46. Из списка Data Source выберите тот пункт, что описывает вашу базу данных. Рисунок 46. Ддиалоговое окно Add Чтобы изменить Data provider, установленный по Connection умолчанию для данного типа базы данных, щелкните по кнопке Change. Появится диалоговое окно Change Data Source (Рисунок 47). Теперь выберите источник данных, а затем выберите Data provider, и, наконец, поставьте флажок напротив

Always use this selection. Чтобы сохранить изменения и закрыть диалоговое окно Change Data Source, щелкните на кнопку OK. 4. Когда управление перейдет к диалоговому окну Add Connection, проверьте поле Data Source. ■ Если поле Data Source ссылается на нужный вам тип базы данных, переходите к следующему шагу. ■ Иначе, щелкните на кнопку Change и вернитесь к шагу 3. Рисунок 47. Окно Change Data Source

Вид диалогового окна Add Connection изменяется в зависимости от типа базы данных. Однако, область Data Source всегда на нем присутствует в его верхней части. 5. Задайте необходимые параметры подключения в диалоговом окне Add Connection и щелкните кнопкой OK. VWD2005 EE может подключаться и управлять базами данных Microsoft SQL Server. Кроме того, VWD2005 EE может подключаться и управлять следующими базами данных: ■ базы данных Microsoft Access. ■ базы данных Oracle (если и Oracle и драйверы базы данных Microsoft установлены). ■ любые базы данных, для которых есть ODBC или OLE-DB драйверы.

Далее рассмотрим стандартные действия для подключения к SQL серверу, которые нужно выполнить с помощью диалогового окна Add Connection: 1. В поле Server Name, введите имя сервера и, в случае необходимости, название раздела, где SQL сервер хранит базу данных. Имя сервера также можно задать, щелкнув по стрелке раскрывающегося меню поля Server Name. В меню будут перечислены имена компьютеров, на которых имеются SQL серверы. Выберите название соответствующее экспресс версии SQL сервера, установленного на вашем компьютере. В этом случае имя сервера, скорее всего, будет совпадать с именем вашего компьютера (например, STORM), а имя раздела будет называться SQLEXPRESS. Таким образом, в поле Server Name появится STORM\SQLEXPRESS 2. Выберите тип аутентификации для SQL сервера, воспользовавшись одним из двух доступных методов: ■ Use Windows Authentification. Использует ваш текущий логин и пароль, которые вы вводили для входа в операционную систему Microsoft Windows, для соединения с SQL сервером. Этот метод рекомендуется использовать, если SQL сервер установлен на локальном компьютере. ■ Use SQL Server Authentification. Для подключения к SQL серверу используются имя пользователя и

пароль, определенные на самом SQL сервере. Если выбран этот метод, то нужно ввести имя пользователя SQL сервера и пароль, которые имеют необходимые привилегии для работы базами данных. Как правило, получить имена и пароли можно у администратора базы данных, который управляет именами и паролями для доступа к SQL серверу.

3. Определите, какую базу данных будет использовать ваше подключение.

Если база данных уже присоединена к SQL серверу, введите ее имя или выберите ее из списка в поле Select or enter a database name. 4. Если база данных находится в .mdf файле и еще не присоединена к SQL серверу

■ Определите имя .mdf файла в поле Attach a database file. Для этого можно просто напечатать путь и имя файла или щелкнуть на кнопку Browse, определить местонахождение файла, и затем щелкнуть на кнопку Open. ■ В поле Logical Name, напечатайте краткое название, которое описывает присоединяемую базу данных. Это название будет использоваться в командах SQL и коде вашей программы.

5. Чтобы проверить правильность всех настроек, щелкните на кнопку Test Connection в

нижнем левом углу диалогового окна. Если ваши настройки правильны, VWD2005 EE отобразит сообщение "Test connection succeesed”, в противном случае вернитесь к началу и отредактируйте настройки. 6. Щелкните на кнопку OK, чтобы создать подключение. Новое подключение должно появиться немедленно в окне Database Explorer. Теперь вы можете работать с содержимом базы данных, вот некоторые приемы такой работы: ■ Щелкнув на значке Плюс (+), предшествующем названию созданного подключения, вы отобразите список типов объектов, которые содержит база данных: Tables, Views, Stored Procedures и другие. ■ Щелкнув на значке Плюс (+), который предшествует типу объекта, вы отобразите список объектов этого типа. Например, щелкнув на значок Плюс (+) перед пунктом Tables, вы отобразите список таблиц. ■ Щелкнув на значок Плюс (+), который предшествует таблице, вы отобразите список ее полей и т.д..

Если Вы не получаете результаты, описанные выше, то ваша база данных или ваше подключение вероятно созданы с ошибкой. Физически, базы данных SQL сервера находятся в двух файлах: главный файл имеет расширение .mdf, а файл журнала расширение .ldf. Эти файлы могут находиться в любом месте файловой системы компьютера, на котором выполняется SQL сервер, но есть стандартные места их расположения:

■ Для базы данных, которую будет использовать ваш Web сайт, самое удобное место это папка App_Data в каталоге самого сайта. Этот подход существенно упрощает публикацию базы данных. ■ Для базы данных, которую будут использовать несколько приложений или Web сайтов, лучше выбрать стандартное хранилище данных SQL сервера. Как правило, это папка называется C:\Program Files\Microsoft SQL Server\MSSQL.l\MSSQL\Data

В дальнейшем будем использовать базу данных SQL сервера по имени Зодиак.mdf, которая будет находиться в стандартной папке App_Data. Чтобы создать новую базу данных для вашего сайта проделайте следующие действия: 1. Откройте Web сайт. 2. Выберите пункт New File из меню File. 3. Когда диалоговое окно Add New Item появится, выберите шаблон SQL Database 4. В поле Name, напечатайте Зодиак.mdf Рисунок 48. Предложение разместить, создаваемую базу данных в стандартном каталоге App_Data 5. Щелкните на кнопку Add. Если появится следующее сообщение (см. Рисунок 48), то щелкните на кнопку Yes. VWD2005 EE создаст базу Когда база данных создана, вы можете с помощью VWD2005 EE создавать, изменять, и удалять в ней таблицы. Например, чтобы создать Таблицу "Анкета" в базе данных “Зодиак”, нужно выполнить следующие действия: 1. В окне Database Explorer, нажмите значок Плюс (+) рядом с подключением базы данных Зодиак, которое было создано ранее. Щелкните правой кнопкой мыши по разделу Tables, и выберите пункт Add New Table из контекстного меню. 2. VWD2005 EE отобразит таблицу со стандартным именем Table1 в режиме конструктора. Теперь вы можете задать для новой таблицы поля и их описания. Чтобы задать первое поле, выполните следующие действия: ■ Установите курсор в первой строке окна Table Designer в поле, расположенное прямо под надписью Column Name.

■ Введите название id_анкета и нажмите клавишу Tab. ■ В столбце Data Type, выберите Int из всплывающего списка и нажмите клавишу Tab. ■ Уберите флажок в столбце Allow Nulls. ■ Во вкладке Column Properties внизу окна, найдите раздел Identity Specification, нажмите значок Плюс (+), чтобы раскрыть этот раздел, и установите значение Yes для свойства Is Identity см. Рисунок 49. ■ Щелкните правой кнопкой мыши по строке id_анкета и выберите пункт Set Primary Key из контекстного меню

Установка значение Yes для свойства Is Identity для поля id_анкета сообщает SQL серверу, что каждый раз при добавлении новой записи в таблицу это поле должно принимать уникальное значение. Если вы выделили одно или несколько полей таблицы, щелкнули по выделению правой кнопкой мыши, а затем выбрали Set Primary Key из контекстного меню, то SQL сервер будет обрабатывать эти поля для идентификации записей таблицы. 3. Когда вы зададите все свойства текущего поля, обратите внимание на то, что снизу появилась пустая Рисунок 49. Определение полей базы данных строка, в которой вы можете создать новое поле. Таким образом, переходя от строки к строке, вы можете задать все поля и их свойства (см. Таблица 7) Таблица 7. Перечень полей таблицы "Анкета"

Column name

Data Type

Allow Nulls

id_анкета ФИО

int Unchecked nvarchar(60) Checked

[дата рождения]

smalldatetime Unchecked

Identity

Primary Key

Да

Да

телефон [электронный доход знак

nvarchar(15) nvarchar(50) smallmoney int

Checked Checked Checked Unchecked

4. Выберите пункт Save Tablen из меню File, где n – целое число, которое VWD2005 EE

Рисунок 50. Окно сохранения новой таблицы

назначает каждой вновь создаваемой таблице. Когда появится диалоговое окно Choose Name см. Рисунок 50 , введите название таблицы, например, «Анкета», а затем щелкните на кнопку OK. Чтобы добавить, изменить или удалить поля в существующей таблице, щелкните правой кнопкой мыши по таблице в окне Database Explorer и затем выберите пункт Open Table Definition из выпадающего меню. Это действие отобразит перечень полей выбранной таблицы (см. Рисунок 49). Чтобы удалить таблицу, щелкните по ней правой кнопкой мыши в окне Database Explorer и выберите пункт Delete. Это действие удалит и определение таблицы, и все данные, которые она содержит. Чтобы просмотреть данные, содержащиеся в таблице, щелкните правой кнопкой мыши по названию таблицы в Database Explorer и выберите пункт Show Table Data в выпадающем меню. В результате отобразится окно Query Designer, и вы увидите свои данные. Как показано на Рисунок 51. Окно Query Designer содержит четыре области: Results, SQL, Criteria, Diagram При запуске Query Designer выполняет очень простой запрос, результаты которого походят на электронную таблицу и отображаются в области Results. Вы можете использовать ее для изменения, добавления, или удаления данных: ■ Чтобы изменить значение любой ячейки, выберите ее и напечатайте новое значение. ■ Чтобы добавить запись, напечатайте значения ее полей в пустую строку в конце таблицы. ■ Чтобы удалить запись, выберите ее и нажмите клавишу Del.

VWD2005 EE немедленно вставляет, обновляет или удаляет текущую запись всякий раз, когда вы нажимаете ENTER, Del или переходите к другой записи. Поэтому нет никакой надобности в дополнительном сохранении внесенных изменений. Если вы просто хотите быстро просмотреть свои данные и, возможно сделать несколько исправлений, то рассмотренной выше области Results вполне достаточно для этого. Однако,

если вы хотите выполнить более сложные операции нужно задействовать другие области окна Query Designer. Чтобы отобразить любую из этих областей, нужно сделать следующее: 1. Щелкните правой кнопкой мыши по окну Query Designer. 2. Выберите Pane из контекстного меню. 3. Выберите область окна, которую Вы хотите отобразить или скрывать. Каждая область выполняет свои задачи, вот краткое описание каждой из них:

Рисунок 51. Просмотр содержимого таблицы

■ Diagram. Отображает маленькое окно для каждой таблицы, включенной в запрос. Флажки указывают области, предназначенные для вывода, и значки AZ указывают порядок сортировки. o Чтобы добавить таблицу к диаграмме (и следовательно к запросу) перетащите ее из окна Database Explorer и поместите ее на область Diagram. o Чтобы соединить пару таблиц (то есть, получить отчеты, основанные на значениях данных из обеих таблиц) перетащите нужное поле из одной таблицы и поместите его на соответствующее поле в другой таблице. o Чтобы изменить свойства объединения таблиц, щелкните правой кнопкой мыши по линии, соединяющей эти две таблицы и выберите тип объединения, который вам нужен. ■ Criteria. Отображает в табличном и доступном для редактирования виде представление полей из всех таблиц, включенных в запрос. ■ SQL Отображает SQL команды, которые автоматически генерируются в соответствии с запросом.

Всякий раз, когда Вы обновляете одну из областей окна Query Designer: SQL, Criteria или Diagram, VWD2005 EE обновит и две другие области окна. Если, например, Вы измените область окна SQL, то VWD2005 EE обновит область Diagram и область окна Criteria соответственно. ■ Results. Отображает результаты выполнения запроса. Запрос, который выполняется по умолчанию, когда вы выбираете команду Show Table Data имеет вид: SELECT * FROM <названия таблицы>

Если Вы будете использовать области Diagram, Criteria или SQL, чтобы изменить этот запрос, то область окна Results не отобразит ваших изменений до тех пор, пока вы не выполните одно из двух действий: ■ Выберите пункт Execute SQL из меню Query Designer, или ■ Щелкнув правой кнопкой мыши по окну Query Designer, выберите пункт Execute SQL из контекстного меню.

VWD2005 EE может соединить ваш Web-сайт с существующими базами данных. Он позволяет также создать новую базу данных и соединиться с ней. Обычно базы данных размещаются в папке App_Data вашего Web-сайта. VWD2005 EE может также создать, изменять и обновлять таблицы базы данных.

Лабораторная №09  Создать базу данных "Зодиак" со следующими таблицами

id_прогноз

1. Анкета (содержит личные данные о пользователе

знак

сайта) 2. Описание знаков (содержит краткую характеристику знака зодиака) 3. Прогноз (содержит прогноз для каждого знака зодиака на конкретную дату)

дата содержание

■ Анкета Имя поля

Тип данных

Допускается NULL

Тип данных

Допускается NULL

id_анкета

анкета

ФИО

id_анкета

описание_ знаков id_знаки название характеристика

ФИО

Дата_Рождения

Дата_Рождения

Телефон

Телефон

Электронный_Адрес

Электронный_Адрес доход

доход знак

знак

■ Описание знаков Имя поля id_знаки

Прогноз id_прогноз знак

название характеристика

дата содержание

■ Прогноз Имя поля

Тип данных

Допускается NULL

Во всех таблицах для каждого поля укажите тип данных и допущение значения NULL

Тема 2. Отображение информации из базы данных  Для отображения содержимого из базы данных на Web странице VWD2005 EE использует три вида компонентов: ■ Data Connection, обеспечивает доступ к базам данных. ■ Data Source использует Data Connection для того чтобы искать, вставлять, обновлять и удалять записи в базе данных, ничего не показывая пользователю. ■ Data Bound Controls показывает информацию из базы данных, используя Data Source.

Чтобы оценить легкость работы по созданию приложений баз данных с использованием VWD2005 EE, выполним следующую процедуру: В окне Database Explorer, раскройте любое существующее подключение Data Connection и найдите таблицу или запрос, который нужно отобразить в Web-странице. Откройте Web-страницу в Режиме конструктора. Перетащите таблицу или запрос из Database Explorer и поместите его на открытую страницу (см. Рисунок 52), это действие добавляет два элемента управления к Web-странице: SqIDataSource - управляет Рисунок 52. Использование элемента управления GridView. источником данных и GridView - отображает в табличном виде информацию из базы данных. GridView – один из самых популярных и полезных элементов управления данными. VWD2005 ЕЕ автоматически связывает элемент GridView и источник данных. Вы также можете создать источник данных, перетаскивая значок SqlDataSource из группы Toolbox's Data и помещая его на страницу. Таблица 8 описывает некоторые элементы управления данными.

Таблица 8. Элементы управления данными

Управление SqIDataSource

Описание Производит поиск и обновление информации в базах данных Microsoft SQL сервера. AccessDataSource Производит поиск и обновление информации в базах данных Microsoft Access. ObjectDataSource Производит поиск и обновление информации через бизнес объекты. XmlDataSource Служит для работы с информацией, содержащейся в XML файлах. SiteMapDataSource Обрабатывает информацию, содержащуюся в файле карты сайта.

Когда источник данных создается путем перетаскивания таблицы или запроса из Database Explorer, то формируемый отчет показывает записи без сортировки. Чтобы изменить настройки отчета, созданные по умолчанию, нужно выполнить следующие действия: 1. Выделите элемент SqIDataSource, щелкните по нему правой кнопкой мыши и из выпадающего меню выберите пункт Configure Data Source. 2. Когда диалоговое окно Choose Your Data Connection (см. Рисунок 53), появится, вы должны: ■ использовать раскрывающийся список, чтобы выбрать нужную строку подключения, или ■ щелкнуть на кнопку New Connection, чтобы создать новую строку подключения данных.

Рисунок 53. Выбор подключения

Чтобы отобразить содержимое строки подключения источника данных нужно нажать на значок Плюс (+), который предшествует надписи Connection String 3. Нажмите кнопку Next, чтобы перейти к окну Configure The Select Statement (см. Рисунок 54). Для составления простых запросов выберите пункт Specify columns from a table or view задайте следующие параметры настройки: ■ Name. Определяет таблицу или запрос, с которым вы хотите работать. Раскрывающееся меню позволяет выбрать любую таблицу, доступную при этой строке подключения данных. ■ Columns. Отметьте флажком, те поля которые нужно включить в отчет. Чтобы отметить все поля, пометьте флажком поле звездочка (*).

■ Return Only Unique Rows. Этот флажок нужен, если две или более записей имеют одинаковые значения полей, а нужно показать только одну из них. ■ WHERE. Нажав эту кнопку вы откроете окно Add WHERE, где можете задать условия для отобора записей. ■ ORDER BY. Нажав эту кнопку вы откроете окно Add ORDER BY, где можете определить поля участвующие в сортировке данных ■ Advanced. Нажав эту кнопку вы откроете окно Advansed SQL Generation Options. Если хотите использовать источник данных для обновления записей установите этот флажок напротив опции Generate INSERT, UPDATE and DELETE statements. В результате будут сгенерированы операторы для вставки, обновления и удаления записей (INSERT, UPDATE, DELETE). Другая опция называется Use optimistic concurrency. Используйте ее, если ожидается высокая нагрузка на создаваемый вами ресрус.

Рисунок 54. Выбор полей из таблицы

Если эти опции не удовлетворили ваши запросы, то можно выбрать пункт Specify a custom SQL statement or stored procedure в том же диалоговом окне (см. Рисунок 54)

4. Если вы выбрали пункт Specify a custom SQL statement or stored

Рисунок 55. Составление собственных SQL операторов

procedure на предыдущем шаге, то нажмите кнопку Next. В результате отобразится диалоговое окно Define Custom Statements or Stored Procedures (см. Рисунок 55). Чтобы определить собственные операторы SELECT, UPDATE, INSERT или DELETE, выберите вкладку соответствующую нужному оператору и затем нажмите на кнопку Query Builder. В результате отобразится конструктор запросов (см. Рисунок 51), с помощью которого вы можете создать SQL запрос и даже проверить его работу, нажав на кнопку Execute Query. Если проверка прошла успешно, нажмите на кнопку OK. 5. Нажмите кнопку Next. Отобразится диалоговое окно Test Query (см. Рисунок 56), Нажмите кнопку Test Query и убедитесь, что на экране появились нужные вам данные. Если все правильно нажмите кнопку Finish. В противном случае нажмите кнопку Previous и внесите нужные изменения.

Многие элементы управления, размещаемые на Web-страницах, могут связываться с источниками данных. Например, чтобы заполнить элемент DropDownList значениями полей таблицы базы данных, задайте у него следующие три свойства: ■ DataSourceID. Имя источника данных, которое указывает на таблицу или запрос с необходимой информацией ■ DataTextField. Имя поля, значения которого будут отображаться при работе пользователя с элементом DropDownList. Обычно эти значения относятся к строковому типу. ■ DataValueField. Имя поля, значения которого будут возвращаться элементом DropDownList. Обычно эти значения относятся к целому типу.

Часто бывает необходимо отобразить несколько полей для каждой записи таблицы в одном элементе управления с возможностью их непосредственного обновления. Таким требованиям удовлетворяют элементы, перечисленные в Таблица 9. Рисунок 56. Тестирование запроса

Таблица 9. СВЯЗАННЫЕ УСТРОЙСТВА ОТОБРАЖЕНИЯ ДАННЫХ

Элемент Описание управления GridView Отображает данные в табличном виде DetailsView Отображает поля записи из источника данных в виде HTML таблицы, каждая строка корой соответствует полю записи FormView Отображает отдельные записи из источника данных, но вместо отдельных ячеек строк он использует заданные пользователем шаблоны Repeater Предоставляет гибкий и удобный механизм отображения повторяющихся списков элементов. DataList Похожи на элементы управления Repeater, но обладают дополнительными возможностями: они поддерживают форматирование по колонкам, а также выбор и редактирование элементов

Поддержка способ Присутствует в обновления данных версии ASP Update, Delete 2.0 Insert, Update, Delete 2.0 Insert, Update, Delete

2.0

Дополнительный код 1.0 Дополнительный код 1.0

Из перечисленных в таблице элементов управления, связанных с отображением данных, элементы GridView, DetailsView и FormView наиболее удобны в использовании. Процесс конфигурации этих элементов почти одинаков для каждого из них. Покажем его на примере конфигурирования элемента управления GridView.

Будем использовать элемент управления GridView для создания страницы Анкетных данных пользователей сайта «Зодиак» (Рисунок 57). На рисунке вы видите страницу, которая оформлена с использованием уже известных вам элементов: меню; темы; и строки перемещения. Обратите внимание на таблицу содержащую сведения о пользователях из таблицы «Анкета» - это и есть элемент управления GridView. Чтобы создать Web-станицу, содержащую действия:

GridView, проделайте следующие

1. Откройте новую пустую страницу. Вы можете

применить к ней мастер страницу или другие способы форматирования, которые необходимы для ее оформления. 2. Добавьте элемент управления GridView и SqIDataSource к странице, для этого вы можете использовать любой из вариантов: Рисунок 57. С ЭТИМ ДИАЛОГОВЫМ

■ Перетащите таблицу "Анкета" из окна Database Explorer и поместите ее на вашу страницу. ■ Перетащите элемент управления GridView и SqIDataSource из группы Data панели Toolbox на открытую Web-страницу.

3. Откройте меню задач элемента управления SqIDataSource и выберите в нем пункт

Configure Data Source. 4. Когда появится диалоговое окно Choose Your Data Connection, выберите или создайте подключение к базе данных “Зодиак”, а затем нажмите кнопку Next. 5. Когда появится диалоговое окно Configure The Select Statement, выберите таблицу "Анкета", а в ней поля ФИО, дата рождения, телефон, электронный адрес, доход. 6. Нажмите кнопку WHERE, когда появится диалоговое окно Add WHERE, определите значения следующих полей: ■ Column (доход) ■ Operator (>= )

Рисунок 58. Задание условия на отбор записей

■ Source (none) ■ Value (10000)

а затем нажмите кнопку Add (см. Рисунок 58). В результате мы получим запрос, показывающий только записи, в которых доход больше или равен 10.000 7. Нажмите кнопку OK, чтобы закрыть окно Add WHERE, затем нажмите кнопку ORDER BY в окне Configure The Select Statement. 8. Когда появится диалоговое окно Add ORDER BY, определите значение поля Sort by равное ФИО, а затем нажмите кнопку OK. В результате будет установлена сортировка ваших записей по полю ФИО. 9. Нажмите последовательно кнопки Next, Test Query и Finish, чтобы закончить работу мастера. Конфигурирование элемента управления SqIDataSource завершено, теперь нужно закончить конфигурирование элемента управления GridView, для этого выполните следующие действия: 1. Откройте меню задач элемента управления GridView и удостоверьтесь, что поле Choose Data Source указывает на тот источник данных, который вы только что сконфигурировали. 2. Поставьте флажки напротив следующих опций: ■ Enable Paging. Разбивает весь отчет на страницы, содержащие заданное число записей. Внизу отчета появляются номера страниц, которые можно использовать для простмотра записей (см. Рисунок 57). ■ Enable Sorting. Позволяет сортировать записи, показанные на Web странице, для этого достаточно щелкнуть по оглавлению нужного столбца.

Рисунок 59. Определение полей и их порядка следования в отчете

3. Из меню задач выберите пункт Edit Columns. Появится диалоговое окно Fields (см. Рисунок 59). Используйте область Selected Fields и связанные с ним кнопки-стрелки "вверх" и "вниз", чтобы задать порядок следования полей в отчете: ФИО, дата_рождения, телефон, электронный_адрес, доход. 4. Выберите поле ФИО в области Selected Fields, а затем, используя область BoundField Properties, задайте свойства, перечисленные в Таблица 10. Повторите эту процедуру для остальных полей

Таблица 10. СПИСОК ПРОДУКТОВ В НЕДАВНО-ОТОБРАННОЙ КАТЕГОРИИ

Свойство DataField HeaderText Element Style: HorizontalAlign

ФИО Фамилия Имя Отчество Left

Поле Дата_рождения телефон Дата рождения Контактный телефон Right Right

Электронный_адрес доход Электронный адрес Годовой доход Right Right

5. Нажмите на кнопку OK, чтобы закрыть диалоговое окно Fields 6. Сохраните страницу и просмотрите ее в вашем браузере.

Мы убедились, что с помощью VWD2005 EE можно создавать привлекательные Web страницы, которые отображают информацию из базы данных различными способами. Все это можно сделать, не написав ни строчки кода, а только используя компоненты: Data Connection, Data Source и Data Bound Controls.

Тема 3. Управление базой данных  Чтобы мы имели возможность просматривать информацию, хранящуюся в базе данных ее туда должен кто-то ввести. Ввод информации в базу данных можно осуществлять с помощью уже известных элементов управления GridView и DetailsView, в которых нужно включить соответствующие опции. Тогда элемент GridView позволяет обновлять или удалять записи, а элемент управления DetailsView можно использовать для записей. Обратите добавления внимание, на Рисунок 60, где показан элемент управления GridView, в котором для каждой записи имеются две ссылки: «правка» и «удалить». ■ Правка. Использует формы HTML для отображения каждого поля записи, значения которых можно менять, а затем, щелкнув по кнопке «Обновить» сохранить изменения или нажав кнопку «Отменить» отказаться от них. Рисунок 60. Использование элемента управления GridView для обновления данных ■ Удалить. Немедленно удаляет соответствующую запись. ■ Выбор. Отмечает соответствующую запись как текущую.

Покажем, как настроить элемент управления GridView для обновления и удаления записей:

Рисунок 61. Проверяем наличие первичного ключа

1. Проверьте, имеет ли таблица базы данных первичный ключ. Для этого, щелкните правой кнопкой мыши по таблице в Database Explorer, и выберите пункт Open Table Definition. Убедитесь в том, что хотя бы одно поле объявлено первичным ключом (см. Рисунок 61), если это не так, то выберите поле, которое может служить первичным ключом, щелкните по нему правой кнопкой мыши и выберите пункт Set Primary Key из контекстного меню. 2. Сконфигурируйте элементы управления Data Source и GridView для отображения нужных записей. Просмотрите страницу, чтобы убедиться в правильности всех настроек. 3. Проверьте, что у элемента управления Data Source заданы операторы INSERT, UPDATE и DELETE. Это можно сделать следующим образом:

■ Выберите пункт Configure Data Source из меню задач элемента управления SqlDataSource. ■ Нажмите на кнопку Next, чтобы перейти к окну Configure the Select Statement. ■ Нажмите на кнопку Advanced, когда появится диалоговое окно Advanced SQL Generation Options, убедитесь, что флажком помечена опция Generate INSERT, UPDATE and DELETE statements (см. Рисунок 62).

Если кнопка Advanced или опция Generate INSERT, UPDATE and DELETE statements недоступны, то закройте окно Advanced SQL Generation Options, если оно было открыто. В окне Configure the Select Statement выполните любое из следующих действий:

Рисунок 62. Включаем опцию вставки, обновления и удаления записей

■ Выберите опцию Specify a custom SQL Statement Or Stored Procedure и нажмите кнопку Next, чтобы отобразить диалоговое окно Define Custom Statements Or Stored Procedures. Убедитесь, что во всех вкладках SELECT, UPDATE, INSERT, DELETE присутствуют правильные SQL команды. ■ Пометьте необходимые поля вашей таблицы, затем нажмите кнопку Advanced и выберите опцию Generate INSERT, UPDATE and DELETE statements.

4. Отобразите меню задач элемента управления GridView и выберите любую комбинацию

следующих опций:

■ Enable Editing. Установите этот флажок, чтобы элемент управления GridView мог изменять записи таблицы базы данных. ■ Enable Deleting. Установите этот флажок, чтобы элемент управления GridView мог удалять записи таблицы базы данных. ■ Enable Selection. Установите этот флажок, чтобы элемент управления GridView мог назначать выбранную запись текущей.

5. Сохраните страницу и просмотрите ее в браузере.

Теперь перейдем к созданию элемента управления DetailsView, с помощью которого можно будет добавлять записи в таблицу базы данных, для этого нужно выполнить следующие действия: 1. Создайте новую пустую страницу. Отредактируйте эту страницу так, как вы считаете нужным. Например, можете применить мастер-страницу или другие способы форматирования. 2. Добавьте элемент управления SqlDataSource к странице, перетащив его из группы Data панели Toolbox. Сконфигурируйте элемент SqlDataSource так, чтобы можно было обратиться к таблице "Анкета" в базе данных «Зодиак». Когда вы перейдете ко второй странице настроек, нажмите кнопку Advanced и удостоверьтесь, что выбрана опция Generate INSERT, UPDATE and DELETE statements. 3. Добавьте элемент управления DetailsView к редактируемой странице, перетащив его из группы Data панели Toolbox. 4. Сконфигурируйте следующие параметры с помощью меню задач для созданного элемента управления DetailsView. ■ В качестве значения поля Choose Data Source укажите тот источник данных, который был создан на шаге 2. ■ Поставьте флажок напротив опции Enable Inserting, тем самым вы разрешите элементу правления добавлять записи.

5. Перейдите к окну Properties и проверьте настройки элемента управления

Рисунок 63. Просмотр элемента управления DetailsView, сконфигурированного для добавления записей

DetailsView. Приведите их в соответствие с теми, что указаны в Таблица 11. 6. Сохраните страницу и просмотрите ее в браузере. Добавленные вами записи должны появляться, после того как вы обновите соответствующую Webстраницу.

Таблица 11. Свойства элемента управления DetailsView

Свойство Значение AutoGeneratelnsertButton True AutoGenerateRows

False

Описание Показывает внизу элемента управления DetailsView ссылку «Вставить» (Insert) для добавления записи в таблицу базы данных. Отменяет автоматическую подстановку полей записи таблицы в DetailsView.

DataKeyNames DataSourceld DefaultMode HorizontalAlign

id _анкета

Определяет список областей, которые служат первичным ключом таблицы базы данных. SqIDataSource1 Определяет название источника данных, посредством которого будет происходить добавление записи. Insert Задает для элемента управления DetailsView режим вставки записей по умолчанию. Center Размещает элемент управления DetailsView посередине страницы.

Рисунок 63 показывает, как выглядит созданная страница в браузере. Чтобы добавить запись, содержащую новую анкету, посетитель должен заполнить поля: ФИО, дата рождения, телефон, электронный адрес, доход, а затем нажать кнопку Вставка

Лабораторная №10  Сделать следующие формы для каждой таблицы базы данных: Таблица Назначение форм DetailsView GridView Анкета Добавление анкеты Форма не требуется пользователем Описание Просмотр подробной Просмотр кратких характеристики того характеристик по знаков или иного знака каждому из знаков Прогноз Просмотр прогноза на Просмотр прогнозов конкретную дату за определенный период Какие поля каждой из таблиц не нужно отображать на формах: Таблица Перечень полей Анкета Описание знаков

Форма

Перечень полей

таблица Анкета, форма DetailsView таблица Описание знаков, форма DetailsView таблица Описание знаков, форма GridView таблица Прогноз, форма DetailsView таблица Прогноз, форма GridView Какие свойства формы заданные по умолчанию вы изменили? Запишите их в таблицу, представленную ниже, в качестве образца используйте Таблица 11 Свойство

Значение

Описание

таблица Анкета, форма DetailsView таблица Описание знаков, форма DetailsView таблица Описание знаков, форма GridView

Прогноз Отметьте, для каких из следующих форм желательно задать разбиение на страницы: ■ таблица Анкета, форма DetailsView; ■ таблица Описание знаков, форма DetailsView; ■ таблица Описание знаков, форма GridView; ■ таблица Прогноз, форма DetailsView; ■ таблица Прогноз, форма GridView;

Отметьте, по каким полям каждой из форм стоит разрешить сортировку значений:

таблица Прогноз, форма DetailsView таблица Прогноз, форма GridView После создания форм введите с помощью них несколько записей во все таблицы базы данных.

Recommend Documents

Build a Web Site Microsoft® Visual Web Developer ™ 2005 Express Edition A01622124.indd i 9/16/05 1:01:57 PM PUB...
André Wussow Visual Web Developer 2005 Express Edition André Wussow Visual Web Developer 2005 Express Edition André...
A03T62058x.fm Page iii Wednesday, July 28, 2004 3:48 PM Table of Contents Acknowledgments. . . . . . . . . . . . . . . ...
Delorme.book Page i Tuesday, November 15, 2005 11:40 AM Beginning Visual Web Developer 2005 Express From Novice to Pro...
TEAM LinG Visual Web Developer 2005 Express Edition TM FOR DUMmIES ‰ Visual Web Developer 2005 Express Edition ...
TEAM LinG Visual Web Developer 2005 Express Edition TM FOR DUMmIES ‰ Visual Web Developer 2005 Express Edition ...
www.GetPedia.com *More than 150,000 articles in the search database *Learn how almost everything works TEAM LinG Vis...