Использование элемента управления Ползунок с автоматической обратной передачой (VB)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

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

Общие сведения

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

Этапы

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

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

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

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

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

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

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

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

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

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 LastUpdate.Text = "Last update: " & DateTime.Now.ToLongTimeString()
 End If
 End Sub
</script>

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

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

НазадВперед