自動ポストバックでのスライダー コントロールの使用 (VB)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit の Slider コントロールには、マウスを使用して制御できるグラフィカル スライダーが用意されています。 スライダーの値が変更されたら、自動ポストバックを行うことができます。

概要

AJAX Control Toolkit の Slider コントロールには、マウスを使用して制御できるグラフィカル スライダーが用意されています。 スライダーの値が変更されたら、自動ポストバックを行うことができます。

手順

変更時にスライダーを自動的にポストバックするには、両方のテキスト ボックスに 属性 AutoPostBack="true"が必要です。 スライダー自体になるテキスト ボックスと、スライダーの位置を保持するテキスト ボックス。 そのための必要なマークアップを次に示します。

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

ASP.NET AJAX Control Toolkit のコントロールは SliderExtender 、スライダー機能を 2 つのテキスト ボックスに割り当てます。

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

後で追加の label 要素を使用して、ポストバックをユーザーに通知します。

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

最後に、 ScriptManager ASP.NET AJAX のコントロールによって、Control Toolkit が機能するために必要な 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>

スライダーを動かすとポストバックがトリガーされる

スライダーを移動するとポストバックがトリガーされます (クリックするとフルサイズの画像が表示されます)

その後、この変更の日付がラベルに書き込まれます

その後、この変更の日付がラベルに書き込まれます ([フルサイズの画像を表示する] をクリックします)