1. AJAX Control
Toolkit
Hoàng Anh Tú

2. Nội dung
Introduction to AJAX
AJAX
Control AJAX & ASP.NET
Toolkit
AJAX Control Toolkit

3. Ứng dụng AJAX
£ Xây dựng các ứng dụng web tương tác với
người dùng

4. Kiến trúc Client – Server
Gửi request đến
server Xử lý
request
Xóa dữ liệu HTTP Request
trên màn hình
Nạp nội dung mới HTTP Response
lên màn hình Client Server
Vẽ lại Phản hồi
toàn bộ màn hình request từ
client

5. AJAX
Gửi request
bằng
Javascript
Chỉ nạp dữ liệu
cần thiết
Trao đổi dữ
liệu bằng
XML

6. AJAX – Hạn chế
£ Tăng thời gian phản hồi từ server
£ Khó xác định địa chỉ nội dung trang web
• Khó trở về trang trước đó
• Không thể lưu URL nội dung trang web
£ Không thể tìm thấy bằng các search engine
£ Tạo nên các lỗ hổng bảo mật

7. AJAX & Javascript
Tạo đối tượng request
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

8. AJAX & Javascript
Gửi dữ liệu đồng bộ
xmlhttp.open("GET",”http://localhost/ajax.aspx",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

9. AJAX & Javascript
Gửi request bất đồng bộ
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// handle response data
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",“http://localhost/ajax.aspx",true);
xmlhttp.send();

10. AJAX & Javascript
Xử lý dữ liệu trả về
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

11. AJAX & ASP.NET

12. AJAX & ASP.NET
ASP.NET Libraries
- Không cần sử dụng Javascript
- Chỉ áp dụng được cho 1 số tình huống cụ thể qua các control
- Giảm thời gian cài đặt
Javascript Libraries
- Sử dụng toàn bộ mã nguồn javascript
- Linh động trong cài đặt
- Thời gian cài đặt nhanh

13. ASP.NET AJAX
Client-side Server-side
• Thư viện javascript • Server control
• Sử dụng thư viện
javascript ở client-
side

14. ASP.NET AJAX Client-side
Client-side Core Libraries
- MicrosoftAjax.js
• Thư viện javascript - MicrosoftAjaxWebForms.js
- MicrosoftAjaxTimer.js
Hơn 100 thư viện nhỏ
- Lưu thông tin globalization
Lưu trong
System.Web.Extens
ions.dll

15. ASP.NET AJAX Server-side
Server-side ScriptManager
• Server control
• Sử dụng thư viện
javascript ở client-side
Tạo các liên kết
đến các thư
viện javascript
cần thiết

16. UpdatePanel
Chia trang web
Partial Rendering
thành nhiều phần nhỏ
Request trong từng phần
chỉ làm refresh phần đó
Mỗi phần đặt trong
một UpdatePanel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>

17. UpdatePanel - Example

18. UpdatePanel - Example
Update phần trên
Update cả 2 phần

19. UpdatePanel – Example Code
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel“ UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateButton2" EventName="Click" />
</Triggers>
<ContentTemplate>
Client-side code <asp:Label runat="server" ID="DateTimeLabel1" />
<asp:Button runat="server" ID="UpdateButton1" OnClick="UpdateButton_Click"
Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="DateTimeLabel2" />
<asp:Button runat="server" ID="UpdateButton2" OnClick="UpdateButton_Click"
Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
protected void UpdateButton_Click(object sender, EventArgs e)
{
Server-side code DateTimeLabel1.Text = DateTime.Now.ToString();
DateTimeLabel2.Text = DateTime.Now.ToString();
}

20. UpdatePanel – Example Demo

21. AJAX CONTROL TOOLKIT

22. AJAX Control Toolkit
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
ASP.NET AJAX
extend
ASP.NET AJAX
Control Toolkit

23. Get started
Install

24. Hello AJAX Control Toolkit
<asp:ScriptManager ID=“sm" runat="server" /
>
<cc1:Editor ID="Editor1" runat="server" />

25. Calendar Control
<asp:toolkitscriptmanager ID="ScriptManager1" runat="server"></asp:toolkitscriptmanager>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="ceDate" runat="server“ TargetControlID="txtDate“> </
asp:CalendarExtender>

26. Calendar Control