バージョン

WebSlider で開始

始める前に

WebSlider™ コントロールによって簡単でユーザー フレンドリなデータ操作が可能となります。

達成すること

テキストボックスの値を変更するように WebSlider を設定する方法を学習します。基本的に、WebSlider は TextBox 内の値のエディタとして使用されます。

  1. 新しい ASP.NET AJAX 対応の Web サイトを作成します。

  2. ASP.NET Ajax ScriptManager インスタンスを WebForm にドラッグします。

  3. WebSlider コントロールを Microsoft® Visual Studio® ツールボックスから WebForm にドラッグします。

  4. プロンプトを認めてデフォルトの AppStylist スタイルを追加します。

  5. ASP.NET TextBox コントロールを Visual Studio ツールボックスから WebForm にドラッグします。

  6. TextBox コントロールの Text プロパティを 50 に設定します。

  7. WebForm をダブルクリックして、ページのロード イベントのためのイベント ハンドラを追加します。

  8. ロード イベントで、以下のコードを追加して WebSlider コントロールの編集可能な範囲と開始値を設定します。

Visual Basic の場合：

' 編集可能な範囲を設定します。
Me.WebSlider1.MaxValue = 100
Me.WebSlider1.MinValue = 0
' 開始の TextBox 値として WebSlider の開始値を設定します。
Me.WebSlider1.Value = Int32.Parse(Me.TextBox1.Text)

C# の場合：

// 編集可能な範囲を設定します。
this.WebSlider1.MaxValue = 100;
this.WebSlider1.MinValue = 0;
// 開始の TextBox 値として WebSlider の開始値を設定します。
this.WebSlider1.Value = Int32.Parse(this.TextBox1.Text);

  1. WebSlider の ValueChanged イベントのイベント ハンドラを作成して、テキスト ボックスの値を変更します。

JavaScript の場合

function WebSlider1_ValueChanged(sender, e)
{
    var textBox = document.getElementById("TextBox1");
    textBox.value = e.get_newValue();
}

  1. イベント ハンドラを WebSlider のクライアント側イベントに必ずフックします。WebSlider のプロパティ ウィンドウで ClientEvents の下にある ValueChanged フィールドの値として JavaScript 関数の名前を入力することによって、これを実行できます。

  2. アプリケーションを実行します。WebSlider コントロールを使用して、テキスト ボックスの値を変更できます。

WebSlider Getting Started with WebSlider 01.png