UpdatePanel Animasyonlarını Dinamik Olarak Denetleme (VB)

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. Ayrıca UpdatePanel tetikleyicileriyle birlikte de çalışabilir.

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. Tetikleyicilerle UpdatePanel birlikte de çalışabilir.

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 geçerli saatin bir görüntüsüne uygulanır. Bu bilgiler yöntemi kullanılarak Page_Load() bir etikete yazılabilir veya (kolaylık olması açısından) aşağıdaki satır içi kod kullanılır:

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

Ayrıca, saati güncelleştirme işlemini tetikleyen bir düğme oluşturulur:

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

Bu kod daha sonra bir UpdatePanel öğenin bölümüne konur<ContentTemplate>. Panelin UpdateMode özniteliği olarak ayarlanmalıdır "Conditional"çünkü panelin içeriğini yalnızca tetikleyiciler güncelleştirebilir. <Triggers> bölümündeUpdatePanel, zaman uyumsuz bir geri gönderme tetikleyicisi oluşturulur ve düğmenin Click olayına bağlanır. Bu nedenle, kullanıcı düğmeye tıklarsa yenilenir UpdatePanel . Denetimin işaretlemesi aşağıdadır UpdatePanel :

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

Son olarak, UpdatePanelAnimationExtender yapılandırılması gerekir: Özniteliği panelin kimliğine ayarlayın TargetControlID ve genişletici içinde bir animasyon tanımlayın. Sönmesinin mantıklı olması, güncelleştirilen zaman üzerinde güzel bir görsel vurgu oluşturur. Genişletici işaretlemeniz şu şekilde görünebilir:

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

Dosyayı tarayıcıda çalıştırın. Düğmeye her tıkladığınızda, geçerli saat panelde gösterilir ve bir saniye boyunca her zaman soluk görünür.

Geçerli saat

Geçerli saat söndü (Tam boyutlu görüntüyü görüntülemek için tıklayın)