웹 서비스 백 엔드를 사용하여 숫자 위로/아래로 컨트롤 만들기(C#)

  • 아티클

작성자: Christian Wenz

PDF 다운로드

사용자가 검사 상자에 값을 입력하도록 하는 대신 숫자 위쪽/아래쪽 컨트롤(Windows 및 기타 운영 체제에 있음)이 더 편안할 수 있습니다. 기본적으로 NumericUpDown 컨트롤은 항상 값을 1씩 늘리거나 줄이지만 웹 서비스는 더 많은 유연성을 증명합니다.

개요

사용자가 검사 상자에 값을 입력하도록 하는 대신 숫자 위쪽/아래쪽 컨트롤(Windows 및 기타 운영 체제에 있음)이 더 편안할 수 있습니다. 기본적으로 컨트롤은 NumericUpDown 항상 값을 1씩 늘리거나 줄이지만 웹 서비스는 더 많은 유연성을 증명합니다.

단계

ASP.NET AJAX 컨트롤 도구 키트에는 텍스트 상자에 두 개의 단추를 자동으로 추가하는 extender가 포함되어 NumericUpDown 있습니다. 하나는 값을 높이기 위한 단추이며, 하나는 감소하기 위한 것입니다. 그러나 컨트롤은 웹 서비스 호출(또는 페이지 메서드 호출)도 지원합니다. 위쪽 또는 아래쪽 단추를 클릭할 때마다 JavaScript 코드는 웹 서버에 연결하고 메서드를 실행합니다. 메서드 서명은 다음과 같습니다.

public int MethodName(int current, string tag) {}

인수는 current 텍스트 상자의 현재 값입니다. tag 특성은 extender의 NumericUpDown 속성으로 설정할 수 있는 추가 컨텍스트 데이터입니다(필수는 아님).

이 샘플의 경우 숫자 위쪽/아래쪽 컨트롤은 1, 2, 4, 8, 16, 32, 64 등 2의 권한 값만 허용합니다. 따라서 사용자가 값을 늘리려는 경우 실행되는 메서드는 이전 값의 두 배가 되어야 합니다. 다른 메서드는 값을 2로 나누어야 합니다. 전체 웹 서비스는 다음과 같습니다.

<%@ 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 페이지를 만듭니다. 평소와 같이 컨트롤, TextBox 컨트롤 및 컨트롤이 NumericUpDownExtender 필요합니다ScriptManager. 후자의 경우 웹 서비스 정보를 제공해야 합니다.

  • ServiceDownMethod 다운 웹 메서드 또는 페이지 메서드의 이름
  • ServiceDownPath 다운 서비스 메서드를 사용하여 웹 서비스에 대한 경로입니다. 페이지 메서드를 사용하는 경우 생략
  • ServiceUpMethod up 웹 메서드 또는 페이지 메서드의 이름
  • ServiceUpPath up 서비스 메서드를 사용하여 웹 서비스에 대한 경로입니다. 페이지 메서드를 사용하는 경우 생략

페이지의 전체 태그는 다음과 같습니다.

<%@ 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의 강력한 숫자만 표시됩니다(전체 크기 이미지를 보려면 클릭).

다음