Создание числового поля со стрелками "вверх/вниз" с помощью серверной веб-службы (VB)

по Кристиан Венз

Скачать код или скачать PDF

Вместо того, чтобы позволить пользователю вводить значение в флажок, числовой элемент управления "вверх/вниз" (который существует в Windows и других операционных системах) может оказаться более удобным. По умолчанию элемент управления NumericUpDown всегда увеличивает или уменьшает значение на 1, но веб-служба подтверждает большую гибкость.

Обзор

Вместо того, чтобы позволить пользователю вводить значение в флажок, числовой элемент управления "вверх/вниз" (который существует в Windows и других операционных системах) может оказаться более удобным. По умолчанию элемент управления NumericUpDown всегда увеличивает или уменьшает значение на 1, но веб-служба подтверждает большую гибкость.

Шаги

Набор средств ASP.NET AJAX Control Toolkit содержит расширитель NumericUpDown, который автоматически добавляет две кнопки в текстовое поле: одно для увеличения его значения, одно для его уменьшения. Однако элемент управления также поддерживает вызов веб-службы (или вызов метода страницы). При нажатии кнопки вверх или вниз код JavaScript подключается к веб-серверу и выполняет метод. Сигнатура метода является следующей:

Function MethodName(ByVal current As Integer, ByVal tag As String) As Integer

Аргумент current — это текущее значение в текстовом поле; атрибут tag — это дополнительные данные контекста, которые можно задать в качестве свойства расширителя NumericUpDown (но это необязательно).

В этом примере числовой элемент управления "вверх/вниз" должен допускать только те значения, которые являются степенями двух: 1, 2, 4, 8, 16, 32, 64 и т. д. Поэтому метод, выполняемый, когда пользователь хочет увеличить значение, должен удвоить старое значение. другой метод должен разделить значение на два. Вот полная веб-служба:

<%@ WebService Language="VB" Class="NumericUpDown1" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
<System.Web.Script.Services.ScriptService()> _
Public Class NumericUpDown1
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Function Up(ByVal current As Integer, ByVal tag As String) As Integer
 If current <= 536870912 Then
 Return current * 2
 Else
 Return current
 End If
 End Function
 <WebMethod()> _
 Function Down(ByVal current As Integer, ByVal tag As String) As Integer
 If current >= 2 Then
 Return CInt(current / 2)
 Else
 Return current
 End If
 End Function
End Class

Наконец, создайте новую страницу ASP.NET. Обычно требуется элемент управления ScriptManager, TextBox и элемент управления NumericUpDownExtender. В последнем случае необходимо предоставить сведения о веб-службе:

  • ServiceDownMethodное имя веб-метода или метода страницы
  • ServiceDownPath путь к веб-службе с помощью метода пониженной службы; пропускать при использовании метода страницы
  • ServiceUpMethod имя метода веб-метода или страницы
  • ServiceUpPath путь к веб-службе с помощью метода up Service; пропускать при использовании метода страницы

Ниже приведена полная разметка для страницы.

<%@ Page Language="VB" %>
<!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.vb.asmx" ServiceDownPath="NumericUpDown1.vb.asmx"
 ServiceUpMethod="Up" ServiceDownMethod="Down" />
 </div>
 </form>
</body>
</html>

При запуске страницы обратите внимание на то, как значение в текстовом поле всегда удваивается при нажатии кнопки вверху и при нажатии нижней кнопки уменьшается вдвое.

отображаются только цифры, которые являются степенью 2

Отображаются только цифры, которые являются степенью 2 (щелкните, чтобы просмотреть изображение с полным размером)