Средство разработки веб-приложений Visual Studio на основе ASP.NET/Добавление функциональности сайту
Создание Web Forms
правитьДля начала создаем базу данных, с которой мы будем работать. Для этого в разделе «Обозреватель решений» щелкаем правой кнопкой мыши по территории «AppData» - добавляем новый элемент, и выбираем «База данных SQL Server» в разделе «Visual C#» - «Данные», поскольку мы используем язык C# для нашего приложения. Называем базу DataBase, добавляем ее в проект.
После добавления в проект, вызываем двойным щелчком для редактирования. После этого мы открываем раздел «Таблицы», добавляем новую таблицу. Для этого примера воспользуемся очень простым сценарием, создадим только одну таблицу, в которой будет колонка, назовем ее «№», поскольку будем создавать табличку для хранения информации о преподавателях, тип integer, то есть целое число. Дальше не разрешаем использовать нули, в свойствах колонки открываем раздел "Спецификация идентифицирующего столбца", после этого говорим, что этот элемент является Identity, разворачиваем, указываем «Да» и теперь этот наш элемент будет использоваться в качестве уникального индекса.
Теперь в нашей базе данных есть таблица, в которой есть одно поле «№», являющаяся идентификатором. Одного поля недостаточно. Добавим еще немного полей, например, ФИО (тип – nvarchar, в которой 50 символов), и поле Email (nvarchar, 50 символов). Сохраняем таблицу, нажимаем на сохранение. Таблицу называем «Список преподавателей». У нас теперь есть таблица в базу данных. Осталось заполнить ее данными. Открываем правой кнопкой по списку преподавателей "Показать таблицу данных". После того, как мы выбрали, заполняем таблицу данными.
Теперь мы можем открыть нашу таблицу в страничке Default.aspx, открываем ее в конструкторе. Добавляем несколько элементов управления, это и есть основной подход к построению ASP.NET WebForms. Задача в том, чтобы мы могли использовать некоторые существующие строительные блоки, для того чтобы быстро создавать интерфейс.
Открываем Панель элементов, выбираем в разделе Данные – «SqlDataSource», поскольку мы хотим доставать данные из базы данных SQL Server. Нажимаем конфигурировать DataSource, выбираем строку соединения с нашей базой данных DataBase, нажимаем «Далее», говорим, что мы хотим сохранить строку соединения, эта строка в будущем нам понадобится для того чтобы наше приложение могло бы соединяться с нашей базой данных. В конфигурации строка будет сохранена под именем ConnectionString, нажимаем «Далее». Теперь нам предлагают данные, которые мы хотим получать. В данном случае отображаем полный список, кроме Email. Выборки на этот момент у нас нет, поэтому нажимаем «Далее», проверяем что всё работает , нажимаем "Пробный запрос", и «Готово». Мы сконфигурировали источник данных.
Теперь нужно использовать этот источник данных, для того чтобы добавить элементы интерфейса. Добавляем из вкладки "Данные" на панели элементов – GridView, в этом элементе выбираем источник данных SqDataSource, указываем что мы хотим сделать возможным выбор строчки с данными, указываем EnableSelection. Теперь у нас есть элемент, который позволит отображать данные из нашей базы данных.
Сохраним эту страницу и нажмем F5 для того чтобы запустить проект на выполнение. Проект запущен и теперь у нас на первой странице есть таблица и кнопки "Выбор", которые нам пока никак не помогают.
Давайте добавим больше функциональности. Добавим на форму еще один источник данных, также SqlDataSource. Конфигурируем ее, выбираем ранее сохраненную строку соединения ConnectionString, нажимаем «Далее» и теперь говорим, что хотим получить все данные, то есть отмечаем *, нажимаем Where и указываем, что значение колонки «№» должно быть = значению из контрола, то есть выбираем источник Control. Дальше указываем какой Control использовать, а после этого мы должны будем указать какое значение из этого элемента управления хотим получить и какое значение хотим использовать по умолчанию. Выбираем GridView1, значение по умолчанию не будет, добавляем это условие и нажимаем Ок, следуем «Далее», нажимаем Готово. У нас сконфигурирован второй источник данных. И теперь используем данные со второго источника для того чтобы добавлять элементы для редактирования данных, которые присутствуют у нас на нашей странице.
Для этого добавим еще один элемент из Панели элементов – Данные – DetailsView. Выбираем источник данных SqlDataSource2 и теперь запускаем проект на выполнение (F5). Если щелкнуть на ссылку выборки открывается форма, на которой представлены наши данные. Это уже интерфейс, который позволяет нам просматривать данные с деталями на нашей форме.
Пойдем дальше. Щелкаем по второму источнику данных, который используем для связи с полным описанием записей, которые хотим отобразить на страничке, тот самый источник, который получает в качестве источника выбранные параметры с GridView. Нажимаем конфигурировать, переходим Дальше, выбираем кнопку Addvanced, которая позволит нам открыть дополнительные параметры и говорим, что хотим использовать инструкции вставки, обновления, а также удаления записи, нажимаем Ок, сохраняем наш источник данных. Теперь он сконфигурирован так, что можем редактировать данные и когда мы щелкнем по DetailsView, у нас появляется возможность включить разрешить вставку, редактирование, удаление записей из страницы. Сохраняем эту страницу и запускаем проект на выполнение. Теперь в браузере мы можем выбрать первую запись, сказать Редактировать и исправить данные, например, вместо Бурганова Т.А. написать Бурганова Т.М.. Нажимаем обновить и теперь данные сохранились, но поскольку наша страница полностью не перезагрузилась, данные сохранились только в DetailsView, но не в GridView. Поскольку для того чтобы обновить данные в GridView, нам необходимо будет сделать несколько больше операций либо обновить страницу, например, переходом на другую ссылку, либо воспользоваться событиями, которые генерируют элемент управления, то есть те элементы, что можем обработать с точки зрения кода.
Переходим Visual Studio, щелкаем два раза по элементу DetailsView и нам открывается редактор кода. В редакторе кода у нас есть набор событий, например, изменение индекса, передаваемого из GridView в DetailsView. Нам это событие не нужно. Возвращаемся в страницу Default.aspx. Щелкаем по элементу DetailsView, нажимаем F4. Отобразится окно свойств. Выбираем событие ItemUpdated, то есть событие которое возникает после того как мы сохранили изменения. Щелкаем два раза, закрываем окно свойств и теперь у нас есть событие ItemUpdated. Для того чтобы обновить в GridView данные, пишем «GridView1.Databind()». Запускаем проект на выполнение. У нас обновляются данные и в форме GridView.
Список использованных источников
править| Назад | Содержание | Вперед |