Animasi UpdatePanel (VB) yang Mengontrol Secara Dinamis

oleh Christian Wenz

Unduh PDF

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Untuk konten UpdatePanel, ada extender khusus yang sangat bergantung pada kerangka kerja animasi: UpdatePanelAnimation. Ini juga dapat bekerja sama dengan pemicu UpdatePanel.

Gambaran Umum

Kontrol Animasi di ASP.NET AJAX Control Toolkit bukan hanya kontrol tetapi seluruh kerangka kerja untuk menambahkan animasi ke kontrol. Untuk konten UpdatePanel, ada extender khusus yang sangat bergantung pada kerangka kerja animasi: UpdatePanelAnimation. Ini juga dapat bekerja sama dengan UpdatePanel pemicu.

Langkah-langkah

Langkah pertama adalah seperti biasa untuk menyertakan ScriptManager di halaman sehingga pustaka AJAX ASP.NET dimuat dan Control Toolkit dapat digunakan:

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

Animasi dalam skenario ini akan diterapkan ke tampilan waktu saat ini. Informasi ini dapat ditulis ke dalam label menggunakan Page_Load() metode , atau (demi kesederhanaan) kode sebaris berikut digunakan:

<%= DateTime.Now.ToLongTimeString() %>

Selain itu, tombol untuk memicu pembaruan waktu dibuat:

<asp:Button ID="Button1" runat="server" Text="Update" />

Kode ini kemudian dimasukkan ke <ContentTemplate> dalam bagian UpdatePanel elemen . Atribut panel UpdateMode harus diatur ke "Conditional", karena hanya pemicu yang dapat memperbarui konten panel. Di bagian <Triggers>UpdatePanel, pemicu postback asinkron dibuat dan terkait dengan Click peristiwa tombol. Dengan demikian, jika pengguna mengklik tombol , akan UpdatePanel di-refresh. Berikut adalah markup untuk UpdatePanel kontrol:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

Terakhir, UpdatePanelAnimationExtender harus dikonfigurasi: Atur TargetControlID atribut ke ID panel, dan tentukan animasi dalam extender. Memudar dalam masuk akal, yang menciptakan penekanan visual yang bagus pada waktu yang diperbarui. Markup extender Anda kemudian dapat terlihat seperti ini:

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
 <Animations>
 <OnUpdated>
 <FadeIn Duration="1.0" Fps="24" />
 </OnUpdated>
 </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Jalankan file di browser. Setiap kali Anda mengklik tombol, waktu saat ini ditampilkan di panel, selalu memudar selama satu detik.

Waktu saat ini memudar (Klik untuk melihat gambar ukuran penuh)

Sebelumnya