AjaxControlToolkit사용법

AjaxControlToolkit을 사용해 봤습니다 AjaxControlToolkit은 <a href="http://ajax.asp.net/" target=nlink>http://ajax.asp.net/</a> 에 가셔서 구하실 수 있습니다. 압축을 푸시고 AjaxControlToolkit\AjaxControlExtender 폴더안에 AjaxControlExtender.vsi라는 파일을 실행 시키시면 자동으로 템플릿이 설치가 됩니다 AjaxControlToolkit 에는 소스 코드가 들어 있습니다 SampleWebSite 에는 말 그대로 컨트롤을 웹에 띄운 샘플이 들어 있습니다. AjaxControlToolkit.sln 함번 실행시켜서 살펴 보시면 아하 그렇구나 감이 오실 겁니다 <a href="http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx" target=nlink>http://ajax.asp.net/ajaxtoolkit/Accordion/Accordion.aspx</a> 이 페이지에서 컨트롤들을 구경(?) 하실 수 있습니다 사용법은 생각보다 간단합니다 파일-새로 만들기에서 웹사이트를 클릭하면 첨부 파일의 새 웹 사이트.bmp와 같은 창이 열립니다 저는 ASP.NET AJAX-Enable Web Site로 웹사이트를 만들어 보겠습니다. 이제 ajax 컨트롤을 추가 시킵니다 참조 추가로 AjaxControlToolkit.dll파일을 추가 시키면 도구상자에 AjaxControl들이 보일때도 있고 안보일때도 있습니다 다는 아니고 몇개만 보이기도 하더군요.. 저는 아예 없다치고 컨트롤을 수동으로 추가했습니다. 도구 상자에 탭을 추가시킵니다(첨부파일 탭 추가.bmp참조) 저는 AjaxControlToolkit이라고 이름은 적었습니다 다시 마우스 우클릭으로 항목선택을 클릭후 찾아보기에서 SampleWebSite\bin 폴더 안에 있는 AjaxControlToolkit.dll을 선택합니다 그럼 도구상자에 AjaxControl들이 추가 될 겁니다 자 이제부터 컨트롤을 사용해 볼까요 디자인창에 보시면 ScriptManager라는거 자동으로 떠 있을 겁니다. 이게 위에 있어야 ajaxcontrol을 사용할 수 있습니다. Animation 컨트롤을 사용해 보겠습니다. 도구상자에서 panel 컨트롤 하나와 AnimationExtender 컨트롤을 끌어다가 놓습니다 AnimationExtender 컨트롤 속성창에서 TargetControlID에 panal컨트롤의 name을 적어 넣습니다 다음 소스창으로 가서 AnimationExtender태그 밑에<Animations>이라는 태그를 추가합니다 위에서 컨트롤들을 접해 볼 수 있는 사이트에 가보시면 하단에 animation property 란에서 다음과 같은 글을 보실 수 있습니다. <Animations> <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnLoad> ... </[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnLoad> <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnClick> ... </[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnClick> <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnMouseOver> ... </[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnMouseOver> <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnMouseOut> ... </[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnMouseOut> <OnHoverOver> ... </OnHoverOver> <OnHoverOut> ... </OnHoverOut> </Animations> 보시기만 해도 무슨 뜻인지 알겠죠? panal 컨트롤에 "안녕하세요 정진수입니다"라는 글귀를 적어놓고(첨부파일 디자인.bmp참조) [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnClick 태그를 추가하겠습니다. On***태그 밑에는 여러가지 태그가 들어 갈 수 있습니다. 여기서는 FadeOut 이라는 태그를 사용해 보겠습니다. FadeOut 은 컨트롤을 사라지게 만드는 태그입니다 이용해보면 다음과 같습니다. <cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Panel1"> <Animations> <[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnClick> <FadeOut Duration=".5" Fps="20" /> </[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-OnClick> </Animations> </cc1:AnimationExtender> 한번 실행해서 판넬을 클릭해 보세요 판넬이 사라지죠? AnimationExtender컨트롤은 이것 말고도 여러 태그들이 많이 있답니다 추가적인 정보는 <a href="http://ajax.asp.net/ajaxtoolkit/Animation/Animation.aspx" target=nlink>http://ajax.asp.net/ajaxtoolkit/Animation/Animation.aspx</a>에서 Animation Description 란에서 Animation Reference 를 클릭하시면 많은 도움이 되실 겁니다 다른 컨트롤들도 같은 방법으로 사용해 보세요 직접 해보니 재미있네요 여러분도 한번 사용해 보시고요 ajax세상으로 어서 들어오세요