スライダー コントロールをデータバインドする (C#)

作成者: Christian Wenz

PDF のダウンロード

AJAX Control Toolkit のスライダー コントロールには、マウスを使用して制御できるグラフィカル スライダーがあります。 スライダーの現在の位置を別の ASP.NET コントロールにバインドできます。

概要

AJAX Control Toolkit のスライダー コントロールには、マウスを使用して制御できるグラフィカル スライダーがあります。 スライダーの現在の位置を別の ASP.NET コントロールにバインドできます。

手順

ASP.NET AJAX の機能と Control Toolkit をアクティブにするには、ScriptManager コントロールをページ上の任意の場所 (ただし <form> 要素内) に配置する必要があります。

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

次に、2 つの TextBox コントロールをページに追加します。 1 つはグラフィカル スライダーに変換され、もう 1 つにより、スライダーの位置が保持されます。

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

次の手順で既に最後です。 ASP.NET AJAX Control Toolkit の SliderExtender コントロールは、最初のテキスト ボックスからスライダーを作成し、スライダーの位置が変わったときに、2 番目のテキスト ボックスを自動的に更新します。 これが機能するためには、SliderExtenderTargetControlID 属性は最初のテキスト ボックスの ID に、BoundControlID 属性は 2 番目のテキスト ボックスの ID に設定されていなければなりません。

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

ブラウザーでわかるように、データ バインディングは双方向で動作します。テキスト ボックスに新しい値を入力すると、スライダーの位置が更新されます。 2 番目のテキスト ボックスを読み取り専用にすると、テキスト フィールドに簡単な保護を追加でき、そこにある値をユーザーが手動で更新しにくくなります。

Slider and text box are in sync

スライダーとテキスト ボックスが同期しています (クリックするとフルサイズの画像が表示されます)