Upload
truong-thanh-thien
View
15
Download
0
Embed Size (px)
Citation preview
Sử dửng AjaxToolKit tửo Calender và
PopupKaelNguyen 01/02/2012, 11:16 PM
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
1
Đửu tiên ta tửo mửt Webiste đử thử nghiửm. File > New > Website
Hôm nay mình sử hửửng dửn các bửn sử dửng bử AjaxControlToolKit NET4 đử
tửo mửt Calender giửng CalenderPicker và mửt cửa sử Popup
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
2
Chửn Emty Website, chửn đửửng dửn đử lửu
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
3
Sau đó nhửn OK
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
4
Chuửt phửi Website và Add new item
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
5
Chửn WebForm và đửt tên tùy ý, ử đây mình đử mửt đửnh
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
6
Bên cửa sử ToolBox chuửt phửi tab General và chửn Add Tab
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
7
Đửt tên tùy ý, nên đửt tên gửi nhử. VD : Ajax
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
8
Chuửt phửi tab vửa tửo > Choose Item
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
9
Nhửn Browse
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
10
Dửn tửi thử mửc chửa toàn bử Ajax, nên đử ử thử mửc gửc ử C. Và down bử AjaxControl
Toolkit NET4
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
11
Mử thử mửc này
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
12
Chửn file AjaxControlToolKit.dll
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
13
Sau đó vào phửn Designer cửa Webform vửa tửo, ử trong tag <form> </form>
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
14
Kéo thử ToolkitScriptManager vào
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
15
Sau đó qua phửn Design đử xem,sử thửy xuửt hiửn phửn ToolkitScriptManager. Chúng ta
sử insert 1 table vào đử test thử 2 dòng 2 cửt
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
16
Cửt đửu tiên sử là Ngày, Show popup. Bên cửt 2 dòng tửửng ửng ta sử kéo 1 textbox và 1
button vào. Dòng bên dửửi sử là 1 Button đử làm xuửt hiửn Popup và 1 Panel chính là cửa sử
popup. Sau khi add ToolkitScriptManager vào, các control sử có 1 mũi tên nhử bên phửi,
khi nhửn vào sử thửy có dòng Add Extender. Nhửn vào mũi tên cửa Textbox và chửn Add
Extender
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
17
Vì chúng ta muửn làm xuửt hiửn mửt Calender nên sử chửn CalenderExtender và OK
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
18
Properties Button kử Textbox, tìm phửn (ID) và copy ID cửa Button
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
19
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
20
Quay lửi Textbox > Properties > Sử phửn Extender > Sử Textbox1_CalenderExtender
(Textbox1 là ID cửa Textbox, và CalenderExtender : là tên cửa Extender đã add) > dán
ID cửa Button vửa copy vào ô PopupButtonID
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
21
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
22
Button thử 2 ta cũng Add Extender. Panel ta set Color cho Background đử dử nhìn
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
23
Add ModelPopupExtender cho Button thử 2 > OK
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
24
Copy ID cửa Panel
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
25
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
26
Properties Button 2 > sử Extender > sử Button2_ModalPopupExtender > Dán ID cửa Panel
vào ô PopupControlID
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
27
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
28
Trong Panel ta kéo thử 1 button (Button3) vào đử làm nút đóng cửa sử > copy ID cửa
Button 3
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
29
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
30
Quay lửi Button2 cửng sử Extender > sử Button2_Modal... và dán ID cửa Button3 vào ô
CancelControlID
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
31
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
32
Chúng ta test thử
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
33
Save lửi
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
34
Khi nhửn Button1 thì sử có 1 khung Calender xuửt hiửn, chửn 1 ngày và thửy ngày này xuửt
hiửn trên TextBox
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
35
Theo đửnhdửng MM/dd/yyyy. Ta thử nhửn Button2
Sử dửng AjaxToolKit tửo Calender và PopupKaelNguyen
36
Panel xuửt hiửn. Nửu click Button3 thì Panel sử đóng lửi