Tiếp »

[¤ FIOENIX ¤]

MỤC LỤC

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

1. Ajax Control Tookit là gì?

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

2. Tải và cài đặt Ajax Control Tookit cho Microsoft Visual Studio 2008 (và 2010 Beta)

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

3. Cấu hình cho Web Site Project

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

4. Control - ToolkitScriptManager

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

5. Control - UpdatePanel, UpdateProgress Và UpdatePanelAnimationExtender

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

6. Control - Timer

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

7. Control - AlwaysVisibleControlExtender

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

8. Control - MaskedEditExtender và CalendarExtender

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

9. Control - ConfirmButtonExtender và FilteredTextBoxExtender

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

10. Control - HoverMenuExtender

Còn nhiều control khác nhưng Fio nhận thấy với mức độ bài viết này nên dừng ở đây là được rồi . Fio đang triển khai một web project theo dự kiến Fio sẽ out source nó, mọi người đón đọc nhé

[¤ FIOENIX ¤]

AJAX CONTROL TOOLKIT LÀ GÌ

Chắc hẳn những ai yêu thích lập trình Web đều có nghe nói đến công nghệ Ajax do đó trong khuôn khổ bài viết này chúng ta không tìm hiểu về công nghệ Ajax mà "học" cách sử dụng các công cụ được xây dựng sẳn và được tích hợp vào Toolbox của Visual Studio.

Môi trường & các công cụ đề nghị:

• Microsoft Visual Studio 2008 (hoặc 2010 Beta)
• .NET Framework 3.5 (hoặc 4.0 Beta)
• ASP.NET Ajax Library Beta 0911
• Ngôn ngữ lập trình C#

Bạn cũng có thể sử dụng VS 2005 với .Net FW 2.0 tuy nhiên cần phải cài thêm một số cập nhật để có thể sử dụng được Ajax nhưng nhận thấy chúng thật sự đang dần lỗi thời nên ở đây mình chỉ hướng dẫn trên VS 2008 và .Net FW 3.5 trở lên.

Ajax Control Toolkit là tập hơn hơn 40 control được xây dựng sẳn hổ trợ cho lập trình Web ASP.Net & Ajax được phát triển bởi Microsoft. Với bộ công cụ này, bạn sẽ thấy việc lập trình web với công nghệ Ajax dễ hơn bao giờ hết! Việc sử dụng cũng chúng khá trực quan và dễ dàng như bất kỳ các control nào khác có sẳn trong VS 2008.

[¤ FIOENIX ¤]

TẢI VÀ CÀI ĐẶT AJAX CONTROL TOOLKIT CHO VISUAL STUDIO 2008

	{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP} Click Here

Việc cài đặt Ajax Control Toolkit khá dễ dàng, chỉ bằng các add các control trong library của nó vào VS.

Nhắc lại trong khuôn khổ chuyên đề này, chỉ dành cho các bạn đã biết cơ bản lập trình web ASP.Net và sử dụng tương đối thành thạo VS do đó mình không hướng dẫn chi tiết những phần này mà chỉ nhắc lại cơ bản như sau:

Right click vào Toolbox, chọn Choose Item..., ở tab .Net Framework Components, click nút Browse... và tìm đến file AjaxControlToolkit.dll để add vào Toolbox.

[¤ FIOENIX ¤]

CẤU HÌNH CHO WEB SITE PROJECT

Tạo Web Site, nhớ chọn ngôn ngữ lập trình C# và .Net Framework 3.5. Sau đó, copy file AjaxControlToolkit.dll và System.Web.Ajax.dll paste vào thư mục Bin của Web Site đã tạo. Tiếp theo, right click vào thư mục Bin, chọn Add Reference... và tìm đến 2 file trên trong thư mục Bin để add.

Vậy là ta đã cấu hình xong cho một Web Site có thể sử dụng Ajax Control Toolkit.

[Love U 4_ever (...]

xem thì có vẻ đơn giản?hông bít làm có đơn giản k nhỉ?vả lại mình chỉ sài VS 2005 mí,cho nên...

[¤ FIOENIX ¤]

CONTROL - TOOLKITSCRIPTMANAGER

Lưu ý rằng trên bất kỳ trang nào có sử dụng Ajax Control Toolkit (ACT) thì bạn phải drag & drop ToolkitScriptManager vào trước tiên, nếu không có sẽ không sử dụng được ACT.

Chỉ với tên gọi có thể hiểu ToolkitScriptManager là công cụ quản lý, phân phối và điều khiển tất cả các script được sinh ra bởi việc sử dụng ACT. Cơ chế này làm việc "ngầm" và bạn không cần phải quan tâm chúng làm việc như thế nào

[¤ FIOENIX ¤]

CONTROL - UpdatePanel, UpdateProgress VÀ UpdatePanelAnimationExtender

UpdatePanel có sẳn trong tab Ajax Extensions trong Toolbox của VS 2008 chứ không thuộc vào Ajax Control Toolkit. Nó dùng để cập nhật các control khác chứa trong nó, được sử dụng khá phổ biến và đóng vai trò quan trọng trong lập trình web ASP.Net với ACT.

Khi cập nhật dữ liệu trang ASP.Net thông thường sử dụng cơ chế AutoPostBack để gửi toàn bộ dữ liệu lên Server sau đó chờ Server xử lý và trả lại kết quả cho trình duyệt web. UpdatePanel khắc phục quá trình gửi toàn bộ dữ liệu lên Server mà chỉ xử lý đối với những thành phần cần cập nhật.

Để minh họa ở đây ta sẽ sử dụng table Categories trong database Northwind.

Trước hết ta sẽ làm như thông thường để có sự so sánh giữa trước và sau khi sử dụng UpdatePanel.

Sau khi đã tạo Web Site và cấu hình cho AjaxControlToolkit như đã hướng dẫn, trong Visual Studio, ở tab Server Explorer, tạo một connection đến database Northwind (nhắc lại những công việc thế này mình không hướng dẫn nhé )

Tiếp theo, tạo một DataSet bằng cách right click vào project chọn Add New Item..., rồi kéo thả tất cả table, view, stored proc của Northwind bên Server Explorer vào đó.



Kéo thả một GridView và add một ObjectDataSource cho GridView đó (công đoạn này chắc ai cũng biết rồi nên không cần chi tiết ). Các bạn lưu ý là ở đây chúng ta sử dụng DataSet do đó phải dùng ObjectDataSource chứ không phải SqlDataSource nhé. Và nhớ chọn bussiness object là Products nhé. Sau đó, tùy chọn cái GridView một tý cho đẹp nhé : chọn True cho AllowPaging, AllowSorting, AutoGenerateDeleteButton, AutoGenerateEditDeleteButton và AutoGenerateSelectDeleteButton.



Bây giờ debug thử xem nào , thấy rõ rằng mỗi khi ta chọn Edit, Delete, Select, Sort (click vào cái tiêu đề mỗi cột) hay chuyển trang thì trang web xảy ra hiện tượng AutoPostBack (đễ dễ quan sát bạn nhìn cái loading của trình duyệt web á, với Firefox sẽ thấy cái biểu tượng loading xoay xoay trên cái tab của trang đó )

Bây giờ, ta kéo thả vào một cái UpdatePanel, sau đó kéo thả cái GridView đã tạo vào trong UpdatePanel đó luôn (các bạn nhớ nhìn rõ nhé, cái GridView của mình nằm trong UpdatePanel các bạn không đặt đúng ở trong UpdatePanel thì tý nữa sẽ không thấy sự thay đổi đâu ):



Như vậy là xong, bây giờ thử thực hiện các thao tác ban nãy, bạn sẽ không còn thấy hiện tượng AutoPostBack nữa

Nhưng mà bạn vẫn cảm thấy nó sao sao đúng không ? Vì ta không thấy được gì khi nó làm công việc đó, chỉ thấy cái trang web đứng yên trong vài giây rồi thay đổi mà thôi, bây giờ chúng ta sẽ làm cho sự thay đổi đó được thể hiện rõ ràng hơn nhé (

UpdateProgress (cũng có sẳn trong Ajax Extensions, không thuộc về Ajax Control Toolkit) cho phép ta có một cái nhìn trực quan hơn rằng dữ liệu đang được xử lý.

Bạn tải cái hình dưới đây ròi add vào project của bạn:



Sau đó, kéo thả vào một cái UpdateProgress, rồi kéo thả vào nó một cái Image (chọn ImageURL là hình vừa add ở trên). Ở thuộc tính AssociatedUpdatePanel của UpdateProgress, chọn cái UpdatePanel đã tạo ở trên.

Như vậy mỗi khi thực hiện các thao tác trên GridView bạn sẽ thấy cái ảnh ở trên hiện ra, nó thể hiện rằng dữ liệu đang được xử lý , ta cảm thấy có vẽ mượt mà hơn rồi nhỉ . Nhưng vẫn còn có thể mượt hơn nữa! Bây giờ ta sẽ làm cho mỗi khi xử lý thì cái GridView sẽ nhấp nháy và mờ đi, sau đó sẽ hiện rõ lại

UpdatePanelAnimationExtender là một trong những control của Ajax Control Toolkit, nó tạo ra hiệu ứng trực quan cho một UpdatePanel.

Kéo thả vào một UpdatePanelAnimationExtender, lưu ý rằng khi nhắc đến các Exptender nghĩa là bạn không thể kéo thả nó vào cửa sổ Design mà phải kéo thả vào cửa sổ Source:



Sau đó các bạn sửa đoạn code của nó lại như sau:



Ở đây các bạn quan tâm đến TargetControlID, giá trị của nó chính là ID của UpdatePanel (ở đây mình đặt cho ID của UpdatePanel cũng là UpdatePanel cho dễ hình dung). Còn đoạn code nằm bên trong UpdatePanelAnimationExtender là các thiết lập để tạo hiệu ứng:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Đoạn code này mô tả rằng, khi đang update (OnUpdating) thì nhấp nháy (Pulse) và mờ đi còn nhìn rõ khoảng 20% (FadeOut); sau khi update (OnUpdate) thì cũng nhấp nháy (Pulse) và hiện rõ lại (FadeIn). Sequence có nghĩa là thực hiện tuần tự các hiện ứng, còn Parallel nghĩa là thực hiện đồng thời cho mọi hiệu ứng con chứa trong nó. Về đoạn code này các bạn chịu khó lên Google để tìm kiếm nhé, khi quen ròi các bạn có thể dễ dàng phối hợp các hiệu ứng với nhau để có một web site thật đẹp!

Bây giờ debug, và thật tuyệt vời, mỗi khi thực hiện các thao tác thì sẽ thấy hiện ra cái ảnh loading và GridView sẽ nhấp nháy ròi mờ đi sau đó hiện rõ lại! Mọi thứ đã trở nên mượt mà và rất trực quan sinh động

[vodanh]

thank  Phuong , cai nay rat hay ap dung cong nghe moi vao tk wed

[¤ FIOENIX ¤]

CONTROL - Timer

Nếu các bạn đã biết Timer trong Windows Application thì cũng hiểu rằng Timer trong Ajax Extentions cũng giống như vậy. Hãy làm ví dụ sau để minh họa: Một quảng cáo trên web page, cứ mỗi 2s nó sẽ thay đổi bằng một hình ngẫu nhiên khác

Tạo một web page mới, kéo thả vào một ToolkitScriptManager, một Timer và một UpdatePanel, sau đó kéo thả một ImageButton vào UpdatePanel rồi thiết lập các thuộc tính như sau:

Timer - Interval: 2000
UpdatePanel:
- UpdateMode: Conditional
- Trigger: Bấm Add, ControlID chọn Timer, EventName chọn Tick

Add vào thư mục Image 4 tấm ảnh nào đấy tùy bạn.

Double click vào Timer để viết sự kiện Tick cho nó như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Xong, bây giờ trình duyệt thử, bạn sẽ thấy cứ mỗi 2 giây là sẽ load ngẫu nhiên 1 trong 4 hình bạn đã add (ở đây mình add 4 hình có tên lần lượt là Banner1, Banner2, Banner3 và Banner4)

[¤ FIOENIX ¤]

CONTROL - AlwaysVisibleControlExtender

Các bạn thấy nhiều website có những quảng cáo trên đó, luôn chạy theo mỗi khi ta kéo thanh cuộn của website. Có khác nhiều cách để làm việc này, ở đây chúng ta sẽ sử dụng AlwaysVisibleControlExtender.

Chỉ với tên của nó các bạn đã có thể hiểu rằng mọi control được extend bởi nó sẽ luôn luôn được hiển thị.

Bây giờ hãy sử dụng lại cái trang hôm trước chúng ta làm với UpdatePanel, tuy nhiên chọn PageSize của GridView là 50 chẳng hạn để trang web bị kéo dài làm xuất hiện thanh cuộn .

Sau đó, kéo thả vào 2 cái panel, và hãy đặt hình ảnh hay chữ gì đó là tùy ở bạn trong 2 cái panel ấy. Click vào mark tasks của panel chọn Add Extender... và chọn AlwaysVisibleControlExtender, hoặc kéo thả những AlwaysVisibleControlExtender vào cửa sổ source và thiết lập:

- TargetControlID: ID của panel
- UseAnimation: true

Với panel thứ 2 các bạn thiết lập thêm cho thuộc tính HorizontalSide của AlwaysVisibleControlExtender của nó là Right

Ảnh minh họa:



Bây giờ, khi debug bạn thử kéo thanh cuộn xuống sẽ thấy các ảnh chạy dọc theo 2 bên website, thật dễ dàng!

[¤ FIOENIX ¤]

CONTROL - MaskedEditExtender, CalendarExtender

Nếu trước đây, khi nhập ngày tháng bạn phải nhập thủ công hoặc phải tìm các cách bắt người dùng nhập đúng dạng ngày tháng hay sử dụng javascript để tạo... thì bây giờ với MaskedEditExtender, CalendarExtender bạn sẽ rất dễ dàng làm được chuyện này.

Kéo thả vào 1 cái TextBox và MaskedEditExtender, và thiết lập cho MaskedEditExtender như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

TargetControlID vẫn là id của control mà extender tác động đến, các bạn hãy ghi nhớ nhé, mình sẽ không nhắc lại về sau.

Lại kéo thả vào cạnh Textbox một cái Image (chọn image gì là tùy bạn )

Tiếp theo các bạn kéo thả vào một CalendarExtender và thiết lập như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Ở đây mình sử dụng định dạng ngày giờ theo kiểu Việt Nam (ngày/tháng/năm) - dd/MM/yyyy

Sau đó lại kéo thả vào một MaskedEditValidator và thiết lập như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}



Demo:

[¤ FIOENIX ¤]

CONTROL - ConfirmButtonExtender & FilteredTextBoxExtender

Các bạn còn nhớ cái GridView khi mình demo với UpdatePanel chứ? Hãy mở nó lại và thử chọn xóa một dòng nào đấy, nó sẽ xóa ngay mà chẳng thông báo gì cả!

Có thể bạn sẽ không thấy nó xóa mà nó mờ đi luôn, bởi vậy lỗi xảy ra trong quá trình xóa ^^ lỗi về khóa ngoại đó. Nếu muốn bạn có thể tự tạo lại một cái GridView với dữ liệu nào đó thì sẽ gặp hiện tượng xóa mà không cần hỏi. Tuy nhiên, thông thường đa đều cảnh báo với người sử dụng khi họ cần xóa một thông tin nào đấy.

Hãy kéo thả vào một ConfirmButtonExtender cho nút Delete (nhớ convert nút Delete từ dạng Command Field sang dạng TemplateField thì mới add extender được nhé )

Nó có code như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Bây giờ mỗi khi bạn click nút Delete, nó sẽ hiện lên một cảnh báo, nếu chọn OK nó mới thực thi còn ngược lại chọn Cancel nó sẽ ngừng hành động xóa lại.



Trong chapter này mình cũng kết hợp giới thiệu thêm một extender khác là FilteredTextBoxExtender. Chỉ với tên gọi chắc hẳn bạn cũng biết extender này tác động lên TextBox, công việc của nó là tạo ra một quy tắc nhập liệu cho một TextBox nào đấy. Chẳng hạn, bạn muốn người dùng chỉ nhập số hoặc nhập chữ, trên windows form bạn có thể code rất dễ dàng tuy nhiên trên web thì lại khác , giờ đây bạn có thể đơn giản hóa công việc ấy chỉ với extender này.

Hãy kéo thả vào 2 Textbox và đừng quên bổ sung thêm FilteredTextBoxExtender cho chúng và thiết lập như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Như vậy với TextBox1, bạn chỉ có thể nhập ký tự chữ cái, còn TextBox2 chỉ có thể nhập số:

[¤ FIOENIX ¤]

CONTROL - HoverMenuExtender

Nhắc đến Ajax, người ta thường nghĩ ngay đến một hiệu ứng dễ thấy nhất của nó là khi ta đưa con trỏ vào một cái link nào đấy (tiêu đề một bài báo điện tử chẳng hạn) sẽ thấy hiện một cái giống như Tooltip trên Windows Application nhưng đó có thể bao gồm nhiều hình ảnh khác, văn bản, link...

Trước đây kỹ thuật đó làm đau đầu không ít developer. Tuy nhiên, hiện nay với HoverMenuExtender, nó sẽ được thực hiện một cách dễ dàng!

Bây giờ kéo thả vào một cái Hyperlink nào đó, tiếp sau đó bạn kéo thả một cái Panel và một cái Image vào trong Panel đó, rồi thiết lập HoverMenuExtender cho Hyperlink như sau:

{Bạn không được phép thấy nội dung này. Vui lòng ĐĂNG KÝ / ĐĂNG NHẬP}

Bây giờ chạy thử, hãy đưa con trỏ vào Hyperlink bạn sẽ thấy hiệu ứng hover:

[the.one]

Bài Viết hay lám thanks bác Phương nhà mình các nà !

T_7!             

[¶¶»«¶¶ Çü~-µ !¶...]

hê hê, kiểu này phải học xong cái web 1 mới đũ khả năng làm mấy cái này!