|
Ajax - обновление части страницы
Технология AJAX позволяет обновлять страницу (или ее часть) без полной перезагрузки страницы.
Это может быть очень полезно при больших объемах на странице, где каждое полное обновление страницы черевато потерей времени и трафика.
Для применения AJAX в ASP.NET необходимо скачать с Microsoft пакет аякса и установить его на машину.
На самом деле можно скачать несколько dll и положить их в папку Bin вашего прилжения, но я рекомендую полную установку из пакета,
это сыкономит вам время и нервы в последствии.
Во-первых аякс пропишется в студии и позволит создавать проект с аяксом.
Во-Вторых компоненты аякса разместятся в toolbox. и тд
Итак создаем AJAX приложение
В toolbox появились компоненты AJAX
Для реализации аякса на странице которая будет использовать эту технологию должен быть обязательно ScriptManager
Добавляем его на страницу
Добавляем компонент UpdatePanel. При постбэке из этого контрола будет обновляться только эта часть, то есть элементы внутри updatepanel.
Внутрь updatePanel необходимо добавить тэг ContentTemplate и затем в нее уже добавлять компоненты
Добавим на форму компонент UpdateProgress, отображаться который будет, если запрос на обновление UpdatePanel будет происходить дольше чем указано
в свойстве DisplayAfter
Ну и для полноты ощущения добавим компонент Timer, который будет перезагружать UpdatePanel через интревал указанный в свойстве Interval
Вот что у нас получилось
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate >
<asp:Timer ID="Timer1" runat="server" Interval="10000">
</asp:Timer>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Updating ...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
|
В обработчике события Page_Load присвоим метке текущее время (находящейся на странице вне UpdatePanel)
и то же самое время в текстовое поле (находящееся в UpdatePanel)
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
TextBox1.Text = DateTime.Now.ToString();
}
|
Загрузим страницу
Как видите время равно в ооих компонентах
После того как пройдет время указанное в Timer произойдет постбэк части странице в рамках UpdatePanel
Смотрим на время
Как видно время обновилось только в текстовом поле, а это означает что сама страница перезагружена не была.
PS. Выбирая Ajax приложения студия копирует необходимые dll в Bin и делает настройки в Web.config
Предыдущая стр.
Оглавление
Следующая стр.
Средняя оценка:   (3 - 3 голосов)
Для оценки необходимо зарегистрироваться
Только зарегистрировавшиеся пользователи могут оставлять комментарии
Комментирует Valentina 26.04.2011 16:41:57
Ну updatePanel не пример... Лучше расскажите нам про вебметоды с CascadeDropDownList например :) это красиво :) а скачать и установить AjaxToolKit можно с официального сайта ASP.Net - это кому интересно.
Комментирует mt44 08.06.2011 8:34:52
На самом деле можно скачать несколько dll и положить их в папку Bin вашего прилжения, но я рекомендую полную установку из пакета,
это СЫКОНОМИТ(!) вам время и нервы в последствии.
бида)
|
|