Основы AJAX и начало работы с Microsoft ASP.NET AJAX Framework - Первый пример ASP.NET AJAX: Используем UpdatePanel
ОГЛАВЛЕНИЕ
Первый пример ASP.NET AJAX: используем UpdatePanel
UpdatePanel пригоден в случаях, когда вы хотели бы отсылать только часть страницы, а не всю. Такой ограниченный постбэк называется частичным постбэком, и его очень легко реализовать, используя UpdatePanel. Вы, скорее всего, знаете, что многие элементы управления ASP.NET могут вызывать постбэки: когда нажимают элементы управления Button; DropDownLists (выпадающий список) и CheckBoxes (кнопка с независимой фиксацией), когда их свойство AutoPostBack установлено в "Истина" (True); и т.д. В нормальных условиях, когда данные элементы управления вызывают постбэк, на сервер посылается вся страница. Все значения полей формы посылаются из браузера на сервер. Сервер обрабатывает всю страницу и после возвращает цельный HTML код, который впоследствии отображен заново браузером.
Когда данные элементы управления появляются в UpdatePanel, вызывается частичный постбэк, но на сервер отсылаются только поля формы в UpdatePanel. Сервер обрабатывает эту страницу, но высылает обратно только разметку для тех элементов управления UpdatePanel, которые необходимо было обработать. Клиентский скрипт, начавший частичный постбэк принимает с сервера результат в виде частичной разметки и плавно обновляет информацию в браузерном окне, используя возвращенные значения. Следовательно, UpdatePanel улучшает быстроту реакции страницы уменьшая количество информации, которой обмениваются клиент и сервер, путем обработки только информации только определенной части экрана , которую выслал частичный постбэк.
Давайте посмотрим на действующий UpdatePanel. Представленный демо-код, который также предлагается загрузить в конце данной статьи, демонстрирует простой пример. UpdatePanel в данном коде включает в себя только два элемента управления: Label (лэйбл) и Button (кнопку). Веб-элемент управления Label отображает текст наугад выбранной шутки. Нажав на кнопку Button вы загружает новую наугад выбранную шутку в элемент Label. Если вы следуете за ходом данной статьи, начните работу с добавления новой страницы ASP.NET в ASP.NET AJAX Веб-приложение, которое мы создали в разделе "Начало Работы с Microsoft ASP.NET AJAX".
Всякий раз, когда мы используем ASP.NET AJAX Framework на странице, нам необходимо начать с добавления элемента управления ScriptManager, так что начните с добавления ScriptManager на страницу. Далее, добавьте UpdatePanel на страницу. В пределах данного UpdatePanel, добавьте элементы управления Label и Button. После того, как вы выполните данные шаги, декларативная разметка вашей веб-страницы должна быть похожа на данную:
| <asp:ScriptManager ID="myScriptManager" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="JokeUpdatePanel" runat="server"> <ContentTemplate> <asp:Label ID="JokeText" runat="server" Font-Italic="False" Font-Names="Comic Sans MS" Font-Size="Large"></asp:Label> <br /> <br /> <asp:Button ID="NewJokeButton" runat="server" Text="Покажите мне еще одну шутку !" /> </ContentTemplate> </asp:UpdatePanel> |
На данном этапе все, что нам осталось, это написать код для серверной стороны. Когда страница впервые загружена, мы хотим, чтобы свойство Text лэйбла JokeText имело значение наугад выбранной шутки; также, всякий раз, когда нажата кнопка NewJokeButton, мы хотим обновлять свойство Text лэйбла, заменяя содержимое текстом новой шутки.
| protected void Page_Load(object sender, EventArgs e) { JokeText.Text = GetRandomJoke(); } protected void NewJokeButton_Click(object sender, EventArgs e) { JokeText.Text = GetRandomJoke(); } private string GetRandomJoke() { // Получаем случайное число Random r = new Random(); switch (r.Next(5)) { case 0: return "Why did the chicken cross the road? To get to the other side!!"; case 1: return "How much do pirates pay for their earrings? A Buccaneer!"; case 2: return "Why did the computer squeak? Because someone stepped on it's mouse!"; case 3: return "What is a golfer's favorite letter? Tee!"; default: return "A child comes home from his first day at school. Mom asks, \"What did you learn today?\" \"Not enough,\" the kid replies, \"I have to go back tomorrow.\""; } } |
На данном этапе мы используем технологию AJAX для того, чтобы выполнить частичный постбэк, когда нажимают кнопку Button из UpdatePanel. Следовательно, при нажатии на кнопку "Покажите мне еще одну шутку!", новый текст сразу же отображается на странице без необходимости обновления всей страницы. При условии, что это довольно-таки простой пример, так как страница является достаточно легковесной, данный принцип может быть расширен до размеров реального приложения (и мы так и сделаем в последующих главах данной серии статей). Например, у вас может быть страница, на которой расположено несколько табличных сеток, показывающих некоторый объем информации. Вы можете расположить все сетки на отдельных UpdatePanel. Тем самым, когда пользователь отсортировывает одну из табличных сеток, частичный постбэк произойдет, и информация в конкретной табличной сетке будет отсортирована без необходимости выполнения полного постбэка.
Суть данной статьи в том, чтобы показать, как необычайно проста задача реализации технологии AJAX в приложениях ASP.NET используя ASP.NET AJAX Framework. Элементы управления ScriptManager и UpdatePanel автоматически обрабатывают все трудности при инициации асинхронного постбэка и выводе возвращаемой информации.
Взгляд в будущее...
Данная статья рассматривает простой пример UpdatePanel. В реальных приложениях, как бы то ни было, но задачи не всегда так легки. Например, вы можете захотеть создать событие, внешнее по отношению к UpdatePanel, которое вызывает частичный постбэк. Мы пока не рассмотрели библиотеки AJAX, которые работают непосредственно с клиентской стороной; также мы не исследовали ценность элементов управления из инструментария AJAX Control Toolkit. Эти и многие другие темы будут рассмотрены в следующих главах данной серии статей. А пока...
Веселого программирования!