Menganimasikan Kontrol UpdatePanel (C#)

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. Tutorial ini menunjukkan cara menyiapkan animasi seperti itu untuk 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. Tutorial ini menunjukkan cara menyiapkan animasi seperti itu untuk UpdatePanel.

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 kontrol web ASP.NET Wizard yang berada di .UpdatePanel Tiga langkah (arbitrer) menyediakan opsi yang cukup untuk memicu postback:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

Markup yang diperlukan untuk UpdatePanelAnimationExtender kontrol sangat mirip dengan markup yang digunakan untuk AnimationExtender. Dalam atribut kami TargetControlID menyediakan ID dari UpdatePanel untuk menganimasikan; dalam UpdatePanelAnimationExtender kontrol, <Animations> elemen menyimpan markup XML untuk animasi. Namun ada satu perbedaan: Jumlah peristiwa dan penanganan aktivitas terbatas dibandingkan dengan AnimationExtender. Untuk UpdatePanels, hanya dua di antaranya yang ada:

• <OnUpdated> ketika UpdatePanel telah diperbarui
• <OnUpdating> saat UpdatePanel mulai memperbarui

Dalam skenario ini, konten UpdatePanel baru (setelah postback) akan memudar. Ini adalah markup yang diperlukan untuk itu:

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

Sekarang setiap kali postback terjadi dalam UpdatePanel, konten baru panel memudar dengan lancar.

Langkah wizard berikutnya memudar (Klik untuk melihat gambar ukuran penuh)

SebelumnyaBerikutnya