Элемент управления Timer в ASP.NET AJAX Framework - Выполняем постбэк каждые n миллисекунд
ОГЛАВЛЕНИЕ
Выполняем постбэк каждые n миллисекунд
Элемент управления Timer создан для того, чтобы периодически вызывать постбэк. Его свойство Interval указывает количество миллисекунд до запуска постбэка. Во время постбэка, вызывается событие Tick Timer .
И это все! Элемент управления Timer по умолчанию вызывает постбэк для всей страницы, но вам необходимо, чтобы он вызывал частичный постбэк. Это может быть осуществлено двумя путями:
- Путем расположения элемента Timer вместе с UpdatePanel. Когда срабатывает Timer он вызывает постбэк, но поскольку он находится в UpdatePanel, постбэк становится частичным.
- Путем расположения элемента Timer за пределами UpdatePanel, но при этом добавив его как триггер UpdatePanel. Просмотрите статью "Используем UpdatePanel" на предмет вызова частичного постбэка из UpdatePanel, используя при этом элементы управления, находящиеся за пределами UpdatePanel.
Файлы, доступные в конце данной статьи, включают в себя файл Timer.aspx, который демонстрирует использование элемента Timer для того, чтобы асинхронно обновлять содержимое UpdatePanel каждые пять секунд. Более конкретно - данная страница отображает текущие котировки акций фиктивной компании. Чтобы получить данную функциональность, начните с создания новой; настройте ее так, чтобы она использовала ASP.NET AJAX Framework путем добавления элемента ScriptManager на страницу. Также добавьте элемент управления Label, названный CurrentTime, который мы будет использовать для отображения времени последнего обновления страницы, произведенного после полного постбэка. Далее добавьте элемент управления UpdatePanel и расположите содержимое, которое должно быть обновлено в нем каждые пять секунд. Я добавил три веб-элемента управления в UpdatePanel:
- Элемент управления Label, названный StockPrice, который используется для отображения котировок акции компании.
- Элемент управления Image , который отображает либо картинку с мешком денег, либо обанкротившегося парня, в зависимости от текущих котировок акции. (Немного юмора не помешает.)
- Другой элемент управления Label, названный CurrentPanelTime, отображает время последнего обновления UpdatePanel.
На данный момент декларативная разметка вашей страницы должна выглядеть примерно так:
<asp:ScriptManager ID="MyManager" runat="server">
</asp:ScriptManager>
This page last experienced a "full" postback at:
<asp:Label ID="CurrentTime" runat="server"></asp:Label></p>
<asp:UpdatePanel ID="MyUpdatePanel" runat="server">
<ContentTemplate>
Current stock price:
<asp:Label ID="StockPrice" runat="server" Font-Bold="True"></asp:Label><br />
<asp:Image ID="ResultsImage" runat="server" Width="100px" /><br />
<br />
The UpdatePanel was last refreshed at:
<asp:Label ID="CurrentPanelTime" runat="server"></asp:Label>
<br />
<asp:Timer ID="MyTimer" runat="server" Interval="5000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Добавьте метод, названный UpdateStockPrice, в страничный класс code-behind. Данному методу необходимо определить текущую котировку акции, отобразить ее в элементе StockPrice Label, и загрузить соответствующее изображение. Как видно из нижеприведенного кода, котировка акции просто-напросто является наугад выбранным числом в интервале от 0 до 100. Более того, свойство ForeColor элемента StockPrice установлено в красном цвете (Red) и отображается изображение с банкротом в случае, если котировка акции меньше ,чем $50.00; свойство ForeColor установлено в зеленом цвете (Green) и показывается изображение с мешком денег в случае, если цена акции больше либо равна $50.00.
private void UpdateStockPrice()
{
// Определяем новую (случайную) цену акции
Random rnd = new Random();
decimal quote = Convert.ToDecimal(rnd.NextDouble()) * 100.0M;
StockPrice.Text = quote.ToString("c");
if (quote < 50.0M)
{
StockPrice.ForeColor = System.Drawing.Color.Red;
ResultsImage.ImageUrl = "~/Images/Broke.gif";
}
else
{
StockPrice.ForeColor = System.Drawing.Color.Green;
ResultsImage.ImageUrl = "~/Images/MoneyBags.jpg";
}
}
Необходимо вызвать метод UpdateStockPrice в случае, если страница была впервые загружена, а также когда вызывается событие Tick элемента Timer. Создайте событие Page_Load в классе code-behind и установите свойство Text обоих элементов Label в текущее значение времени. Также вызовите метод UpdateStockPrice, если Page.IsPostback равно значению False (т.е. страница посещена впервые, а не после постбэка):
protected void Page_Load(object sender, EventArgs e)
{
CurrentTime.Text = DateTime.Now.ToLongTimeString();
CurrentPanelTime.Text = DateTime.Now.ToLongTimeString();
// Обновить котировку акции во время первого посещения страницы (а не во время последующих постбэков)
if (!Page.IsPostBack)
UpdateStockPrice();
}
Далее создайте обработчик для события Tick элемента Timer и, находясь там, вызовите метод UpdateStockPrice:
protected void MyTimer_Tick(object sender, EventArgs e)
{
// Обновить котировку акции
UpdateStockPrice();
}
Имея данную декларативную разметку и код, посетите страницы при помощи браузера. Каждые пять секунд Timer будет вызывать частичный постбэк, вырабатывается текущая котировка акции, и экран обновляется (точнее только часть экрана). Следующее изображение демонстрирует страницу во время первого визита. Заметьте, что время последнего совершенного полноценного постбэка (первоначальная загрузка страницы) и время последнего обновления UpdatePanel совпадают.
Заметьте, что время, показанное в UpdatePanel, на пять секунд больше, чем время загрузки страницы.
