Sử dụng các điều khiển AJAX Control Toolkit trong thiết kế web

 Bài viết này tìm hiểu cách thêm các điều khiển AJAX Control Toolkit điều khiển mở rộng cho các trang ASP.NET.

AJAX Control Toolkit chứa một bộ điều khiển và bộ điều khiển mở rộng. Trong bài viết ngắn này, bạn tìm hiểu cách thêm cả hai vào một trang ASP.NET.
Để được hướng dẫn cài đặt AJAX Control Toolkit và thêm các Control Toolkit AJAX vào thanh công cụ Studio / Visual Web Developer, xem hướng dẫn Bắt đầu với AJAX Control Toolkit.

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

Một điều khiển AJAX Control Toolkit hoạt động giống như một điều khiển ASP.NET bình thường. Bạn có thể kéo điều khiển từ hộp công cụ vào một trang ASP.NET. Bạn có thể thêm các điều khiển vào trang trong cả hai chế độ thiết kế web hoặc xem Mã nguồn
Có một yêu cầu đặc biệt khi sử dụng điều khiển từ AJAX Control Toolkit. Trang phải có một điều khiển ScriptManager. Điều khiển ScriptManager chịu trách nhiệm bao gồm tất cả các JavaScript cần thiết theo yêu cầu của điều khiển  AJAX Control Toolkit.
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ị

Sử dụng điều khiển  AJAX Control Toolkit mở rộng

AJAX Control Toolkit cũng chứa bộ điểu khiển mở rộng. Như tên gọi của nó, một điều khiển mở rộng sẽ cho phép mở rộng các chức năng của một điều khiển hiện có. Ví dụ, điều khiển ConfirmButton mở rộng điều khiển Button chuẩn của ASP.NET. Đối tượng mở rộng thay đổi hành vi điều khiển Button do vậy hiển thị hộp thọa xác nhật thông tin khi bạn bấm nút.

Một điều khiển mở rộng, giống như một điều khiển AJAX Control Toolkit, yêu cầu một điều khiển ScriptManager. Bạn phải thêm điều khiển ScriptManager vào một trang trước khi bắt đầu sử dụ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.
Điện thoại:
0989 85 82 85
Skype:
Yahoo:
Tư vấn online Tư vấn online
  • Nguyễn Ngọc Thúy

    Sinh viên K50 ĐH GTVT HN

    Email: nguyenthuy@hrm.vn

    Facebook: Nguyen Ngoc Thuy

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
      Cty Cổ Phần Digitech

    Vị trí công việc: Lập trình viên, Tester

  • Nguyễn Thị Mùi

    Sinh viên K50 ĐH GTVT HN

    Email: nguyenmuint@gmail.com

    Facebook: mui.nguyenthi.98

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Cy Cổ phần Công nghệ Trường Việt

    Vị trí công việc: Lập trình viên .NET

  • Nguyễn Thị Mai

    Sinh viên T13 HV KTQS

    Email: mainguyen121@gmail.com

    Facebook: Iris.mainguyen

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Cty CP Nghiên cứu và PT Phần mềm SHIFT

    Vị trí công việc: Lập trình viên

  • Nguyễn Khánh Hiển

    Sinh viên SE 2009 - 2014 HV KTQS

    Email: hiennguyenkhanh@yahoo.com

    Facebook: hien.nguyenkhanh

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Cty Cổ phần Timi (www.timi.vn)

    Vị trí công việc: Lập trình viên

  • Nguyễn Thanh Tùng

    Sinh viên TK5SE ĐH SPKT Hưng Yên

    Email: tungnttk5@gmail.com

    Facebook: tung.nguyenthanh.794

    Thực tập: ASP.NET năm 2011 - 2012

    Hiện công tác:
     Tập đoàn Đại Việt(daivietgroup.net)

    Vị trí công việc: .NET developer

  • Đào Trung Đông

    Sinh viên 53PM1 ĐH Xây Dựng HN

    Email: dongpm1@gmail.com

    Facebook: Trung Đông

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
      Cty CP Đầu tư PT Công nghệ TRÍ NAM

    Vị trí công việc: Lập trình viên

  • Trịnh Duy Hiệp

    Sinh viên KHMT3 ĐH Công Nghiệp HN

    Email: hieptdnd@gmail.com

    Facebook: hieptdnd

    Thực tập: ASP.NET năm 2011 - 2012

    Hiện công tác:
      Cty TNHH Công nghệ Kim Đại Thành

    Vị trí công việc: Lập trình viên

  • Nguyễn Văn Tuấn

    Sinh viên KTPM-K4 ĐH Công Nghiệp HN

    Email: phvtuanit@gmail.com

    Facebook:

    Thực tập: ASP.NET năm 2011 - 2012

    Hiện công tác:
     Công ty phần mềm Vinsofts

    Vị trí công việc: Lập trình viên .NET

  • Phạm Duy Huy

    Sinh viên 53PM1 Đại Học Xây Dựng

    Email: huypdsoftware@gmail.com

    Facebook: phamduyhuy

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     http://websolutions.com.vn/

    Vị trí công việc: Lập trình viên

  • Nguyễn Anh Tuấn

    Sinh viên K56 Đại Học Bách Khoa Hà Nội

    Email: anhtuannguyen522@gmail.com

    Facebook: Nguyễn Anh Tuấn

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Công ty Cổ phần Phần mềm Onsoft

    Vị trí công việc: Lập trình viên

  • Nguyễn Đình Cương

    Sinh viên C1108I Bách Khoa Aptech

    Email: l3t.nguyen@gmail.com

    Facebook: TaoNgon

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Công ty Đầu Tư Bách Hợp

    Vị trí công việc: Lập trình viên

  • Đào Huy Huấn

    Sinh viên THK12 HV Kỹ Thuật QS

    Email: daohuyhuan125@gmail.com

    Facebook: Đào Huy Huấn

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Công ty Cổ phần Phần mềm Onsoft

    Vị trí công việc: Lập trình viên

  • Đặng Quốc Bảo

    Sinh viên CNPM K50 ĐH GTVT HN

    Email: baodq@mitec.com.vn

    Facebook: Lá vàng rơi

    Thực tập: ASP.NET năm 2012 - 2013

    Hiện công tác:
     Cty CP Ứng dụng Khoa học và Công nghệ MITEC

    Vị trí công việc: Lập trình viên