Периодическое обновление экрана и заголовка веб-страницы при помощи ASP.NET AJAX

Разработчики, использующие ASP.NET AJAX Framework могут эффективно и интерактивно получать данные от веб-сервера при помощи клиентского интерфейса приложения (API) ASP.NET AJAX, небольшого кода JavaScript и веб-сервисов, которые поддерживают доступ к скриптам. Статья о получении данных с сервера при помощи веб-сервисов рассматривала способ создания таких веб-сервисов, а также способ вызова их из приложения ASP.NET AJAX. При помощи небольшого кода JavaScript данная функциональность может быть реализована для того, чтобы предоставить пользовательский интерфейс, который периодически обновляется, представляя соответствующую информацию пользователю без необходимости в обновлении обозревателя.

Представьте такую ситуацию: вы создаете веб-сайт, который служит внешним интерфейсом для работы с базой данных. База данных содержит задания, назначенные сотрудникам. На протяжении дня новые задания могут быть назначены другими сотрудниками, автоматизированными процессами или другими способами. Когда сотрудник авторизируется на сайте, он увидит гиперссылку, которая перечисляет количество невыполненных заданий в левом верхнем углу каждой страницы, и нажатие на данную ссылку переносит его на страницу, которая перечисляет все невыполненные задания по очереди. После выполнения одного задания она убирает задание из списка невыполненных. В обычном веб-приложении число невыполненных заданий в левом углу будет обновляться тогда, когда пользователь выполнит постбэк, вручную обновит страницу или посетит новую страницу. Разве не было бы удобнее заставить данное значение количества невыполненных заданий интерактивно обновляться каждый раз, когда новое задание будет назначено пользователю и введено в очередь?

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

Исследование примера веб-сайта

Приложение в конце статьи включает в себя пример, который демонстрирует рассматриваемый принцип. Пример - это очень простое приложение, управляемое данными, которое разработано таким образом, что позволяет пользователям авторизироваться, просмотреть их невыполненные задания и отметить задание как выполненное. Приложение использует систему Membership ASP.NET для предоставления поддержки пользовательских записей, в частности используется провайдер SqlMembershipProvider и учетные записи пользователей хранятся в базе данных ASPNETDB.mdf в каталоге App_Data.

База данных ASPNETDB.mdf также содержит таблицу WorkItems, которая имеет записи для каждого задания в системе. Как демонстрирует следующая таблица, каждая запись WorkItems имеет уникальный идентификатор (WorkItemID), описание (WorkItem), связано с определенным пользователем (UserId) и имеет дату и время добавления и выполнения задания (если оно было выполнено).

WorkItems
Название	Тип Данных	Описание
WorkItemID	int	Первичный ключ, IDENTITY
WorkItem	nvarchar(50)
UserId	uniqueidentifier	Внешний ключ к aspnet_Users.UserId
DateAdded	datetime	Дата/время добавления записи в таблицу
DateCompleted	datetime	Может быть NULL; если указано, то это дата/время завершения задания

Веб-приложение состоит из трех страниц:

• Default.aspx - домашняя страница сайта
• Login.aspx - страница авторизации
• WorkItems.aspx - отображает список невыполненных и завершенных заданий авторизированного на данный момент пользователя

Страница WorkItems.aspx, продемонстрированная в следующем рисунке, имеет кнопку для добавления от одного до пяти новых заданий, а также два элемента GridView. Верхний элемент GridView отображает задания (те, чье значение DateCompleted равно NULL) и выполненные задания (те, чье значение DateCompleted не равно NULL). GridView с невыполненными заданиями включает в себя в каждой строке кнопку CLOSE (LinkButton) , при нажатии которой задание будет закрыто путем установления значения DateCompleted соответствующей записи в текущую дату и время.

Три ASP.NET-страницы в веб-сайте используют одну и ту же мастер-страницу Site.master, которая определяет общий внешний вид - текст "Updating the Screen and Title Demo" в верхней части всех страниц, ссылки "Home" (Домашняя страница) и "Your Work Items" (Ваши задания) в левой колонке, а также  сообщение "Welcome back, Username" в правом углу. Также в левом углу есть область, которая отображает количество невыполненных заданий текущего пользователя - я ее обвел в указанном выше рисунке ("3 open work items"). На самом деле, этот текст является ссылкой - нажав на нее, пользователь будет перенесен на страницу WorkItems.aspx. Более того, текст находится в мастер-странице и поэтому появляется на каждой странице с содержимым, включая Default.aspx и другие страницы, которые будут созданы после.

Представьте себе, что пользователь посещает Default.aspx в 3:00 часа дня и у него три невыполненных задания. Он увидит сообщение "3 open work items" (3 невыполненных задания) в левом верхнем углу экрана. Теперь представьте, что он сворачивает обозреватель и начинает работать над заданиями, а в это время ему назначают еще два новых задания и они добавлены в очередь. Когда он заново открывает обозреватель и страница не была обновлена, то он увидит 3 невыполненных задания. В случае, если он вручную обновит экран, то он увидит теперь 5 невыполненных заданий, но об этом он должен помнить. Некоторые веб-приложения "принудительно" производят обновление посредством добавленного элемента <meta> для того, чтобы обновление было выполненооднократно в какой-то период, но такой подход может дезориентировать пользователей и может быть очень запутанным в страницах, где пользователю необходимо вводить информацию в текстовые поля или же работать с другими полями ввода - в таких случаях он рискует потерять всю информацию из-за того, что страница будет автоматически обновлена.

Лучшим решением было бы использование AJAX для интерактивного обновления текста в верхнем левом углу. И если JavaScript, который обновляет текст, также обновляет заголовок страницы таким образом, чтобы он включал в себя число незавершенных заданий, то пользователь сможет увидеть их число в панели задач когда обозреватель будет свернут. Дальше мы рассмотрим способ реализации такой функциональности используя ASP.NET AJAX Framework, веб-сервисы, поддерживающие скрипты и немного JavaScript.