Su dung ajax toolkit tao calender va popup

Sử dửng AjaxToolKit tửo Calender và
Popup
KaelNguyen 01/02/2012, 11:16 PM

KaelNguyen Sử dửng AjaxToolKit tửo Calender và Popup

1 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

Đửu tiên ta tửo mửt Webiste đử thử nghiửm. File > New > Website


2

Chửn Emty Website, chửn đửửng dửn đử lửu


3

Sau đó nhửn OK


4

Chuửt phửi Website và Add new item


5

Chửn WebForm và đửt tên tùy ý, ử đây mình đử mửt đửnh


6

Bên cửa sử ToolBox chuửt phửi tab General và chửn Add Tab


7

Đửt tên tùy ý, nên đửt tên gửi nhử. VD : Ajax


8

Chuửt phửi tab vửa tửo > Choose Item


9

Nhửn Browse


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


11

Mử thử mửc này


12

Chửn file AjaxControlToolKit.dll


13

Sau đó vào phửn Designer cửa Webform vửa tửo, ử trong tag <form> </form>


14

Kéo thử ToolkitScriptManager vào


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


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


17

Vì chúng ta muửn làm xuửt hiửn mửt Calender nên sử chửn CalenderExtender và OK


18

Properties Button kử Textbox, tìm phửn (ID) và copy ID cửa Button


19


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


21


22

Button thử 2 ta cũng Add Extender. Panel ta set Color cho Background đử dử nhìn


23

Add ModelPopupExtender cho Button thử 2 > OK


24

Copy ID cửa Panel


25


26

Properties Button 2 > sử Extender > sử Button2_ModalPopupExtender > Dán ID cửa Panel
vào ô PopupControlID


27


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


29


30

Quay lửi Button2 cửng sử Extender > sử Button2_Modal... và dán ID cửa Button3 vào ô
CancelControlID


31


32

Chúng ta test thử


33

Save lửi


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


35

Theo đửnh dửng MM/dd/yyyy. Ta thử nhửn Button2


36

Panel xuửt hiửn. Nửu click Button3 thì Panel sử đóng lửi

Su dung ajax toolkit tao calender va popup

Recommended

Recommended

More Related Content

More from Trường Tiền

More from Trường Tiền (20)

Su dung ajax toolkit tao calender va popup