Введение в AJAX и Atlas c использованием ASP.NET 2.0 - Создание GridView при помощи Atlas
ОГЛАВЛЕНИЕ
Создание GridView при помощи Atlas
После небольшой практики в предыдущем примере нам пора посмотреть на более практичный пример с использованием элемента управления GridView. Для начала, закройте ваш текущий проект, если он все еще открыт, и создайте новый проект, основанный на шаблоне Atlas. Для того чтобы облегчить вам работу по соединению с источником информации и чтобы у вас были те же результаты, что мы получим в примере, необходимо скачать исходный материал. В папке с названием App_Data под AtlasSecondExample folder вы найдете базу данных, названную Database.mdf. Скопируйте этот файл в вашу только что созданную папку веб-сайта App_Data.
| Если вы не используете SQL Server 2005 Express Edition, то... |
|---|
| Если у вас установлена полная версия SQL Server 2005, вместо SQL Server Express, вам необходимо приложить файл базы данных, который вы скачали, к вашей копии SQL Server 2005. Более того, далее, когда мы откроем мастер по настройке конфигурации TableAdapter Configuration Wizard, вас попросят выбрать ваш источник данных, и вместо того, чтобы выбрать файл Database.mdf, вам понадобится нажать на New Connection и тем самым создать новое соединение на вашу SQL Server 2005 базу данных, которую вы подгрузили. (Конечно, вы всегда можете загрузить и установить SQL Server 2005 Express Edition; данная установка бесплатна и может быть установлена параллельно другим версиям SQL Server 2005...) |
Откройте страницу Default.aspx в режиме кода и создайте код, расположенный между тегами <form> похожим на следующий пример:
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
Мы пояснили этот код в первом примере, так что здесь не должно быть ничего не понятного для вас.
Далее, создайте строго-типизированный источник данных DataSet, во время процесса создания вам предложат возможность автоматически сгенерировать SQL операторы по вставке, обновлению и удалению. Исследование эффективности строго-типизированных DataSet и способов их создания выходит за рамки данной статьи.
Чтобы создать ваш собственный DataSet, начните с выбора File / New File, выберите DataSet и нажмите Add (тем самым, оставляя DataSet названным DataSet1). Потом вы будете опрошены, на случай если бы вы хотели сохранить новый файл в папке App_Code; это наилучшее решение, так что нажмите Yes. Далее вас переведут к дизайнеру DataSet Designer, и мастер конфигурации TableAdapter отобразит:
Будьте уверены, что ваш файл Database.mdf выбран в выпадающем списке и нажмите Next три раза. Теперь пришло время ввести оператор SELECT который будет использован для заполнения DataSet записями из базы данных. Впишите выражение показанное ниже, далее нажмите Next дважды, и, наконец Finish.
SELECT *
FROM Employees
Наш оператор SELECT просто возвратит все поля и записи из таблицы Employees. Сохраните строго-типизированный DataSet и далее закройте DataSet Designer.
Теперь, когда мы закончили с настройкой нашего DataSet, мы можем уделить внимание связыванию его с GridView, использующим AJAX. Переключитесь в режим дизайна для просмотра вашей Default.aspx страницы и перетащите элемент управления GridView в UpdatePanel на странице. Вы мгновенно увидите всплывающий smart тег GridView. В "Choose Data Source" выберите "New Data Source". Далее вы будете переведены к мастеру конфигурации Data Source. Выберите "Object" и просто оставьте default ID, далее нажмите OK. На следующем окне, в выпадающем списке\меню вы должны увидеть TableAdapter, который мы создали и назвали DataSet1TableAdapters.EmployeesTableAdapter. выберите этот пункт, нажмите Next, и, наконец, Finish.
Мы почти достигли цели! Из смарт-тега GridView отметьте пункты "Enable Paging", "Enable Sorting" и "Enable Editing". Последнее, что необходимо сделать, это запустить проект. Вы должны увидеть результат, похожий на то, что отображено в следующем изображении.
Понажимайте, тестируя сортировку, листинг и функциональность правки. Заметьте что все нормальные функции GridView (т.е листинг, сортировка, обновление и т.д...) выполняются асинхронно! Этот пример завершает наше введение в Atlas используя ASP.NET 2.0.
До того, как вы завершите читать эту статью, я хотел бы упомянуть об одной вещи. Многие пользователи во время взаимодействия с динамической веб-страницей привыкают к эффекту постбэка, когда экран "мерцает" и все элементы на странице заново загружаются. По традиции, пользователь уже догадывается, что что-то произошло. Когда эти заминки искоренены при помощи AJAX, было бы неплохо предоставить пользователю какое-нибудь визуальное оповещение о том, что страница обрабатывает их действие. Одним из легко реализуемых путей исполнения этого является использование одного из Atlas встроенных серверных элементов управления, а именно UpdateProgess. Вы можете добавить элемент управления на любую страницу, и когда UpdatePanel посылает информацию назад, все то, что находится внутри тегов <ProgressTemplate> UpdateProgress, будет отображено до того, как обновление будет выполнено. Вы даже можете отобразить анимированное GIF изображение в нем, чтобы оповестить пользователя о том, что страница обрабатывается.
<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</atlas:UpdateProgress>