How to use AjaxControlToolKit for web

I, Cài đặt ajaxcontroltoolkit

Tải AJAX Control Toolkit AJAX Control Toolkit là một dự án mã nguồn mở được phát triển bởi các thành viên của cộng đồng ASP.NET và nhóm ASP.NET. AJAX Control Toolkit được lưu trữ tại CodePlex.com đó là trang web của Microsoft để lưu trữ các dự án mã nguồn mở.

Điều hướng đến URL sau để chuyển trực tiếp đến trang AJAX Control Toolkit CodePlex: http://AjaxControlToolkit.CodePlex.com Nhấp vào liên kết Downloads (xem Hình dưới đây) để xem một danh sách các phiên bản khác nhau của AJAX Control Toolkit. Ví dụ, bạn có thể tải về các phiên bản của bộ công cụ có chứa các điều khiển AJAX Control Toolkit. Ngoài ra, bạn có thể tải về phiên bản đầy đủ của bộ công cụ có chứa các điều khiển, một trang web mẫu, và mã nguồn cho các điều khiển. thiết kế web Sau khi bạn tải về tập tin, bạn cần mở khóa các tập tin. Bấm chuột phải vào tập tin, chọn Properties, và nhấn vào Unblockbutton (xem hình sau). thiết kế web

Sau khi bạn mở khóa các tập tin, bạn có thể giải nén các tập tin: Kích chuột phải vào tập tin và chọn Extract All . Bây giờ, chúng ta đã sẵn sàng để thêm bộ công cụ cho Studio / Visual phát triển hộp công cụ Visual Web.

Thêm AJAX Control Toolkit vào Toolbox Cách dễ nhất để sử dụng AJAX Control Toolkit là thêm bộ công cụ vào Visual Studio/Visual Web Developer (xem hình dưới). Bằng cách đó, bạn chỉ cần kéo một điều khiển bộ công cụ lên một trang khi muốn sử dụng nó. thiết kế web Đầu tiên, bạn cần phải thêm một tab vào AJAX Control Toolkit hộp công cụ. Thực hiện theo các bước sau.

1. Tạo mới một Website ASP.NET bằng cách chọn File, New Website. Bấm đúp vào Default.aspx trong cửa sổ Solution Explorer để mở trong trình soạn thảo.
2. Bấm chuột phải vào hộp công cụ bên dưới General Tab và chọn Add Tab .
3. Nhập tên mới cho AJAX Control Toolkit. thiết kế web Tiếp theo, bạn cần thêm các điều khiển AJAX Control Toolkit vào tab mới. Theo các bước dưới đây: • Bấm chuột phải bên dưới Tab AJAX Control Toolkit và chọn Choose Items (xem hình sau). • Duyệt đến vị trí nơi bạn đã giải nén AJAX Control Toolkit và chọn assembly AjaxControlToolkit.dll. thiết kế web Sau khi hoàn thành các bước này, tất cả các điều khiển sẽ xuất hiện trong hộp công cụ.

II , Sử dụng các điều khiển AJAX Control Toolkit

1. Sử dụng AJAX Control Toolkit thông thường

Ví dụ, tab AJAX Control Toolkit bao gồm một điều khiển tên là Editor. Điều khiển này sẽ hiển thị một trình soạn thảo HTML. Thực hiện theo các bước sau để thêm điều khiển vào một trang

1. Tạo mới một trang ASP.NET đặt tên là ShowEditor.aspx
2. Chọn điều khiển ScriptManager bên dưới tab AJAX Extensions tab trên hộp công cụ và kéo thả điều khiển vào trong trang web.
3. Chọn điều khiển Editor từ tab bên dưới AJAX Control Toolkit trong hộp công cụ và kéo thẻ điều khiển vào trang như Hình 1 dưới đây. Ở chế độ thiết kế sẽ thấy như Hình 2.
4. Chạy web site bằng cách chọn Debug, Start Debugging hoặc ấn phím F5.
5. Bạn sẽ thấy kết quả trong Hình 3. thiết kế web Hình 01: thiết kế web Hình 2: Chế độ thiết kế Visual Studio với ScriptManager và điều khiển Edit thiết kế web Hình 03: Trang DisplayEditor.aspx được hiển thị

2, Sử dụng AJAX Control Toolkit mở rộng

Các bước dưới đây sử dụng điều khiển mở rộng ConfirmButton:

1. Tạo mới một trang ASP.NET đặt tên là ShowConfirmButton.aspx
2. Thêm một điều khiển ScriptManager vào trang bằng cách kéo thả điều khiển vào trang từ bên dưới tab AJAX Extensions.
3. Thêm một điều khiển Button chuẩn vào trang bằng cách kéo điều khiển Button từ bên dưới tab Standard trong hộp công cụ trên giao diện thiết kế.
4. Bấm tùy chọn công việc Add Extender (xem hình 4).
5. Trong hộp hội thoại Choose Extender, chọn ConfirmButtonExtender (xem hình 5) và bấm nút OK.
6. Chọn điều khiển Button trong chế độ thiết kế và mở rộng Extender, nút Button1_ConfirmButtonExtender trong cửa sổ Properties (xem hình 6). Gán giá trị “Really”? cho thuộc tính ConfirmText
7. Chạy trang bằng cách chọn Debug, Start Debugging hoặc bấm phím F5. thiết kế web Hình 4: thiết kế web Hình 05: thiết kế web Hình 06: Gán thuộc tính ConfirmButton Khi trang mở, bạn sẽ thấy một nút. Khi bạn bấm vào nút, bạn nhận được hộp thoại xác nhận thông tin như trong Hình 7. thiết kế web HÌnh 07: Hiển thị hộp thoại xác nhận thông tin Lưu ý rằng thông thường bạn không kéo một điều khiển mở rộng vào trong một trang, thay vì vậy bạn sử dụng tùy chọn công việc Add Extender để thêm đối tượng mở rộng vào một điều khiển đã được thêm vào trang.