UpdatePanel Animasyonlarını Dinamik Olarak Denetleme (VB)
Christian Wenz tarafından
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 UpdatePanel
iç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 söndü (Tam boyutlu görüntüyü görüntülemek için tıklayın)