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

  • [アーティクル]

作成者: 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">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 LastUpdate.Text = "Last update: " + DateTime.Now.ToLongTimeString();
 }
 }
</script>

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

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

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

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

次へ