Bagikan melalui

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

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:

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

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="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;
 };
 }
}

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="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>

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)

Berikutnya