Membuat Kontrol Peringkat (C#)

oleh Christian Wenz

Unduh PDF

Banyak situs web, dari e-niaga hingga situs komunitas, menawarkan pengguna mereka untuk menilai artikel atau item. Ini biasanya membutuhkan beberapa upaya pengkodian, tetapi kita memiliki Control Toolkit untuk dibuang.

Gambaran Umum

Banyak situs web, dari e-niaga hingga situs komunitas, menawarkan pengguna mereka untuk menilai artikel atau item. Ini biasanya membutuhkan beberapa upaya pengkodian, tetapi kita memiliki Control Toolkit untuk dibuang.

Langkah-langkah

Pertama-tama, Anda memerlukan (setidaknya) dua jenis gambar: satu untuk item peringkat yang diisi, dan satu untuk item peringkat kosong. Item peringkat biasanya star atau tersenyum. Untuk skenario ini, Anda menemukan tiga file, smiley.png dan empty.png dan smiley-done.png sebagai bagian dari unduhan kode sumber untuk tutorial ini.

Kemudian, buat file ASP.NET baru dan mulailah dengan menambahkan ScriptManager kontrol ke dalamnya:

<asp:ScriptManager ID="asm" runat="server" />

Kemudian, tambahkan Rating kontrol dari ASP.NET AJAX Control Toolkit. Atribut berikut perlu diatur untuk contoh ini:

• CurrentRating peringkat awal yang akan digunakan
• MaxRating peringkat maksimum
• EmptyStarCssClasskelas CSS yang akan digunakan saat item peringkat (star ) kosong
• FilledStarCssClasskelas CSS yang akan digunakan saat item peringkat ( star ) diisi
• StarCssClass kelas CSS yang akan digunakan untuk statistik yang terlihat
• WaitingStarCssClasskelas CSS yang akan digunakan saat peringkat star dikirim kembali ke server

Dan berikut adalah markup yang membuat kontrol peringkat dengan lima item (senyuman) yang awalnya tidak ada yang diisi:

<ajaxToolkit:Rating ID="r1" runat="server"
 CurrentRating="0" MaxRating="5"
 EmptyStarCssClass="emptypng" FilledStarCssClass="smileypng"
 StarCssClass="smileypng" WaitingStarCssClass="donesmileypng"/>

Tiga kelas CSS yang dirujuk sekarang perlu menunjukkan file gambar yang sesuai, yang mudah dilakukan menggunakan CSS:

<style type="text/css">
 .emptypng { background-image: url(empty.png); width: 32px; height: 32px; }
 .smileypng { background-image: url(smiley.png); width: 32px; height: 32px; }
 .donesmileypng { background-image: url(smiley-done.png); width: 32px; height: 32px; }
</style>

Pastikan Anda memberikan lebar dan tinggi tiga gambar, jika tidak, tampilan mungkin terlihat sedikit berantakan.

Akhirnya, hasil peringkat harus ditampilkan kepada pengguna (atau, setidaknya disimpan dalam database). Jadi tambahkan label untuk output pesan teks dan tombol kirim untuk memposting kembali formulir peringkat ke server:

<asp:Label ID="Label1" runat="server" />
<input type="submit" id="Submit1" runat="server" value="Rate!" />

Dalam kode sisi server, akses kontrol Peringkat melaluinya ID dan kemudian akses propertinya CurrentRating yang merupakan jumlah item peringkat yang dipilih, dalam contoh kami nilai antara 0 dan 5.

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 Label1.Text = "Your rating: " + r1.CurrentRating;
 }
 }
</script>

Simpan halaman dan muat ke browser Anda. Saat Anda mengarahkan mouse ke atas item peringkat (awalnya kosong), efek JavaScript terjadi: Peringkat berubah. Ketika Anda mengklik set bintang, peringkat saat ini dipertahankan. Terakhir, ketika Anda mengirimkan formulir, kode sisi server menghasilkan peringkat yang dipilih.

Membuat sistem peringkat dengan kode minimal (Klik untuk melihat gambar ukuran penuh)

Berikutnya