Hướng dẫn sử dụng Ajax control Toolkit

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:

8. ScriptManager.

9. ScriptManagerProxy

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à:

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

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>

32. <span id="UpdatePanel1">

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.

40. Khi click UpdateMode-Inline:

41. Khi click UpdateMode-Conditional:

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:

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

52. ……

53. </asp:UpdateProgress>

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"

56. AssociatedUpdatePanelID="UpdatePanel1" >

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.

70. Ajax Control ToolKit

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:

83. <asp:AsyncFileUpload OnClientUploadError="uploadError" OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" UploadingBackColor="#CCFFFF" ThrobberID="myThrobber"/>

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ụ:

96. <script type="text/javascript">

98. -----------------------------------------------------------------

99. <body>

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

102. -----------------------------------------------------------------

103. protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e){

105. -----------------------------------------------------------------

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:

112. <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server">

113. </asp:AutoCompleteExtender>

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.

124. [System.Web.Services.WebMethod]

125. [System.Web.Script.Services.ScriptMethod]

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"));

142. while (reader.Read())

143. {

144. if (reader.NodeType == XmlNodeType.Element && reader.Name == "Item")

145. {

146. string itemName = reader.ReadString();

147. if (itemName.StartsWith(prefixText, StringComparison.InvariantCultureIgnoreCase))

148. {

149. items.Add(itemName);

150. if (items.Count == count)

151. break;

152. }

153. }

154. }

155. return items.ToArray();

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

159. <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"

160. TargetControlID="TextBox1" ServiceMethod="getSuggest" CompletionInterval="100" MinimumPrefixLength="1" ServicePath="~/AutoComplete/Service.asmx">

161. </asp:AutoCompleteExtender>

162. File Countries.xml có dạng

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

164. <Items>

165. <Item>Argentina</Item>

166. <Item>Australia</Item>

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:

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

181. TargetControlID="Label1"

182. DropDownControlID="Panel1">

183. </asp:DropDownExtender>

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