Частичное обновление страницы позволяет вам отправить на сервер только часть страницы, обработать ее и обновить в браузере пользователя только эту часть страницы. Это сокращает накладные расходы и обработку на сервере, а пользователи получают улучшенную среду. Об­новляется только та часть страницы, с которой они работают. Это и естественно, и быстро.

В этом примере мы создадим Web-страницу, которая позволяет пользователям выполнять поиск заказов клиентов. В качестве источника данных мы будем использовать базу данных Northwind. Мы создадим такую страницу, чтобы при отображении результатов пользователь мог их пролистать по страницам. Страницы данных будут реализованы как страницы с час­тичным обновлением. Это обеспечит отсутствие у пользователей ощущения выполнения нового поиска при каждом выборе новой страницы данных.

Для начала создайте простой Web-сайт ASP.NET. По умолчанию сайты ASP.NET уже под­держивают AJAX. Поэтому вам не нужно делать ничего особенного, кроме создания про­стого сайта ASP.NET (дополнительную информацию по созданию Web-сайтов см. в главе 14). Для настройки страницы Default.aspx на сайте нашего примера необходимо выполнить следующие шаги:

1.   Добавить на страницу ScriptManager. Вы можете считать ScriptManager общей логи­кой, требуемой в UpdatePanel для обработки частичного обновления страницы.

2.   Добавить на страницу UpdatePanel. Этот элемент управления будет содержать ту часть страницы, которую вы хотите частично обновить. Помещенные в UpdatePanel элементы будут переданы обратно на сервер независимо от остальной части страницы (и таким об­разом, независимо обновлены). Пользователь не увидит полного обновления страницы.

3.   Следующий шаг— выполнить компоновку той части страницы, которая находится вне UpdatePanel. Сюда входят: заголовок страницы, некие указания, текстовое поле для вво­да пользователем части имени клиента и кнопка поиска.

Ваша страница должна теперь выглядеть вроде показанной на рис. 17.2. Обратите вни­мание, что в верхней части страницы находится ScriptManager. Элемент управления UpdatePanel расположен ниже текста "Search results...". Этот текст и все то, что находит­ся выше него, будет делать полную отправку страницы. Все, что находится внутри Up­datePanel, будет выполнять частичную отправку страницы.

4.   Следующий шаг— настроить элемент управления GridView для доступа к данным. Для этого перетащите элемент управления GridView (из группы элементов управления Data в панели Toolbox) на поверхность конструирования внутрь UpdatePanel. Вы можете ис­пользовать совмещенное представление для проверки того, что элемент управления по­пал внутрь UpdatePanel.

5.   Используйте стрелку задач в правой верхней части элемента управления GridView для настройки источника данных. Используйте опцию Choose Data Source и выберите но­вый источник данных. Следуйте за подсказками мастера: выберите опции базы данных для источника данных и создайте подключение к базе данных Northwind.

Когда вы дойдете до опции Configure the Select Statement, выберите переключатель Specify a Custom SQL Statement or Stored Procedure и нажмите кнопку Next. Вы може­те использовать инструмент Query Builder для создания оператора SQL, который соеди­няет таблицы Customers и Orders. Пример дан в следующем коде. Обратите внимание, что оператор where использует параметр 0cust и ключевое слово like для определения указанного пользователем значения для поиска.

SELECT Customers.ContactName, Customers.CompanyName, Customers.Phone,

Orders.OrderDate, Orders.RequiredDate, Orders.ShippedDate,

Orders.ShipAddress, Orders.ShipCity, Orders.ShipVia,

Orders.Freight, Orders.OrderlD FROM Orders INNER JOIN Customers ON Orders.CustomerlD =

Customers.CustomerlD WHERE (Customers.ContactName LIKE 0cust + '%')

ORDER BY Customers.ContactName, Orders.OrderDate

После определения запроса нажмите в мастере кнопку Next. Теперь вы должны ока­заться на странице Define Parameters. Здесь вы можете определить источник парамет­ра, который вы создали в предыдущем операторе SQL. Для этого примера укажите, что: источником является Form, a FormField— это ваше текстовое поле, используе­мое для ввода данных (укажите TextBoxCustomer). На рис. 17.3 показан пример такой настройки.

6.   Следующий шаг— настроить разбивку на страницы для элемента управления GridView. Вы можете сделать это из смарт-тега; выберите флажок EnablePaging.

7.   В качестве необязательного шага вы можете несколько улучшить отображение GridView. В смарт-теге выберите AutoFormat для применения формата к сетке. Вы мо­жете также использовать ссылку Edit Columns для запуска редактора столбцов. Здесь вы сможете изменить текст заголовка любого столбца, изменить порядок следования столб­цов и настроить форматирование значений дат и валют.

Вот и все. Теперь у вас есть страница, которая показывает пользователю результаты поиска клиентов и заказов. Когда пользователь щелкает по одной из кнопок номеров страниц, то страница частично обновляется. Запустите приложение и введите несколько букв в поле TextBoxCustomer, а затем щелкните по кнопке Find. Мы сделали это на рис. 17.4. Когда вы выбираете ссылку на страницу (внизу данной страницы), то происходит обновление сетки.

Отображение для пользователя состояния обработки на сервере

Пользователи чувствуют себя гораздо уютнее тогда, когда они получают немедленную ре­акцию после нажатия какого-либо элемента Web-страницы и запуска некоего действия. Ко­нечно, выполнение многих серверных операций может занимать довольно длительное вре­мя. Если вы запрашиваете страницы, которые срабатывают медленно (примерно за секунду или более), либо работаете через медленную сеть, то будет лучше дать пользователю знать о том, что вы работаете над его запросом.

Элемент управления ASP.NET Update progress делает именно это. Когда пользователь щелкает для выполнения частичного обновления страницы, то вы можете выдать уведомле­ние об ожидании или анимированный рисунок в формате GIF. Затем (после завершения страницы) уведомление об ожидании исчезает и происходит частичное обновление страни­цы. Давайте рассмотрим, как встроить все это в страницу нашего примера.

В предыдущем примере вы реализовали частичное обновление страницы для страниц GridView. В этом примере вы обеспечите пользователей индикатором хода выполнения перелистывания страниц. Для начала вы будете использовать страницу, созданную ранее.

Далее указаны все шаги, которые необходимо применить к этой странице для реализации уведомления о ходе выполнения.

1.   Первый шаг — перетащить на страницу элемент управления UpdateProgress. Поместите этот элемент управления ниже элемента GridView, но вне элемента управления Update­Panel. В этом примере мы будем отображать индикатор хода выполнения под разбивкой, на страницы. Таким образом, пользователь будет видеть индикатор хода выполнения там, где сосредоточено его внимание.

Вы можете поместить элемент управления UpdateProgress в любом месте страницы, но не внутри самой панели UpdatePanel. При запуске частичной обратной передачи стра­ницы клиент немедленно сбросит уведомление о выполнении.

2.   Затем вам необходимо настроить несколько свойств элемента управления UpdateProgress для страницы. Вам нужно настроить свойство AssociatedUpdatePanellD, чтобы связать элемент управления UpdateProgress с элементом управления UpdatePanel. Именно так они связываются. Поскольку данная страница может иметь несколько элементов управ­ления обновлением, то настройка этого свойства просто необходима.

Вы можете также настроить в свойстве Display After то количество миллисекунд, кото­рое клиент должен ждать до отображения уведомления. В этом примере настройте не­большое значение (250 — это четверть секунды).

3.   Последний шаг— настроить сообщение, которое демонстрируется пользователю во время ожидания. Вы можете поместить в элемент управления UpdateProgress любой HTML-код или разметку. Вы можете сделать это при помощи перетаскивания элементов на элемент управления в представлении визуального конструктора. В представлении ис­ходного кода вы должны создать для вашей разметки узел ProgressTemplate.

В нашем примере вы можете разместить текст "Please wait...". Если у вас есть анимиро­ванный gif-файл, который работает в цикле, то вы также можете добавить его здесь. Раз- метка UpdateProgress должна выглядеть примерно так:

<asp:UpdateProgress ID="UpdateProgressResults" runat="server"

AssociatedUpdatePanelID="UpdatePanelData" DisplayAfter="200"

Dynami cLayout="t rue">

<ProgressTemplate>

<div class="title" style="text-align: center; font-size: 10pt;" >

<img src="images/rotation.gifM alt="waiting" />

Please wait ...

</div>

</ProgressTemplate>

</asp:UpdateProgress>

4.   Необязательно: если вы выполняете этот пример локально, то можете практически ниче­го не заметить во время ожидания. Поэтому следует создать время ожидания (просто для того, чтобы его увидеть). Конечно, в реальном приложении вы никогда не будете этого делать. Для этого добавьте код в событие PagelndexChanged элемента управления . GridView (для перевода выполняющегося потока в состояние неактивности).

Следующий код внесет задержку в четыре секунды:

protected void GridViewl_PageIndexChanqed(object sender, EventArgs e) { System.Threading.Thread.Sleep(4000);

Теперь вы можете запустить приложение. Когда вы щелкнете по номеру в списке страниц, то должны будете увидеть сообщение "Please wait...". На рис. 17.5 все это показано в действии.