View
642
Download
0
Category
Preview:
Citation preview
AJAX Control Toolkit Hoàng Anh Tú
Nội dung
Introduction to AJAX
AJAX & ASP.NET
AJAX Control Toolkit
AJAX Control Toolkit
Ứng dụng AJAX £ Xây dựng các ứng dụng web tương tác với
người dùng
Kiến trúc Client – Server
Client Server
HTTP Request
HTTP Response
Gửi request đến server
Phản hồi request từ
client
Xử lý request
Xóa dữ liệu trên màn hình
Nạp nội dung mới lên màn hình
Vẽ lại toàn bộ màn hình
AJAX Gửi request
bằng Javascript
Trao đổi dữ liệu bằng
XML
Chỉ nạp dữ liệu cần thiết
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
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"); }
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;
AJAX & Javascript Gửi request bất đồng bộ
xmlhttp.open("GET",“http://localhost/ajax.aspx",true); xmlhttp.send();
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // handle response data document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
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;
AJAX & ASP.NET
AJAX & ASP.NET
ASP.NET Libraries
Javascript 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
- Sử dụng toàn bộ mã nguồn javascript - Linh động trong cài đặt - Thời gian cài đặt nhanh
ASP.NET AJAX
Client-side • Thư viện javascript
Server-side • Server control • Sử dụng thư viện
javascript ở client-side
ASP.NET AJAX Client-side
Core Libraries - MicrosoftAjax.js - MicrosoftAjaxWebForms.js - MicrosoftAjaxTimer.js
Client-side • Thư viện javascript
Hơn 100 thư viện nhỏ - Lưu thông tin globalization
Lưu trong System.Web.Extens
ions.dll
ASP.NET AJAX Server-side
Server-side
• Server control • Sử dụng thư viện
javascript ở client-side
ScriptManager
Tạo các liên kết đến các thư
viện javascript cần thiết
UpdatePanel
Partial Rendering
Request trong từng phần chỉ làm refresh phần đó
Chia trang web thành nhiều phần nhỏ
Mỗi phần đặt trong một UpdatePanel
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> </asp:UpdatePanel>
UpdatePanel - Example
UpdatePanel - Example
Update phần trên
Update cả 2 phần
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> <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) { DateTimeLabel1.Text = DateTime.Now.ToString(); DateTimeLabel2.Text = DateTime.Now.ToString(); }
Server-side code
Client-side code
UpdatePanel – Example Demo
AJAX CONTROL TOOLKIT
AJAX Control Toolkit
ASP.NET AJAX
ASP.NET AJAX Control Toolkit
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
extend
Get started
Install
Hello AJAX Control Toolkit <asp:ScriptManager ID=“sm" runat="server" /> <cc1:Editor ID="Editor1" runat="server" />
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>
Calendar Control
Recommended