Artikel ini menggabungkan contoh untuk menjelaskan cara menggunakan skrip Javascript sisi klien dalam aplikasi ASP.net untuk meningkatkan efisiensi eksekusi program dan mencapai lebih banyak fungsi.
1. ASP.Net dan Javascript
.Net adalah inti dari strategi generasi berikutnya Microsoft, dan ASP.Net adalah implementasi spesifik dari strategi .Net dalam pengembangan Web. Ini mewarisi kesederhanaan dan kemudahan penggunaan ASP, sekaligus mengatasi kekurangan program ASP yang terstruktur dengan buruk dan sulit dibaca dan dipahami. Secara khusus, pengenalan kontrol sisi server dan model event-driven telah membuat pengembangan aplikasi Web lebih dekat dengan pengembangan program desktop di masa lalu.
Dalam berbagai artikel dan buku yang memperkenalkan ASP.Net, fokusnya adalah pada kontrol server dan .Net Framework SDK karena ini adalah peningkatan terbaru dan paling revolusioner di ASP.Net, sebaliknya, Javascript skrip sisi klien (juga termasuk VBScript), yang memainkan peran penting dalam pengembangan web di masa lalu, jarang disebutkan. Tampaknya dengan program sisi server, skrip sisi klien tidak lagi diperlukan. Namun, program sisi server memerlukan interaksi antara browser dan server Web. Untuk ASP.Net, ini adalah pengiriman halaman, yang memerlukan sejumlah besar data untuk dikirim bolak-balik verifikasi masukan atau konfirmasi penghapusan, sepenuhnya oke. Diimplementasikan menggunakan Javascript. Oleh karena itu, masih perlu mendalami cara menggunakan Javascript di ASP.Net.
2. Contoh penerapan Javascript
1. Menambahkan peristiwa Javascript ke kontrol server pada halaman.
Kontrol server pada akhirnya menghasilkan HTML biasa, seperti <asp:textbox> menghasilkan teks masukan. Setiap kontrol HTML dalam formulir memiliki event Javascriptnya sendiri, seperti Textbox memiliki event onchange, Button memiliki event onclick, Listbox memiliki event onchange, dll. Untuk menambahkan kejadian sisi klien ke kontrol server, Anda perlu menggunakan properti Attributes. Atribut Attributes adalah atribut yang dimiliki semua kontrol server. Atribut ini digunakan untuk menambahkan beberapa tag khusus ke HTML akhir yang dihasilkan. Misalkan ada tombol simpan btnSimpan di Formulir Web, dan Anda ingin menanyakan kepada pengguna apakah dia benar-benar ingin menyimpan ketika dia mengklik tombol ini (misalnya, setelah disimpan, tidak dapat dipulihkan, dll.), kode berikut seharusnya ditambahkan ke acara Page_Load:
jika bukan page.isPostBack() maka
btnSave.Attributes.Add("onclick","Javascript:return konfirmasi('Apakah Anda yakin untuk menyimpan?');")
berakhir jika
Perlu dicatat bahwa 'return' tidak dihilangkan, sebaliknya meskipun pengguna mengklik Batal, data akan tetap disimpan.
2. Tambahkan acara Javascript untuk setiap baris di Datagrid
. Asumsikan setiap baris Datagrid memiliki tombol hapus. Ketika pengguna mengklik tombol ini, diharapkan pengguna akan ditanya apakah dia benar-benar ingin menghapus catatan ini, untuk berjaga-jaga pengguna mengklik baris yang salah, atau hanya mengklik tombol Hapus secara tidak sengaja.
Apapun nama tombol hapus ini, tidak bisa langsung direferensikan seperti contoh sebelumnya, karena setiap baris memiliki tombol tersebut, dan merupakan kontrol anak di Datagrid. Dalam hal ini, Anda perlu menggunakan acara OnItemDataBound Datagrid. Peristiwa OnItemDataBound terjadi setelah setiap baris data di Datagrid terikat ke Datagrid (yaitu, diaktifkan sekali per baris). Pertama, tambahkan kode berikut pada deklarasi Datagrid:
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
...Definisi kolom disini
</asp:datagrid> Di sini dijelaskan bahwa ItemDataBound metode ini dipanggil ketika peristiwa OnItemDataBound terjadi, tambahkan definisi metode ini di file di belakang kode:
Sub ItemDataBound(Pengirim ByVal Sebagai Objek, ByVal dan Sebagai DataGridItemEventArgs)
Jika e.Item.ItemType <> ListItemType.Header Dan e.Item.ItemType <> ListItemType.Footer Lalu
Redupkan oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Konfirmasi ('Apakah Anda yakin ingin menghapus" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End Jika
End Sub
Karena baris judul dan baris footer Datagrid juga akan memicu peristiwa ini, maka pertama-tama dinilai bahwa baris yang memicu peristiwa ini bukanlah baris judul atau baris footer. Diasumsikan di sini bahwa tombol Hapus terletak di kolom 6 Datagrid (kolom pertama adalah 0), dan Sumber Data Datagrid berisi kolom bernama "m_sName"
3． Referensi ke kontrol di Datagrid dalam keadaan pengeditan
Fungsi pengeditan bawaan Datagrid adalah metode pengeditan ketika jumlah bidang dalam catatan sedikit. Pengguna tidak perlu memasukkan halaman terpisah untuk mengedit rekaman, namun dapat langsung mengklik tombol edit untuk memasukkan baris saat ini ke mode edit. Di sisi lain, ada beberapa program Javascript yang perlu mereferensikan nama kontrolnya. Misalnya, banyak program menyediakan kontrol tanggal ketika pengguna perlu memasukkan tanggal untuk memastikan legalitas format tanggal. Ketika pengguna mengklik ikon kontrol, jendela baru akan muncul bagi pengguna untuk memilih tanggal. Saat ini, Anda perlu memberikan ID kotak teks yang menampilkan tanggal ke jendela baru sehingga nilainya dapat diisi ulang ke dalam kotak teks ketika pengguna memilih tanggal.
Jika ini adalah kontrol kotak teks server biasa, ID-nya sama dengan ID kotak input HTML yang dihasilkan; tetapi dalam status pengeditan Datagrid, kedua ID tersebut tidak sama (alasannya sama dengan contoh di atas ), yang memerlukan Gunakan properti ClientID dari kontrol.
Sub ItemEdit yang Dilindungi (sumber ByVal Sebagai Objek, ByVal dan Sebagai System.Web.UI.WebControls.DataGridCommandEventArgs)
Redupkan sDateCtrl sebagai string
sDateCtrl = grd1. . ClientID
End Sub
Diasumsikan di sini bahwa metode ItemEdit adalah pengendali peristiwa OnItemEdit dari Dategrid, dan kolom ketiga Datagrid berisi kontrol kotak teks server bernama txtDate.
4.
mengacu pada program Javascript yang dibuat secara otomatis oleh ASP.Net
ditujukan untuk pengembang. Tidak ada perbedaan antara server dan klien dalam program sumber HTML yang dihasilkan skrip java. Alasan mengapa ia dapat merespons masukan pengguna adalah karena pengendali peristiwa pada setiap kontrol pada akhirnya menghasilkan skrip. Skrip ini mengirimkan ulang halaman sehingga Server Web mempunyai kesempatan untuk merespons dan memproses lagi. Biasanya kita tidak perlu mengetahui skrip ini atau memanggil skrip ini secara langsung, namun dalam beberapa kasus, memanggil skrip ini dengan tepat dapat menyederhanakan banyak pekerjaan. Lihatlah dua contoh berikut.
● Klik di mana saja pada Datagrid untuk memilih baris.
Datagrid menyediakan tombol pilihan bawaan. Saat tombol ini diklik, baris saat ini akan dipilih (properti SelectedItemStyle dapat diatur untuk memberikan tampilan berbeda pada baris saat ini). Namun, pengguna mungkin lebih terbiasa memilih baris dengan mengklik di mana saja. Akan sangat rumit jika menerapkan fungsi ini sendirian. Ide yang bagus adalah menambahkan tombol pilih, tetapi menyembunyikan kolom, dan memanggil Javascript yang dihasilkan oleh tombol ini ketika baris mana pun diklik.
Sub Item_Bound(ByVal pengirim Sebagai Objek, ByVal dan Sebagai DataGridItemEventArgs )
Redupkan itemType Sebagai ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header) Dan _
(itemType <> ListItemType.Footer) Dan _
(itemType <> ListItemType.Separator) Lalu
Redupkan oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Halaman. ")
End Sub
Ini mengasumsikan bahwa tombol pilih terletak di kolom 6. e.Item mewakili sebuah baris. Dilihat dari HTML yang dihasilkan, event onclick ditambahkan ke setiap <tr>. Metode Page.GetPostBackClientHyperLink mengembalikan skrip klien yang dihasilkan oleh kontrol LinkButton di halaman. Parameter pertama adalah kontrol Linkbutton, dan parameter kedua adalah parameter yang diteruskan ke kontrol ini, yang biasanya kosong. Jika ini bukan kontrol LinkButton, ada fungsi serupa GetPostBackClientEvent. Pembaca dapat merujuk ke MSDN.
● Skrip yang dihasilkan oleh server bertentangan dengan skrip yang ditambahkan secara manual.
Peristiwa server pada kontrol server umumnya berhubungan dengan peristiwa terkait pada kontrol klien. Misalnya, peristiwa SelectedIndexChanged pada Dropdownlist berkaitan dengan peristiwa onchange pada HTML <Select>. Jika Anda ingin menambahkan acara onchange secara manual, dua onchange akan dibuat di sisi klien, dan browser akan mengabaikan satu onchange. Misalnya, pengguna ingin menyimpan ke database setiap kali dia mengubah opsi di Dropdownlist (meskipun tidak terlalu umum, tetapi kebutuhan ini memang ada), tetapi pada saat yang sama, dia juga ingin mengingatkan pengguna apakah dia sangat ingin menabung. Jelasnya, kode yang disimpan harus ditempatkan di acara SelectedIndexChanged, dan pengingat harus ditambahkan secara manual dengan acara onchange. Hasilnya adalah hanya satu dari dua perubahan yang dapat dijalankan. Metode yang benar adalah dengan menambahkan tombol simpan yang tidak terlihat dan memanggil program yang dihasilkan oleh tombol ini dalam acara onchange yang ditambahkan secara manual.
Metode Page_Load adalah sebagai berikut:
Redupkan sCmd sebagai string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
Jika bukan page.isPostback maka
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(""" & sCmd & """ )")
Berakhir jika
Fungsi Konfirmasi Pembaruan adalah sebagai berikut
<Bahasa skrip=”javascript”>
fungsi KonfirmasiPembaruan
(cmd){
if
konfirmasi(“Apakah Anda yakinuntuk
memperbarui?”)
eval(cmd);
memanggil perintah string yang terkandung dalam . Perlu dicatat bahwa string yang berisi perintah tidak dapat diapit tanda kutip tunggal, karena skrip yang dibuat secara otomatis menyertakan tanda kutip tunggal, jadi di sini dua tanda kutip ganda digunakan untuk mewakili tanda kutip ganda dari string itu sendiri.
3. Kesimpulan
Di atas secara singkat membahas beberapa situasi memasukkan Javascript di ASP.Net. Memasukkan skrip Javascript sisi klien dengan benar ke dalam program server dapat meningkatkan efisiensi pengoperasian program dan menyediakan antarmuka pengguna yang lebih ramah.