Bir UpdatePanel Denetimine Animasyon Ekleme (C#)

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. UpdatePanel'in içeriği için, animasyon çerçevesine yoğun olarak bağlı olan özel bir genişletici vardır: UpdatePanelAnimation. Bu öğreticide, UpdatePanel için böyle bir animasyonu ayarlama işlemi gösterilmektedir.

Genel Bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. bir öğesinin UpdatePaneliçeriği için, animasyon çerçevesine yoğun olarak bağlı olan özel bir genişletici vardır: UpdatePanelAnimation. Bu öğreticide, için böyle bir animasyonu ayarlama işlemi gösterilmektedir UpdatePanel.

Adımlar

İlk adım, ASP.NET AJAX kitaplığının yüklenmesi ve Denetim Araç Seti'nin kullanılabilmesi için sayfasına eklemektir ScriptManager :

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

Bu senaryodaki animasyon, içinde bulunan bir ASP.NET Wizard web denetimine UpdatePaneluygulanır. Üç (rastgele) adım, geri göndermeleri tetikleyebilmek için yeterli seçenek sağlar:

<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>

Denetim için UpdatePanelAnimationExtender gerekli işaretleme, için AnimationExtenderkullanılan işaretlemeye oldukça benzer. özniteliğinde TargetControlID animasyon eklemek için öğesini sağlarız UpdatePanelID; denetim içinde UpdatePanelAnimationExtender<Animations> öğe, animasyonlar için XML işaretlemesini tutar. Ancak bir fark vardır: olay ve olay işleyicilerinin miktarı ile karşılaştırıldığında AnimationExtendersınırlıdır. için UpdatePanelsyalnızca iki tane vardır:

• <OnUpdated> UpdatePanel güncelleştirildiğinde
• <OnUpdating> UpdatePanel güncelleştirmeye başladığında

Bu senaryoda, yeni içeriği UpdatePanel (geri göndermeden sonra) kaybolacaktır. Bu, bunun için gerekli işaretlemedir:

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

Artık UpdatePanel içinde bir geri gönderme gerçekleştiğinde panelin yeni içeriği sorunsuz bir şekilde kaybolur.

Sonraki sihirbaz adımında soluk görüntü görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki