Su Dung Ajax Toolkit Tao Calender Va Popup

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


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 đửnhdử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

Documents

Transcript of Su Dung Ajax Toolkit Tao Calender Va Popup