Ajax Control ToolKit
Download as DOCX, PDF4 likes1,926 views
Tài liệu giới thiệu về ASP.NET AJAX Control Toolkit và cách sử dụng các thành phần như ScriptManager, UpdatePanel, UpdateProgress, Timer và AsyncFileUpload để cải thiện hiệu suất ứng dụng web. Nó cũng trình bày cách cài đặt AJAX Control Toolkit và cách kết hợp các điều khiển như AutocompleteExtender và DropdownExtender với các điều khiển server trong ASP.NET. Cuối cùng, các ví dụ mã nguồn được cung cấp để minh họa cách sử dụng từng điều khiển một cách hiệu quả.
Ajax Control ToolKit
- 1. ASP.NET AJAX CONTROL TOOLKIT<br />ASP.NET Ajax Server Extensions
- 2. Gới thiệu.
- 3. 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.
- 4. Để sử dụng Ajax Server Extensions bạn cần cài đặt:
- 5. Microsoft Visual Studio 2005 trở lên.
- 6. Microsoft ASP .NET Ajax Server Extensions
- 7. ASP.NET Ajax Server Controls bao gồm:
- 10. Timer
- 11. UpdatePanel
- 12. UpdateProgress
- 13. ScriptManager.
- 14. Đ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.
- 15. 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.
- 16. Để sử dụng ScriptManager control kéo nó từ Ajax extensions trong thanh công cụ.
- 17. Đoạn code sinh ra là:
- 19. 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.
- 20. UpdatePanel
- 21. Điều khiển UpdatePanel cho phép bạn tải lại một phần của trang WEB
- 22. Ví dụ:
- 23. Chạy ví dụ:
- 24. Khi bạn click vào button thì chỉ có phần UpdatePanel là được tải lại:
- 26. Bên trong điều khiển UpdatePanel có 2 tag con là: <ContentTemplate> và <Triggers>.
- 27. 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ộ.
- 28. Thuộc tính Render Modes của UpdatePanel: có 2 giá trị là “Inline” và “Block”.
- 29. Nếu RenderMode= “Inline”:
- 30. <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">…
- 31. Thì UpdatePanel trả lại ơ phía Client là thẻ <span>. Mặc định là thẻ <div>
- 33. UpdatePanel Time: 07/12/2010 9:46:01 AM
- 34. <br />
- 35. <input type="submit" name="Button1" value="Button"
- 36. id="Button1" />
- 37. </span>
- 38. 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.
- 42. Các sự kiện của UpdatePanel: Init, Load, PreRender, Unload.
- 43. 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:
- 44. AsyncPostBackTrigger – Tải lại một cách không đồng bộ.
- 45. PostBackTrigger – Tải lại bình thường.
- 46. 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.
- 47. 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.
- 48. UpdateProgress
- 49. Được sử dụng để hiển thị tiến trình tải lại của một hay nhiều UpdatePanel control
- 50. Code sinh ra:
- 52. ……
- 54. 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”
- 55. <asp:UpdateProgress ID="UpdateProgress1" runat="server"
- 57. Ví dụ:
- 59. Khi click vào button thì đoạn text giữa cặp tag <ProgressTemplate> sẽ được hiển thị.
- 60. Timer
- 61. 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
- 62. Code sinh ra:
- 63. <asp:Timer ID="Timer1" runat="server" Interval="1000">
- 64. </asp:Timer>
- 65. Interval chỉ định khoảng thời gian mà Timer control thực hiện tải lại.
- 66. Timer control sẽ kích hoạt sự kiện Tick khi khi đến thời gian.
- 67. 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.
- 68. Khi chạy
- 69. Cứ sau mỗi giây thời gian sẽ được cập nhật lại từ server.
- 71. Thêm Ajax Control ToolKit vào Toolbox của bạn.
- 72. 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
- 73. Bạn có thể thêm ASP.NET AJAX Control Toolkit vào Visual Web Developer Toolbox bằng các bước sau:
- 74. Trong Visual Web Developer tảo một trang Web mới.
- 75. 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.
- 76. Click phải vào tên Tab vừa tạo và chọn Choose Items.
- 77. Một cửa sổ xuất hiện. Click Browse ở tab .NET Framework Components.
- 78. Tìm đến AjaxControlToolkit.dll mà bạn vừa giải nén ở trên.
- 79. AsyncFileUpload
- 80. Mô tả
- 81. Đ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.
- 82. Code:
- 84. Sự kiện:
- 85. UploadedComplete: Sự kiện trên Server được gọi khi file được upload xong.
- 86. UploadedFileError: : Sự kiện trên Server được gọi khi upload bị lỗi.
- 87. Thuộc tính:
- 88. ContentType: Loại file được gửi.
- 89. FileName: Tên file được gửi.
- 90. OnClientUploadComplete: Tên hàm javascript sẽ được gọi ở client khi upload xong.
- 91. Tương tự : OnClientUploadError, OnClientUploadStarted.
- 92. ThrobberID: Id của điều khiển sẽ được hiển thị khi đang upload.
- 93. Phương thức:
- 94. SaveAs(string filename): Lưu file.
- 95. Ví dụ:
- 97. function comp(){ alert(\" Upload thành công\" );<br /> }<br /></script>
- 99. <body>
- 101. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" /> <div><br /> <asp:AsyncFileUpload ID=\" AsyncFileUpload1\" runat=\" server\" <br /> OnClientUploadComplete=\" comp\" <br /> onuploadedcomplete=\" AsyncFileUpload1_UploadedComplete\" /><br /> </div><br /> </form><br /></body>
- 103. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e){
- 104. string filename = e.filename; filename = Server.MapPath(\" file\" ) + \" \\\" + filename;<br /> AsyncFileUpload1.SaveAs(filename);<br />}
- 106. AutoCompleteExtender
- 107. Mô tả
- 108. 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.
- 109. Code:
- 110. Kéo control AutoComplete từ ToolBox vào Web của bạn:
- 111. Code được sinh ra:
- 114. Để AutoComplete làm việc được thì bạn phải đặt giá trị cho 2 thuộc tính.
- 115. TargetControlID: ID của TextBox mà AutoComplete sẽ tác động
- 116. ServiceMethod: Phương thức của Web sẽ được gọi để tìm và nạp dữ liệu chu suggest.
- 117. Một số thuộc tính quan trọng khác:
- 118. ServicePath: Địa chỉ hay đường dẫn của WebServer để lấy dữ liệu.
- 119. MinimumPrefixLength: Số ký tự nhập vào tối thiểu để Autocomplete thực hiện nhận gợi ý từ Server.
- 120. EnableCaching: caching của Client được bật hay không.
- 121. CompletionSetCount: Số kết quả được trả về từ server.
- 122. CompletionInterval: Thời gian (ms) mà bộ đếm thời gian sẽ kích AutoComplete nhận suggest từ Server.
- 123. 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.
- 126. public string[] function_name(string prefixText, int count) { ... }
- 127. prefixText: Từ khóa được nhập vào.
- 128. Count: Số kết quả tối đa trả về.
- 129. Ví dụ
- 130. 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.
- 131. Bước 1: Tạo một thư mục chứa Website mới. Ví dụ AutoComplete.
- 132. Bước 2: Tạo một trang web mới trong thư mục này. Ví dụ Auto.aspx
- 133. 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.
- 134. Bước 4: Soạn thảo Web Method. Trong màn hình soạn thảo Service.cs
- 135. Lúc đầu:
- 136. Thêm dòng quan trọng:
- 137. Bước 5: Viết hàm getSuggest: Ví dụ
- 138. public string[] getSuggest(string prefixText, int count)
- 139. {
- 140. List<string> items = new List<string>(count);
- 141. XmlTextReader reader = new XmlTextReader(Server.MapPath("Countries.xml"));
- 143. {
- 144. if (reader.NodeType == XmlNodeType.Element && reader.Name == "Item")
- 145. {
- 146. string itemName = reader.ReadString();
- 148. {
- 149. items.Add(itemName);
- 150. if (items.Count == count)
- 151. break;
- 152. }
- 153. }
- 154. }
- 156. }
- 157. 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ụ
- 158. Bước 7: Đặt các thuộc tính Cho Điều khiển AutoComplete để nó hoạt động
- 160. TargetControlID="TextBox1" ServiceMethod="getSuggest" CompletionInterval="100" MinimumPrefixLength="1" ServicePath="~/AutoComplete/Service.asmx">
- 162. File Countries.xml có dạng
- 164. <Items>
- 167. <Item>Austria</Item>
- 168. <Item>Germany</Item>
- 169. <Item>Iceland</Item>
- 170. <Item>India</Item>
- 171. <Item>Italy</Item>
- 172. <Item>United States of America</Item>
- 173. </Items>
- 174. Chạy ứng dụng:
- 175. Dropdown
- 176. Mô tả:
- 177. 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ị.
- 178. 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.
- 179. Code:
- 184. TargetControlID: ID của control cần drop-dow
- 185. DropDownControlID: ID của control sẽ được hiển thị khi dropdow
- 186. Ví dụ: Code cho ví dụ trên
- 187. s