AJAX adalah singkatan dari Asynchronous JavaScript dan XML. Ini adalah teknologi lintas platform yang mempercepat waktu respons. Kontrol server AJAX menambahkan skrip ke halaman, yang dijalankan dan diproses oleh browser.
Namun, seperti kontrol server ASP.NET lainnya, kontrol server AJAX ini dapat memiliki metode dan event handler yang terkait dengannya, yang semuanya ditangani di sisi server.
Kotak alat kontrol di Visual Studio IDE berisi sekumpulan komponen kontrol yang disebut 'AJAX'.
Kontrol ScriptManager adalah kontrol yang paling penting dan harus ada di halaman agar kontrol lain dapat berfungsi.
Ini memiliki sintaks dasar:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Jika Anda membuat 'Situs Berkemampuan Ajax' atau menambahkan 'Formulir Web AJAX' dari dialog 'Tambahkan Item', halaman web akan secara otomatis terbentuk dan berisi kontrol pengelola skrip. Kontrol ScriptManager menangani skrip sisi klien untuk semua kontrol sisi server.
Kontrol UpdatePanel adalah kontrol kontainer dan berasal dari kelas Kontrol. Ini beroperasi sebagai wadah untuk kontrol anak di dalamnya dan tidak memiliki antarmuka sendiri. Ketika salah satu kontrolnya memicu pengiriman kembali, UpdatePanel melakukan intervensi untuk memulai secara asinkron dan memperbarui bagian halaman.
Misalnya, jika kontrol tombol ada di dalam panel pembaruan, dan diklik, hanya kontrol di panel pembaruan yang akan terpengaruh, dan kontrol di bagian halaman lainnya tidak akan terpengaruh. Ini disebut pengembalian komit parsial atau pengembalian komit asinkron.
Tambahkan formulir web AJAX ke aplikasi Anda. Ini berisi kontrol manajer skrip default. Masukkan panel pembaruan. Tempatkan kontrol tombol dan label label di dalam kontrol panel pembaruan. Tempatkan satu set tombol dan label di luar panel.
Tampilan desainnya seperti ini:
File sumber daya terlihat seperti ini:
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Di luar Panel Pembaruan</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
Semua kontrol tombol memiliki kode yang sama untuk pengendali waktu:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Menampilkan waktu dari panel" + time;lbltotal.Text = "Menampilkan waktu dari luar" + waktu;
Perhatikan bahwa ketika halaman dijalankan, jika tombol kirim kembali total diklik, semua tag akan diperbarui dengan waktu pembaruan, tetapi jika tombol kirim kembali sebagian diklik, itu hanya akan memperbarui tag di panel pembaruan.
| milik | menggambarkan |
|---|---|
| Anak-anak Sebagai Pemicu | Properti ini menunjukkan apakah pengembalian berasal dari kontrol anak, yang akan menyebabkan panel pembaruan disegarkan. |
| Templat Konten | Ini adalah templat konten dan menentukan apa yang muncul dalam panel pembaruan saat muncul. |
| Kontainer Templat Konten | Mengambil objek kontainer templat yang dibuat secara dinamis dan digunakan untuk menambahkan kontrol anak secara terprogram. |
| IsInPartialRendering | Menunjukkan apakah panel diperbarui sebagai bagian dari pengembalian penerapan sebagian. |
| Mode Render | Tampilkan mode render. Mode yang tersedia adalah Block dan Inline. |
| Mode Pembaruan | Mendapatkan atau menyetel mode rendering dengan menentukan beberapa kondisi. |
| Pemicu | Tentukan objek pemicu koleksi, masing-masing terkait dengan peristiwa yang menyebabkan panel diperbarui secara otomatis. |
Tabel berikut memperlihatkan metode kontrol panel pembaruan:
| metode | menggambarkan |
|---|---|
| BuatContentTemplateContainer | Objek Kontrol dibuat untuk berfungsi sebagai wadah bagi kontrol anak yang menentukan konten kontrol UpdatePanel. |
| BuatKontrolKoleksi | Mengembalikan kumpulan semua kontrol yang terdapat dalam kontrol UpdatePanel |
| Inisialisasi | Menginisialisasi kumpulan pemicu kontrol UpdatePanel jika gambar sebagian halaman sedang berjalan. |
| Memperbarui | Menyebabkan konten kontrol UpdatePanel diperbarui. |
Perilaku panel pembaruan bergantung pada nilai properti UpdateMode dan properti ChildrenAsTriggers.
| metode | menggambarkan | Pengaruh |
|---|---|---|
| Selalu | PALSU | Parameter ilegal. |
| Selalu | BENAR | UpdatePanel diperbarui jika seluruh halaman diperbarui atau kontrol anak di atasnya kembali. |
| Bersyarat | PALSU | UpdatePanel diperbarui jika seluruh halaman diperbarui atau jika kontrol yang dipicu di luarnya memulai pembaruan. |
| Bersyarat | BENAR | UpdatePanel diperbarui jika seluruh halaman diperbarui atau jika kontrol anak di atasnya kembali atau kontrol pemicu di luarnya memulai pembaruan. |
Kontrol UpdateProgress memberikan umpan balik dari browser ketika satu atau lebih kontrol panel pembaruan diperbarui. Misalnya, menunggu respon dari server saat pengguna login atau saat melakukan beberapa pekerjaan berorientasi database.
Ini memberikan konfirmasi visual seperti "Memuat halaman..." bahwa pekerjaan sedang diproses.
Sintaks kontrol UpdateProgress adalah:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Memuat... </ProgressTemplate></asp:UpdateProgress>
Cuplikan di atas menunjukkan pesan sederhana dengan tag ProgressTemplate. Namun, itu bisa berupa gambar atau kontrol terkait lainnya. Kontrol UpdateProgress menampilkan setiap pengembalian asinkron kecuali ditentukan sebagai panel pembaruan terpisah menggunakan properti AssociatedUpdatePanelID.
Tabel berikut ini memperlihatkan properti kontrol kemajuan pembaruan.
| milik | menggambarkan |
|---|---|
| IDPanel Pembaruan Terkait | Mendapatkan dan menetapkan ID panel pembaruan dengan kontrol yang dikaitkan dengan kontrol ini. |
| Atribut | Mendapatkan dan menyetel properti cascading style sheet (CSS) dari kontrol UpdateProgress. |
| TampilanSetelah | Mendapatkan dan menyetel waktu dalam milidetik setelah templat pemrosesan ditampilkan. Standarnya adalah 500. |
| Tata Letak Dinamis | Menunjukkan apakah templat proses ditampilkan secara dinamis. |
| Templat Kemajuan | Menunjukkan bahwa templat ditampilkan selama pengembalian penerapan asinkron yang memerlukan waktu lebih lama daripada waktu DisplayAfter. |
Tabel berikut ini memperlihatkan metode kontrol kemajuan pembaruan:
| metode | menggambarkan |
|---|---|
| GetScriptDescriptors | Mengembalikan daftar komponen, perilaku, dan kontrol sisi klien yang diperlukan untuk fungsionalitas sisi klien dari kontrol UpdateProgress. |
| Dapatkan Referensi Skrip | Mengembalikan daftar kontrol UpdateProgress yang bergantung pada skrip klien. |
Kontrol pengatur waktu digunakan untuk menginisialisasi pengembalian penyerahan secara otomatis. Hal ini dapat dilakukan dengan dua cara:
(1) Tetapkan properti Pemicu pada kontrol UpdatePanel.
<Pemicu> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Klik" /></Triggers>
(2) Tempatkan kontrol pengatur waktu langsung di dalam UpdatePanel sebagai pemicu untuk sub-kontrol. Satu pengatur waktu dapat berfungsi sebagai pemicu untuk banyak UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Selalu"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>