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

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