Введение в AJAX и Atlas c использованием ASP.NET 2.0 - Элементарный пример Atlas
ОГЛАВЛЕНИЕ
Элементарный пример Atlas
Вместо того чтобы просто говорить об Atlas, мы сначала продемонстрируем основные идеи, используя простой пример. Вам сначала придется перейти на сайт Atlas (atlas.asp.net) , загрузить и установить файл April CTP setup (.msi) . Во время установки все настройки оставьте как они настроены по умолчанию. Этот конфигурационный файл установит шаблон веб-сайта Atlas в вашу установку Visual Studio 2005 либо Visual Web Developer .
Теперь, когда у вас уже установлен шаблон Atlas, мы можем перейти к нашему первому примеру. Запустите Visual Studio 2005. Когда он загрузится, нажмите на New Web Site в меню File. Вы увидите диалоговое окно похожее на то, что указано ниже.
Выберите пункт Atlas Web Site, располагающийся под My Templates, введите место расположения, и нажмите OK. Шаблон Atlas Web Site уже произвел некоторую предварительную установку за вас. Например, в проводнике solution, если вы посмотрите на директорию, ниже /bin, вы увидите, что Microsoft.Web.Atlas.dll уже был включен в ваш проект. Более того, если вы посмотрите на исходный код вашего Web.config файла, вы увидите все методы, которые необходимы для того, чтобы добавить функциональность Atlas в ваше веб-приложение. (Я не буду вдаваться во все подробности, принадлежащие коду, который Atlas внедряет в Web.config. Если вы желаете узнать больше о том, что же значит эта разметка, изучите документацию по Atlas (atlas.asp.net/docs)).
Наконец, если вы исследуете исходный код страницы Default.aspx вы сможете заметить что Atlas добавил новое объявление серверного элемента управления:
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
В каждой странице, где вы хотите внедрить функциональность Atlas, вы должны иметь в точности одно объявление элемента управления ScriptManager. Мы пока проигнорируем блок <script> в конце страницы и перейдем непосредственно к нашему примеру.
Для того, чтобы начать, вставьте следующий код в вашу Default.aspx страницу, тем самым заменяя код между тегами <form> :
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
</div>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
</form>
Вкратце, эта декларативная разметка создает два пользовательских интерфейса, которые обновляют элемент управления Label согласно текущим времени и дате на сервере. Первый интерфейс использует стандарт, запрос\ответ постбэк ("Full Post Back" элементы управления), в то время как второй будет использовать AJAX для того, чтобы создавать частичные постбэки. Я опущу обсуждение элементов управления "Full Post Back", так как они не должны требовать объяснений; вместо этого, мы сфокусируемся на "Partial Post Back" элементах управления.
Как вы могли уже заметить, атрибут EnablePatialRendering из элемента управления ScriptManager был добавлен и его значение установлено в "Истина". Это позволит ASP.NET посылать только части страницы назад на сервер , вместо того чтобы обновлять страницу каждый раз. Мы как раз этого и хотим! Для того чтобы обработать асинхронный постинг информации назад на веб-сервер, вам необходимо добавить элемент управления UpdatePanel на вашу страницу:
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>
Поместите те элементы управления ASP.NET, которые участвуют в асинхронном постбэке , между тегами <ContentTemplate> UpdatePanel . Атрибут Mode UpdatePanel указывает, когда частичный постбэк успешно произошел. Для этой страницы установите атрибут Mode в значение Conditional, что означает, что UpdatePanel будет посылать свою информацию назад на сервер в случае, если одно из этих трех событий произойдет:
- если метод Update() UpdatePanel был вызван напрямую
- событие UpdatePanel является причиной неявного вызова метода Update()
- серверный элемент управления, который находится в пределах UpdatePanel, вызывает постбэк
Наконец, добавьте следующий <script> блок для серверной стороны между тегами <head> страницы (вы также можете добавить это к страничному классу code-behind, если вам угодно):
<script runat="server">
void FullPostBackButton_OnClick(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}
void PartialPostBackButton_OnClick(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
</script>
Это обработчики события на серверной стороне для двух элементов управления Button (один располагается в пределах UpdatePanel, а другой - за пределами), которые будут обновлять Labels , находящиеся над ними, записывая в них информацию о текущих времени и дате, присланных с сервера.
Запустите проект сейчас и нажмите на каждую кнопку. После того, как вы выполните это, ваш экран должен выглядеть почти так же, как и следующее изображение:
Нажав на кнопку "Partial Post Back", вы увидите, как время и дата над ней обновляются без какого-либо мигания на странице, без полностраничного постбэка, и без изменений времени и даты в другой секции! Нажатие кнопки "Partial Post Back" запускает асинхронный постбэк на веб-сервер, используя объект XMLHttpRequest; веб-сервер затем посылает информацию назад, что было использовано для динамического обновления страницы. Этот простой пример демонстрирует простоту реализации AJAX поведений в вашем приложении используя Atlas.
На этой стадии ваше воображение наверняка бушует, думая о различных возможностях использования ASP.NET 2.0 Web элементов управления в сценариях AJAX. В нашем следующем примере мы будем использовать элемент управления GridView. Мы покажем насколько просто добавление частичных постбэков в целях обновления, сортировки и листания по записям!