Использование элемента управления ползунком с автообновлением (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления Slider в наборе средств управления AJAX предоставляет графический ползунок, который можно управлять с помощью мыши. После изменения значения ползунка можно сделать его автообновление.

Обзор

Элемент управления Slider в наборе средств управления AJAX предоставляет графический ползунок, который можно управлять с помощью мыши. Можно сделать ползунок автообновлением, чтобы он обновлялся автоматически при изменении его значения.

Шаги

Для того чтобы ползунок автоматически обновлялся при изменении, оба текстовых поля нуждаются в атрибуте AutoPostBack="true": текстовое поле, которое станет самим ползунком, и текстовое поле, в котором сохраняется положение ползунка. Ниже приведена требуемая разметка для этого:

<asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" />
<asp:TextBox ID="SliderValue" runat="server" AutoPostBack="true" />

Элемент SliderExtender управления из набора средств управления AJAX ASP.NET назначает ползунок двум текстовым полям:

<ajaxToolkit:SliderExtender ID="se1" runat="server"
 TargetControlId="Slider1" BoundControlID="SliderValue" />

Дополнительный элемент метки позже будет использоваться для информирования пользователя о обратной отправке:

<asp:Label ID="LastUpdate" runat="server" />

Наконец, ScriptManager элемент управления ASP.NET AJAX загружает необходимый JavaScript для работы набора средств управления:

<asp:ScriptManager ID="asm" runat="server" />

Теперь ползунок возвращает данные; на стороне сервера это событие может быть обработано:

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 LastUpdate.Text = "Last update: " + DateTime.Now.ToLongTimeString();
 }
 }
</script>

Перемещение ползунка активирует повторную отправку данных на сервер

Перемещение ползунка активирует обратную передачу (щелкните, чтобы просмотреть изображение полного размера)

После этого дата этого изменения записывается в метку.

После этого дата этого изменения записывается в метку (щелкните, чтобы просмотреть изображение полного размера)