Bagikan melalui

Membuat Kontrol Naik/Turun Numerik dengan Backend Layanan Web (VB)

oleh Christian Wenz

Unduh PDF

Alih-alih membiarkan pengguna mengetikkan nilai ke dalam kotak centang, kontrol naik/turun numerik (yang ada di Windows dan sistem operasi lainnya) dapat terbukti lebih nyaman. Secara default, kontrol NumericUpDown selalu meningkatkan atau mengurangi nilai sebesar 1, tetapi layanan web membuktikan lebih banyak fleksibilitas.

Gambaran Umum

Alih-alih membiarkan pengguna mengetikkan nilai ke dalam kotak centang, kontrol naik/turun numerik (yang ada di Windows dan sistem operasi lainnya) dapat terbukti lebih nyaman. Secara default, NumericUpDown kontrol selalu meningkatkan atau mengurangi nilai sebesar 1, tetapi layanan web membuktikan lebih banyak fleksibilitas.

Langkah-langkah

Toolkit Kontrol AJAX ASP.NET berisi NumericUpDown extender yang secara otomatis menambahkan dua tombol ke kotak teks: Satu untuk meningkatkan nilainya, satu untuk menguranginya. Namun kontrol juga mendukung panggilan layanan web (atau panggilan metode halaman). Setiap kali tombol naik atau turun diklik, kode JavaScript tersambung ke server web dan menjalankan metode di sana. Tanda tangan metode adalah yang berikut:

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

Argumen current adalah nilai saat ini dalam kotak teks; tag atribut adalah data konteks tambahan yang dapat diatur sebagai properti extender NumericUpDown (tetapi tidak diperlukan).

Untuk sampel ini, kontrol naik/turun numerik hanya akan memungkinkan nilai yang merupakan kekuatan dua: 1, 2, 4, 8, 16, 32, 64, dan sebagainya. Oleh karena itu, metode yang dijalankan ketika pengguna ingin meningkatkan nilai harus menggandakan nilai lama; metode lain harus membagi nilai dengan dua. Jadi berikut adalah layanan web lengkap:

<%@ 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

Terakhir, buat halaman ASP.NET baru. Seperti biasa, Anda membutuhkan ScriptManager kontrol, kontrol, TextBox dan NumericUpDownExtender kontrol. Untuk yang terakhir, Anda harus memberikan informasi layanan web:

  • ServiceDownMethod nama metode web atau metode halaman yang tidak berfungsi
  • ServiceDownPath jalur ke layanan web dengan metode layanan tidak berfungsi; hilangkan jika Anda menggunakan metode halaman
  • ServiceUpMethod nama metode web atau metode halaman atas
  • ServiceUpPath jalur ke layanan web dengan metode layanan up; hilangkan jika Anda menggunakan metode halaman

Berikut adalah markup lengkap untuk halaman:

<%@ 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>

Jika Anda menjalankan halaman, perhatikan bagaimana nilai dalam kotak teks selalu dua kali lipat ketika Anda mengklik tombol atas, dan dibelah dua saat Anda mengklik tombol bawah.

Hanya angka yang merupakan kekuatan 2 yang muncul

Hanya angka yang merupakan kekuatan 2 yang muncul (Klik untuk melihat gambar ukuran penuh)

Sebelumnya