Web サービス バックエンドで数値を上げ下げするコントロールを作成する (C#)
作成者: Christian Wenz
ユーザーが チェック ボックスに値を入力する代わりに、数値の上下コントロール (Windows やその他のオペレーティング システムに存在) が、より快適になる可能性があります。 既定では、NumericUpDown コントロールは常に値を 1 ずつ増減しますが、Web サービスは柔軟性を高めます。
概要
ユーザーが チェック ボックスに値を入力する代わりに、数値の上下コントロール (Windows やその他のオペレーティング システムに存在) が、より快適になる可能性があります。 既定では、NumericUpDown
コントロールは常に値を 1 ずつ増減しますが、Web サービスは柔軟性を高めます。
手順
ASP.NET AJAX コントロール ツールキットには、テキスト ボックスに自動的に 2 つのボタン (1 つは値を増やすため、1 つは値を減らすため) を追加する NumericUpDown
エクステンダー コントロールが含まれています。 ただし、コントロールは Web サービス呼び出し (またはページ メソッド呼び出し) もサポートします。 上または下のボタンがクリックされるたびに、JavaScript コードは Web サーバーに接続し、そこでメソッドを実行します。 メソッド シグネチャは次のとおりです。
public int MethodName(int current, string tag) {}
current
引数はテキスト ボックス内の現在の値です。tag
属性は、NumericUpDown
エクステンダー コントロールのプロパティとして設定できる追加のコンテキスト データです (必須ではありません)。
このサンプルでは、数値の上下制御では、1、2、4、8、16、32、64 などの 2 の累乗の値のみを使用できます。 したがって、ユーザーが値を大きくする場合に実行されるメソッドは、古い値を 2 倍にする必要があります。もう 1 つのメソッドでは、値を 2 で除算する必要があります。 完全な Web サービスを次に示します。
<%@ WebService Language="C#" Class="NumericUpDown1" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
[System.Web.Script.Services.ScriptService]
public class NumericUpDown1 : System.Web.Services.WebService
{
[WebMethod]
public int Up(int current, string tag)
{
if (current <= 536870912)
{
return current * 2;
}
else
{
return current;
}
}
[WebMethod]
public int Down(int current, string tag)
{
if (current >= 2)
{
return (int)(current / 2);
}
else
{
return current;
};
}
}
最後に、新しい ASP.NET ページを作成します。 通常どおり、ScriptManager
コントロール、TextBox
コントロール、NumericUpDownExtender
コントロールが必要です。 後者の場合は、Web サービス情報を指定する必要があります。
ServiceDownMethod
: ダウン Web メソッドまたはページ メソッドの名前ServiceDownPath
: ダウン サービス メソッドを使用した Web サービスへのパス。ページ メソッドを使用している場合は省略するServiceUpMethod
: Web メソッドまたはページ メソッドの名前ServiceUpPath
: アップ サービス メソッドを使用した Web サービスへのパス。ページ メソッドを使用している場合は省略する
ページの完全なマークアップを次に示します。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Control Toolkit</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
How many MB do you want? <asp:TextBox ID="TextBox1" Text="32" runat="server" />
<ajaxToolkit:NumericUpDownExtender ID="nud" runat="server"
TargetControlID="TextBox1" Width="100"
ServiceUpPath="NumericUpDown1.cs.asmx"
ServiceDownPath="NumericUpDown1.cs.asmx"
ServiceUpMethod="Up" ServiceDownMethod="Down" />
</div>
</form>
</body>
</html>
ページを実行する場合は、上ボタンをクリックするとテキスト ボックスの値が常に 2 倍になり、下ボタンをクリックすると半分になります。
2 の累乗である数値のみが表示されます (フルサイズの画像を表示する場合はクリックします)