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

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

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

概要

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

手順

変更時にスライダーが自動的にポストバックされるようにするには、2 つのテキスト ボックス (スライダー自体になるテキスト ボックスと、スライダーの位置を保持するテキスト ボックス) の両方に 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" />

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

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

最後に、ASP.NET AJAX の ScriptManager コントロールによって、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>

Moving the slider triggers a postback

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

Afterwards, the date of this change is written in the label

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

前へ次へ