Tin tức

Thiết kế web: Điều khiển các hoạt ảnh UpdatePanel động

16/04/2013

Tổng quan:

Điều khiển Animation trong ASP.NET AJAX Control Toolkit không chỉ là một điều khiển mà nó hoàn toàn là một khung để thêm các hoạt ảnh. Đối với các nội dung của UpdatePanel , một đối tượng mở rộng đặc biệt chủ yếu dự vào khung hoạt ảnh: UpdatePanelAnimation. Nó cũng làm việc cùng nhau với kích hoạt UpdatePanel

Các bước :

Đầu tiên, bạn thêm ScriptManager vào trong trang; sau đó, thư viện ASP.NET AJAX được nạp, theo đó có thể sử dụng  Control Toolkit:

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

Các hoạt ảnh trong kịch bản này sẽ được áp dụng với  màn hình hiển thị thời gian hiện tại. Những thông tin này có thể được gán vào một nhãn bằng cách sử dụng phương thức Page_Load (), hoặc (nhằm đơn giản) mã inline được sử dụng như sau:

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

Ngoài ra, một nút để kích hoạt cập nhật thời gian được tạo:

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

Mã này đó được đặt vào phần <ContentTemplate> của  điều khiển UpdatePanel. Thuộc tính UpdateMode của bảng điều khiển phải được gán  " Conditional", khi kích hoạt chỉ có thể cập nhật nội dung của bảng điều khiển. Trong phần <Triggers> của UpdatePanel, một kích hoạt postback  bất  đồng bộ được tạo ra và gắn liền với các sự kiện Click của nút. Vì vậy, nếu người dùng nhấp chuột vào nút, UpdatePanel được làm mới. Dưới đây là mã đánh dấu cho điều khiển UpdatePanel:

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


Cuối cùng, UpdatePanelAnimationExtender phải được cấu hình: Gán thuộc tính TargetControlID cho ID của bảng điều khiển. Mã đánh dấu như sau:

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

Mở trang trong trình duyệt. Bất cứ khi nào bạn nhấn vào nút này, thời gian hiện tại được hiển thị trong bảng điều khiển, luôn luôn mờ dần trong đối tượng thứ hai.
 

Bạn có thể tải mã thử nghiệm tại đây:

Công ty Cổ phần Eastern Sun Việt Nam