Sdílet prostřednictvím

Animace ovládacího prvku UpdatePanel (C#)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Pro obsah UpdatePanel existuje speciální extender, který se hodně spoléhá na architekturu animace: UpdatePanelAnimation. Tento kurz ukazuje, jak nastavit takovou animaci pro UpdatePanel.

Přehled

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Pro obsah objektu UpdatePanelexistuje speciální extender, který do značné míry závisí na architektuře animace: UpdatePanelAnimation. Tento kurz ukazuje, jak nastavit takovou animaci pro UpdatePanelobjekt .

Postup

Prvním krokem je jako obvykle zahrnout na ScriptManager stránku , aby se načetla knihovna ASP.NET AJAX a bylo možné použít sadu Control Toolkit:

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

Animace v tomto scénáři se použije u webového ovládacího prvku ASP.NET Wizard umístěného v objektu UpdatePanel. Tři (libovolné) kroky poskytují dostatek možností pro aktivaci zpětného odeslání:

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

Značky nezbytné pro UpdatePanelAnimationExtender ovládací prvek jsou docela podobné značky použité pro AnimationExtender. V atributu poskytujeme UpdatePanelID objekt pro animaci; <Animations> v rámci UpdatePanelAnimationExtender ovládacího prvku element obsahuje kód TargetControlID XML pro animace. Existuje však jeden rozdíl: Počet událostí a obslužných rutin událostí je ve srovnání s limitem omezený.AnimationExtender Pro UpdatePanelsexistují pouze dva z nich:

  • <OnUpdated> při aktualizaci aktualizačního panelu
  • <OnUpdating> při spuštění aktualizace aktualizačního panelu

V tomto scénáři se nový obsah objektu UpdatePanel (po postbacku) postupně zmizí. Toto je nezbytný kód pro to:

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

Nyní, kdykoli postback dojde v updatePanel, nový obsah panelu mizí hladce.

Další krok průvodce se postupně vymachává

Další krok průvodce se postupně slábí (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší