ASP.NET AJAX CONTROL TOOLKITChương 1. ASP.NET Ajax Server Extensions

1. Gới thiệu.

- Ajax Server Extensions bao gồm một số server control và các dịch vụ, có thể

được sử dụng để thiết kế và phát triển ứng dụng web tốt hơn, thời gian truyền tải dữ

liệu tốt hơn.

- Để sử dụng Ajax Server Extensions bạn cần cài đặt:

Microsoft Visual Studio 2005 trở lên.

Microsoft ASP .NET Ajax Server Extensions

- ASP.NET Ajax Server Controls bao gồm:

ScriptManager.

ScriptManagerProxy

Timer

UpdatePanel

UpdateProgress

2. ScriptManager.

- Điều khiển ScriptManager là một phần của System.Web.UI, chịu trách nhiệm

quản lý những tập lệnh(scripts) và đăng ký chúng khi có yêu cầu.

- ScriptManager là một control ẩn, và chỉ có duy nhất một thể hiện của nó trong

web của bạn.

- Để sử dụng ScriptManager control kéo nó từ Ajax extensions trong thanh công

cụ.

- Đoạn code sinh ra là:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

- Trước khi sử dụng bất kỳ một AJAX CONTROL nào bạn đều phải thêm

ScriptManager vào trước.

3. UpdatePanel

- Điều khiển UpdatePanel cho phép bạn tải lại một phần của trang WEB

- Ví dụ:

Chạy ví dụ:

Khi bạn click vào button thì chỉ có phần UpdatePanel là được tải lại:

- Bên trong điều khiển UpdatePanel có 2 tag con là: <ContentTemplate> và

<Triggers>.

- Tag <ContentTemplate>: Những gì chứa bên trong tag này sẽ được nạp lại từ

server một cách không đồng bộ.

Thuộc tính Render Modes của UpdatePanel: có 2 giá trị là “Inline” và

“Block”.

Nếu RenderMode= “Inline”:

<asp:UpdatePanel ID="UpdatePanel1" runat="server"

RenderMode="Inline">…

Thì UpdatePanel trả lại ơ phía Client là thẻ <span>. Mặc định là thẻ <div>

<span id="UpdatePanel1">

UpdatePanel Time: 07/12/2010 9:46:01 AM

<br />

<input type="submit" name="Button1" value="Button"

id="Button1" />

</span>

Thuộc tính UpdateMode: có 2 giá trị “Always”(mặc định) và “Conditional”.

Nếu đặt UpdateMode là Conditional, thì khi UpdatePanel đó tải lại thì tất cả các

UpdatePanel khác trong trang web cũng sẽ bị tải lại.

Khi click UpdateMode-Inline:

Khi click UpdateMode-Conditional:

Các sự kiện của UpdatePanel: Init, Load, PreRender, Unload.

- Tag <Triggers>: Một trigger là một sự kiện làm cho UpdatePanel được tải lại.

Sự kiện đó có thể được sinh ra bởi mọi thẻ trong from. Có 2 loại trigger:

AsyncPostBackTrigger – Tải lại một cách không đồng bộ.

PostBackTrigger – Tải lại bình thường.

Mặc định UpdatePanel sẽ chiếm quyền điều khiển sự kiện của control chứa

trong nó, và khi có một sự kiện xảy ra. UpdatePanel thực hiện tải lại Panel.

Bạn cũng có thể thực hiện tải lại UpdatePanel bởi các control bên ngoài bằng

AsyncPostBackTrigger.

4. UpdateProgress

- Được sử dụng để hiển thị tiến trình tải lại của một hay nhiều UpdatePanel control

- Code sinh ra:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

……

</asp:UpdateProgress>

- Mặc định UpdateProgress control hiển với tất cả các UpdatePanel có trong trang

web. Nếu muốn nó kết hợp với một UpdatePanel duy nhất thì sử dụng thuộc tính

AssociatedUpdatePanelID = “IDof UpdatePanel”

<asp:UpdateProgress ID="UpdateProgress1" runat="server"

AssociatedUpdatePanelID="UpdatePanel1" >

- Ví dụ:

Khi click vào button thì đoạn text giữa cặp tag <ProgressTemplate> sẽ được hiển thị.

5. Timer

- Dùng để tạo một bộ đếm thời gian, để trang web có thể tải lại dữ liệu khi đến thời

gian quy định

- Code sinh ra:

<asp:Timer ID="Timer1" runat="server" Interval="1000">

</asp:Timer>

- Interval chỉ định khoảng thời gian mà Timer control thực hiện tải lại.

- Timer control sẽ kích hoạt sự kiện Tick khi khi đến thời gian.

- Ví dụ: Trang web sẽ update một cách tự đông UpdatePanel sau một khoảng thời

gain được quy định trong Timer.

- Khi chạy

Cứ sau mỗi giây thời gian sẽ được cập nhật lại từ server.

Chương 2. Ajax Control ToolKit

1. Thêm Ajax Control ToolKit vào Toolbox của bạn.

- ASP.NET AJAX Control Toolkit không được cài sẵn trong ASP.NET 3.5

Framework. Bạn có thể download tại địa chỉ: http://AjaxControlToolkit.CodePlex.com

- Bạn có thể thêm ASP.NET AJAX Control Toolkit vào Visual Web Developer

Toolbox bằng các bước sau:

Trong Visual Web Developer tảo một trang Web mới.

Click chuột phải vào cửa sổ Toolbox, chọn menu Add Tab, tạo một tab mới ví

dụ Ajax control Toolkit.

Click phải vào tên Tab vừa tạo và chọn Choose Items.

Một cửa sổ xuất hiện. Click Browse ở tab .NET Framework Components.

Tìm đến AjaxControlToolkit.dll mà bạn vừa giải nén ở trên.

2. AsyncFileUpload

a. Mô tả

- Điều khiển AsyncFileUpload cho phép bạn upload không đồng bộ tập tin lên

Server. Kết quả của việc upload có thể được kiểm tra ở cả client và server.

b. Code:

<asp:AsyncFileUpload OnClientUploadError="uploadError"

     OnClientUploadComplete="uploadComplete" runat="server"

     ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"

     UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"

/>

- Sự kiện:

UploadedComplete: Sự kiện trên Server được gọi khi file được upload

xong.

UploadedFileError: : Sự kiện trên Server được gọi khi upload bị lỗi.

- Thuộc tính:

ContentType: Loại file được gửi.

FileName: Tên file được gửi.

OnClientUploadComplete: Tên hàm javascript sẽ được gọi ở client khi

upload xong.

Tương tự : OnClientUploadError, OnClientUploadStarted.

ThrobberID: Id của điều khiển sẽ được hiển thị khi đang upload.

- Phương thức:

SaveAs(string filename): Lưu file.

c. Ví dụ:

<script type="text/javascript">

function comp(){

alert("Upload thành công"); }

</script>

-----------------------------------------------------------------

<body>

<form id="form1" runat="server">

<asp:ToolkitScriptManager ID="ToolkitScriptManager1"

runat="server" />

<div> <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="comp" onuploadedcomplete="AsyncFileUpload1_UploadedComplete" /> </div> </form>

</body>

-----------------------------------------------------------------

protected void AsyncFileUpload1_UploadedComplete(object sender,

AjaxControlToolkit.AsyncFileUploadEventArgs e){

string filename = e.filename;

filename = Server.MapPath("file") + "\\" + filename; AsyncFileUpload1.SaveAs(filename);

}

-----------------------------------------------------------------

3. AutoCompleteExtender

a. Mô tả

- AutoCompleteExtender có thể được kết hợp với TextBox bất kỳ. Nó hiển thị

một danh sách các gợi ý. Hoạt động như Google Suggest.

b. Code:

- Kéo control AutoComplete từ ToolBox vào Web của bạn:

- Code được sinh ra:

<asp:AutoCompleteExtender ID="AutoCompleteExtender2"

runat="server">

</asp:AutoCompleteExtender>

- Để AutoComplete làm việc được thì bạn phải đặt giá trị cho 2 thuộc tính.

TargetControlID: ID của TextBox mà AutoComplete sẽ tác động

ServiceMethod: Phương thức của Web sẽ được gọi để tìm và nạp

dữ liệu chu suggest.

- Một số thuộc tính quan trọng khác:

ServicePath: Địa chỉ hay đường dẫn của WebServer để lấy dữ liệu.

MinimumPrefixLength: Số ký tự nhập vào tối thiểu để Autocomplete thực

hiện nhận gợi ý từ Server.

EnableCaching: caching của Client được bật hay không.

CompletionSetCount: Số kết quả được trả về từ server.

CompletionInterval: Thời gian (ms) mà bộ đếm thời gian sẽ kích

AutoComplete nhận suggest từ Server.

- Và phần quan trọng cuối cùng là tạo một Web Method để lọc và nạp dữ liệu

cho suggest. Web Mothod của AutoComplete bắt buộc phải có dạng sau.

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public string[] function_name(string prefixText,

int count) { ... }

prefixText: Từ khóa được nhập vào.

Count: Số kết quả tối đa trả về.

c. Ví dụ

- Viết một Web Method để lọc dữ liệu từ tập tin xml. Bạn có thể thiết kế nhận từ

một CSDL hay bấy kỳ một tập tin nào . . . Miễn sao hàm có cấu trúc như trên.

Bước 1: Tạo một thư mục chứa Website mới. Ví dụ AutoComplete.

Bước 2: Tạo một trang web mới trong thư mục này. Ví dụ Auto.aspx

Bước 3: Tạo một Web Service mới. Ví dụ Service.asmx. Sẽ xuất hiện một

Class tên Service.cs trong thư mục App_code. Bạn sẽ viết Web Method ở đây.

Bước 4: Soạn thảo Web Method. Trong màn hình soạn thảo Service.cs

Lúc đầu:

Thêm dòng quan trọng:

Bước 5: Viết hàm getSuggest: Ví dụ

public string[] getSuggest(string prefixText, int count)

{

List<string> items = new List<string>(count);

XmlTextReader reader = new

XmlTextReader(Server.MapPath("Countries.xml"));

while (reader.Read())

{

if (reader.NodeType == XmlNodeType.Element && reader.Name

== "Item")

{

string itemName = reader.ReadString();

if (itemName.StartsWith(prefixText,

StringComparison.InvariantCultureIgnoreCase))

{

items.Add(itemName);

if (items.Count == count)

break;

}

}

}

return items.ToArray();

}

Bước 6: Trong màn hình code của trang Auto.aspx thêm một

ToolKitScriptManager, Một TextBox và một AutoCompleteExtender. Ví dụ

Bước 7: Đặt các thuộc tính Cho Điều khiển AutoComplete để nó hoạt động

<asp:AutoCompleteExtender ID="AutoCompleteExtender1"

runat="server"

TargetControlID="TextBox1" ServiceMethod="getSuggest"

CompletionInterval="100" MinimumPrefixLength="1"

ServicePath="~/AutoComplete/Service.asmx">

</asp:AutoCompleteExtender>

File Countries.xml có dạng

<?xml version="1.0" encoding="utf-8" ?>

<Items>

<Item>Argentina</Item>

<Item>Australia</Item>

<Item>Austria</Item>

<Item>Germany</Item>

<Item>Iceland</Item>

<Item>India</Item>

<Item>Italy</Item>

<Item>United States of America</Item>

</Items>

Chạy ứng dụng:

4. Dropdown

a. Mô tả:

- Dropdown control làm việc các server-control của ASP.NET như Label,

Button, Panel,…. Cho phép tạo ra một drop-down menu. Trong đó Panel có thể chứa

các LinkButton hay một Control nào khác. Và khi click chuột vào Label thì Các

control trong Panel sẽ được hiển thị.

- Có thể kết hợp với một Ajax UpdatePanel thể thực hiện một mục đích nào đó.

Ví dụ: Khi click vào các button trong Panel thì tiến hành update lại UpdatePanel.

b. Code:

<asp:DropDownExtender ID="DropDownExtender1" runat="server"

TargetControlID="Label1"

DropDownControlID="Panel1">

</asp:DropDownExtender>

- TargetControlID: ID của control cần drop-dow

- DropDownControlID: ID của control sẽ được hiển thị khi dropdow

c. Ví dụ: Code cho ví dụ trên

5. s