최고보다,최선을... ::

« » 2010.07
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

'프로그래밍/ASP.NET AJAX'에 해당되는 글 18건

2008/10/17 [Tip] TabContainer 스타일 지정 (3)
2008/10/07 [AJAX Control] SliderExtender 써보기~!
2008/09/21 [AJAX Control] UpdatePanelAnimationExtender 써보기~!
2008/09/18 [AJAX Control] TabContainer Control 써보기~! (4)
2008/09/03 [AJAX Control] ResizableControlExtention 써보기~! (4)
2008/08/14 [Tip] ASP.NET AJAX UpdatePanel 안에서 파일업로드 시켜보기...
2008/01/06 ASP.NET AJAX 프로젝트 만들기 준비 사항~!
2007/12/05 AJAX 방명록 만들기[9]
2007/12/04 AJAX 방명록 만들기[8]
2007/11/21 AJAX 방명록 만들기[7]

[Tip] TabContainer 스타일 지정

프로그래밍/ASP.NET AJAX / 2008/10/17 17:33

전에 제가 올린 글 중에 “[AJAX Control] TabContainer Control 써보기~!”라는 강좌가 있었는데요. 이번에는 그 TabContainer Control에 Style을 넣어 보도록 하겠습니다.

먼저 CSS Class를 지정해 주기에 몇 가지 규칙을 알아야 해요. 아래 그림과 표를 보시면 이해가 빠르실 것 같네요.

CSS Class Names	설명
ajax__tab_header	Tab 영역 전체 스타일 지정.
ajax__tab_body	Content 영역 스타일 지정.
ajax__tab_active	현재 선택된 Tab의 스타일 지정.
ajax__tab_tab	Tab의 텍스트 관련 스타일 지정.
ajax__tab_inner	Tab의 왼쪽 영역 스타일 지정.
ajax__tab_outer	Tab의 오른쪽 모서리 영역 스타일 지정.
ajax__tab_hover	마우스 Over시 스타일 지정.

자 그럼 이제 아래 style을 지정한 코드를 보도록 하겠습니다.

CSS Code

.ajax__myTab .ajax__tab_header

{

font-family: verdana, tahoma, helvetica;

font-size: 11px;

border-bottom: solid 1px #999999;

}

.ajax__myTab .ajax__tab_outer

{

padding-right: 4px;

height: 21px;

background-color: #C0C0C0;

margin-right: 2px;

border-right: solid 1px #666666;

border-top: solid 1px #aaaaaa;

}

.ajax__myTab .ajax__tab_inner

{

padding-left: 3px;

background-color: #C0C0C0;

}

.ajax__myTab .ajax__tab_tab

{

height: 13px;

padding: 4px;

margin: 0;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_outer

{

background-color: #cccccc;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_inner

{

background-color: #cccccc;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_tab

{

}

.ajax__myTab .ajax__tab_active .ajax__tab_outer

{

background-color: #fff;

border-left: solid 1px #999999;

}

.ajax__myTab .ajax__tab_active .ajax__tab_inner

{

background-color: #fff;

}

.ajax__myTab .ajax__tab_active .ajax__tab_tab

{

}

.ajax__myTab .ajax__tab_body

{

font-family: verdana, tahoma, helvetica;

font-size: 10pt;

border: 1px solid #999999;

border-top: 0;

padding: 8px;

background-color: #ffffff;

}

</style>

위에 정리한 표와 함께 보시면 코드 이해하시는데 무난할 거라 생각이 드네요! 이제 Class Name을 지정해 주어야 지요. 역시 말보다는 코드로 보시는게 빠르실 듯 하네요.

HTML Code

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170"

ActiveTabIndex="0" CssClass="ajax__myTab">

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

ㅁ '뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요

<br />

... 내용 생략 ...

</ContentTemplate>

</AjaxControl:TabPanel>
</AjaxControl:TabContainer>

위 코드에서 보시면 TabContainer 에 CssClass 속성에 "ajax__myTab"이라고 지정해 준것을 보실수 있을 거예요. 정말 사용하기 간단하지요. 아래 그림은 제가 간단하게 만들어본 예제 예요. 소스도 같이 올려 놓을 게요.

Reference : http://programming.top54u.com/post/ASP-Net-AJAX-Tab-Extender-CSS-Class-Styles.aspx

Posted by happydong drum-83

TAG ajax, AJAXControls, TabContainer Style

트랙백 0, | 댓글 3

[AJAX Control] SliderExtender 써보기~!

프로그래밍/ASP.NET AJAX / 2008/10/07 01:43

AjaxSliderControl.zip
ㅁ SliderExtender

Slider Control를 이용한 사용자 편의성을 제공해주는 사이트 종종 봤을 거예요. 제가 가끔 보는 사이트인 조선닷컷은 편의성을 위해 글자의 크기를 조절할 수 있도록 해놨더라고요. (아래 그림 참고)

※ 위 사이트는 조선닷컴 사이트 입니다.

위 에서 빨간색으로 표시된 부분을 보시면 알수 있듯이 Slider Control를 이용해서 글자의 크기를 조절 할수 있게 만들져 있네요. 눈이 별로 좋지 않은 사람,혹은 어른신들을 고려해서 만든 기능이 아닐까 하는 생각이 드는군요^^
저는 ASP.NET AJAX Controls 중에서 SliderExtender Control를 이용해서 위와 같은 형식의 기능을 제공하는 예제를 만들어 볼 것이며, 여러가지 예제를 추가적으로 더 만들어 볼게요.

먼저, SliderExtender Control의 속성이 무엇이 있는지 알아야 겠지요.

속성	설명
Minimum	최소값 설정.
Maximum	최대값 설정
Decimals	소수점 자리 설정.
Steps	지정 숫자의 값 만큼 슬라이더 범위 이동.
Value	현재 슬라이더 지정 위치 값.(TextBox,Label의 Value(Text)속성에서 지정.)
EnableHandleAnimation	슬라이더 움직임 Animation 사용설정.
RailCssClass	슬라이더 레일 CSS Class 설정.
HandleCssClass	슬라이더 손잡이 CSS Class 설정.
HandleImageURL	슬라이더 손잡이 이미지로 표시 URL지정.
Length	수평/수직 슬라이더 너비를 지정.
BoundControlID	슬라이더의 값을 표시 할 TextBox 또는 Label 컨트롤 ID 지정.
RaiseChangeOnlyOnMouseUp	슬라이더에 Change이벤트가 있을 때, MouseUp 이벤트 발생인지, Mousedong 중 Slider때 이벤트발생인지 여부 설정.
TooltipText	마우스가 슬라이더 위에 올라왔을 때 슬라이더의 위치 값을 표시.(img태그 속성 중 alt과 비슷함.) [사용예] TooltipText=”지정값은:{0}” {0}안에 값이 표시됨.

간단하게 속성을 정리해 봤어요.
이제 조선닷컴과 같은 기능을 하는 예제를 만들어 볼게요. 먼저 아래 그림을 보도록 해요.

어떤가요? 조선닷컴의 기능과 비슷한 것 같은가요? 일단 비슷하다고 치고 어떻게 만들어 졌는지 한번 코드를 보도록 하겠습니다. 아래는 .aspx페이지의 코드 내용입니다.

.aspx페이지

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<br />

<%-- 데이터 표시를위한 TextBox --%>

<asp:TextBox runat="server" ID="txtSlider_BoundControl" Visible="false"></asp:TextBox><br />

<%-- Slider가 될 TextBox --%>

<asp:TextBox runat="server" ID="txtSlider" onchange="DivStyle();" />

</div>

<div id="divContent01" style="width: 100%; font-size:10pt; height: 100%; background: #959695;

padding-top: 0px;">

-> 예비군 훈련 다녀왔습니다~

<br />

-> 두려움이 신속하게 몰려옵니다~ >_<

<br />

-> 안녕하세요 java 6개월 학원 수료후 신입으로 ...

<br />

-> SQL Server 2008 Business Co...

<br />

-> Wii 당첨.. 그러나

<br />

-> 저는 자바 개발자 입니다. 닷넷에 발을 들여 놓으...

<br />

-> AJAX 채팅을 만들어 봤습니다.

</div>

<%-- SliderControl --%>

<cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtSlider"

BoundControlID="txtSlider_BoundControl"

Orientation="Horizontal"

EnableHandleAnimation="true"

RaiseChangeOnlyOnMouseUp="false"

TooltipText="슬라이드값{0}"

Minimum="9"

Maximum="30"

</form>

</body>

위 코드에서 유심히 볼 코드는 SliderExtender 컨트롤과 2개의 TextBox 컨트롤 이라고 생각이 되는 군요. SliderExtender 속성 중에서 BoundControlID 속성을 제가 txtSlider_BoundControl(TextBox컨트롤ID)으로 지정해두고 정작 TextBox컨트롤 Visible속성을 false로 지정해서 이상하다 생각 하실수도 있을 텐데요, 그 이유는 코드를 집적 작성하시면서 나중에 true로 바꾸셔서 슬라이드 값이 변경되는 것을 확인하시라고 지정한 거예요! 물론, 값을 볼 필요가 없다고 하시면BoundControlID 속성 지정하지 않아도 되요. 그리고 제가 지정한 속성은 위에 정리한 표를 비교해서 보시면 이해하기가 더 편하실거예요.

그럼 이제 두번째 TextBox컨트롤에 onchange이벤트를 호출하는 스크립트함수를 만들어 볼게요. 두번째 TextBox컨틀롤이 UI에서 슬라이드컨트롤로 변경되니깐 이쪽에 onchange이벤트를 줘야 겠지요.참고로 처음 슬라이드핸들의 위치를 지정하시고 싶으시면 TextBox컨트롤의 Text속성에 지정해 주면되요.
아래 스크립트 함수는 맨아래에 작성해 주세요.(즉, </html> 다음에요)

Script 함수

function DivStyle()

{

var txt = $get('<%= txtSlider.ClientID %>');

document.getElementById("divContent01").style.fontSize = txt.value +"pt";

}

</script>

스크립트를 아래쪽에 작성하는 이유는 사이트성능 향상을 위해서 좋고, head안에 넣으면 에러가 나기 때문이예요. 스크립트 안에 인라인수식으로 컨트롤 아이디를 지정하기 때문에 컨트롤이 생성되기 전에 스크립트가 먼저 실행되면 에러가 나겠지요.그래서 Body안 아니면,맨아래 부분에 넣어주는 것이 좋은데...저는 맨아래 부분에 작성해 보았어요.^^

이제 코드를 다 작성했네요. .cs페이지에는 따로 작성할 코드가 없어요.(필요에 따라 작성해서 만드세요) 여기까지 잘 따라서 하셨다면 잘 실행되리라 믿을게요~^^

이런식으로 해서 제가 몇가지 예제를 더 만들어 봤는데요. (아래 그림 참고)

위 예제는 아주 간단하게 만들수 있겠지요. 아까 위에서 스크립트코드에서 객체의 Style을 지정해 주었잖아요. fontSize에서 filter로만 변경해 주고 정확한 표현의 방식의 값이 들어가게 지정만 해주면 되요.

위 예제는 재미있겠지요. 빛의 3원색을 이용한 예제라고 할까요^^;; 빨강, 초록, 파랑 3색이 조합해서 색을 표현하는 예제지요. 이것도 스크립트로 작성해주는 부분이여서 그렇게 크게 어려울게 없을 거예요.

아래는 위 예제들을 합쳐 만든 예제입니다.

이렇게 만든사이트가 있으면 재미있지 않을까?^^
위 예제 소스들를 압축해서 올려 놓을 게요!!그리고 참고로 슬라이드 CSS 설정도 가능합니다. 즉, 슬라이드를 디자인 가능하다는 애기지요. 클릭 <- -여기 참고 하세요

Posted by happydong drum-83

TAG ajax, asp.net ajax, Slider Control, SliderExtender

트랙백 0, | 댓글 0

[AJAX Control] UpdatePanelAnimationExtender 써보기~!

프로그래밍/ASP.NET AJAX / 2008/09/21 18:56

ㅁ UpdatePanelAnimationExtender

ASP.NET AJAX 컨트롤에 관심이 있는 분이라면 한번쯤 써 봤을 컨트롤인 UpdatePanel에 Animation 효과를 주게 하는 컨트롤입니다. UpdatePanel에 관련해서는 정말 많이 있으므로 여기서 다룰 내용이 조금 미흠 하다 싶으시면 바로 네이버, 구글 등 에서 자료를 찾아 보시면 되겠습니다~^^;

자~그럼 제가 이 컨트롤을 이용해서 무엇을 만들어 볼 것이냐...?? 궁금하신가요~^^;; 음..간단한 포트 갤러리..(!?)를 만들어 보려고 합니다. 여러번 말하는 것 보다는 한번 눈으로 보는 것이 좋겠지요~^^;;그래서 준비했습니다. 아래그림들.... 한번 보도록 하시지요~

1. 그림 (실행 화면)

위 그림이 처음 로드 된 모습입니다. 이미지 아래 Checkbox가 3개 있고 버튼이 하나 있습니다. 즉, Checkbox에 체크된 효과에 맞게 Animation이 일어나는 것이지요~! 아래 그림들을 계속 보도록 하겠습니다.

2.그림 (버튼을 클릭 Animation효과에 맞게 실행되는 모습)

3.그림(Animation효과에 맞게 실행되는 모습 2)

4.그림(Animation 효과후 다른 사진)

이런 식으로 해서 실행이 됩니다~^^;

예제 사진으로 계속해서 김연아 선수를 모델로 삼고 있는데요. 별 뜻은 없습니다~^^;; 있나..ㅋㅋ 요즘 뉴스에 많이 나오잖아요~ 어린 나이에 세계에 이름을 날리고..캬~~정말 부러운 모습입니다~^^;; 이 사진들은 네이버에서 예제로 할 만한 사진을 찾다가 기사를 보고... 그러다가 김연아 선수의 미니 홈페이지에 들여서 스크랩해서 가져 왔습니다~^^;; 혹시 김연아 선수가 네이버에서 검색을 하다가 제 블러그에 올 확율은 몇 퍼센트일까요~^^;;ㅋ 이뿐 사진으로 제 예제에 도움이 되준 김연아 선수 감솨 합니다~

그럼 계속해서 내용을 이어가도록 하겠습니다.

자 그럼 이제 VS2008 또는 VS2005 를 실행을 시켜서 웹 프로젝트를 하나 만드세요~^^VS2005로 만드실 분들은 제가 늘 애기하지만 그냥 Web프로젝트를 만들면 안되는 거 아시죠~^^;; 혹시 프로젝트를 어떻게 생성해야할지 모르는 분들 은 "ASP.NET AJAX 프로젝트 만들기 준비사항"를 참고 하시길 바랍니다~^^ 이제 코드로 보도록 하겠습니다.

UpdatePanel Code (aspx페이지)

김연아선수 포토 앨범 보기~!^^<br /><br />

<asp:ScriptManager ID="ScriptManager01" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpPanel01" runat="server">

<asp:Image runat="server" ID="imgContent" ImageUrl="~/UpdatePanelAnima/images/img01.jpg" style="padding:1%; width:98%; height:560px;" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnimageChange" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</div>

<asp:Button ID="btnimageChange" runat="server" OnClick="ChangeImageClick" Text="다음사진"/>

위 코드는 그냥 UpdatePanel 컨트롤을 이용해서 페이지에 깜빡이 없이 이미지를 바꾸게 하는 코드 입니다. 그리고 위해서 조금 중요한 부분은 AnimationContainer id부분입니다. 이 Div 안에서 애니메이션이 일어나기 때문에 id를 설정해주는 것이 중요합니다. 그럼 여기서 잠깐 UpdatePanel에 대서 아주 짧게 알아보도록 하겠습니다. 짧게 알아보는 이유인 즉 저 또한 공부중 이라...늘 2%...(더일수도 있고요..ㅋㅋ)부족합니다...ㅋㅋ

UpdatePanel : 포스트백에 의해 전 페이지를 새로고침 하는 것 대신 페이지 중 선택된 일부분만 새로 고침을 할 수 있습니다. 즉 부분 업데이트가 가능하다는 이야기지요. 다들 알고 있는 내용인 듯 하네요!!

속성

설명

ContentTemplate

업데이트가 필요한 Content 들을 정의 합니다.

Triggers

트리거는 패널을 업데이트하기 위해 유발시키는 포스트백컨트롤과 이벤트를 정의 합니다.즉 UpdatePanel 밖에 버튼 컨트롤을 이용해서 패널을 업데이트 하기위해서 사용하지요.

트리거는 <Triggers>요소안에 <asp:AsyncPostBackTrigger>로 정의되며, 트리거의 이벤트는 선택적입니다. (이벤트가 명시되지 않았을때는 컨트롤의 기본 이벤트가됨)

위 표에서의 내용을 잠깐 테스트 해보세요~^^ 제가 위에 올린 소스를 다들 입력 하셨으리라 생각이 됩니다~^^(이미지 경로는 알맞게 세팅해 주세요~^^;;) 그럼 이제 한번 실행을 시켜 보세요~ 어떻게 나오나요? 저하고 똑같이 하셨다면 회색 배경에 이미지가 보일 것이고 아래 버튼이 하나 있겠군요~그리고 클릭하고 깜빡이 없이 사진이 변화 될 테고요...맞죠~^^;; 현재 위 버튼은 UpdatePanel 밖에서 만들어져 있고 Trigger를 통해서 버튼의 이벤트가 정의되고 있네요. 그럼 위 버튼 바로 밑에 임의로 버튼을 하나 만들어 보세요~아래 코드 추가...

<asp:Button ID="testbtn" runat="server" Text="테스트" />

위 버튼은 이벤트를 정의 하지 않았습니다. 그럼 기본적으로 Click 이벤트가 발생하겠지요. 그리고 이 버튼은 트리거에도 정의되어 있지 않습니다. 자 그럼 이 상태에서 한번 실행을 시켜서 처음에 만들었던 버튼을 클릭해보고 테스트버튼을 한번 클릭해 보면... 차이가 나겠지요^^ 둘 다 UpdatePanel 밖에 존재하지만 트리거에 정의 되지 않은 버튼을 클릭하면 전체가 페이지가 로드 되는 것을 볼 수 있습니다.

자 이제 대충 감을 잡았을 것 같군요~!

그럼 테스트 버튼은 지우던지 마시던지 마음대로 하시고요~이제는 UpdatePanelAnimationExtender 컨트롤과 Checkbox 컨트롤을 만들어 보도록 하겠습니다. 버튼 컨트롤 위에 Checkbox를 만들 것 이므로 아래 코드를 버튼 컨트롤 위에 작성해 주세요~^^;;제 말이 꼭 법은 아니니깐 마음대로 하셔도 되요...(약해지는 모습...ㅎ)

Checkbox Code (aspx페이지)

자 위의 코드처럼 HTML 코드로 체크박스를 만들었습니다. 이제 UpdatePanelAnimationExtender 컨트롤 생성하도록 하겠습니다.

UpdatePanelAnimationExtender Code

<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"

BehaviorID="anima" TargetControlID="UpPanel01">

<%-- 업데이트 중 일 때 이벤트정의 --%>

<%-- Panel 높이 지정--%>

<%-- 모든 Control 비활성화 --%>

</Parallel>

<%-- 체크가 되어 있는것들의 행위 수행 --%>

</Condition>

</Condition>

</Condition>

</Parallel>

</Sequence>

</OnUpdating>

<%-- 업데이트 후 일 때 이벤트정의 --%>

<%-- 체크가 되어 있는것들 행위 수행 --%>

</Condition>

<%-- 기억된 높이 지정 --%>

</Condition>

</Condition>

</Parallel>

<%-- 모든 Control 활성화 --%>

</Parallel>

</Sequence>

</OnUpdated>

</Animations>

</cc1:UpdatePanelAnimationExtender>

후~ 코드가 길지요~^^;; 그래서 조금 복잡해 보일 것 같군요~! 근데 코드를 잘 보시면 크게 두 개의 애니메이션으로 나눌 수 있는데요. 처음은 업데이트 중 일 때 와 업데이트 후...이렇게 나눌 수 있겠네요 그리고 위 코드는 스크립트와 Style를 이용해서 효과를 지정한 것 입니다. Parallel 객체의 duration속성을 지정하므로 써 해당 시간이 됐을 때 일어날 효과를 지정하는 것이지요~! 자~그럼 이제 버튼이벤트의 비하인트 코드를 보도록 하겠습니다.

cs페이지 Code

private int num = 1;

protected void Page_Load(object sender, EventArgs e)

{

// 세션값 지정

if (Session["Number"] != null)

{

num = int.Parse(Session["Number"].ToString());

}

else

{

Session["Number"] = num;

}

protected void ChangeImageClick(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(300);

num++;

if (num == 9)

{

num = 1;

}

imgContent.ImageUrl = string.Format("~/UpdatePanelAnima/images/img0{0}.jpg", num);

Session["Number"] = num;

}

위 코드를 잠깐 설명하자면 상태 유지를 위해 세션객체를 만들어 봤습니다. 코드에서도 살짝 눈치 채셨겠지만 저는 따로 DB를 만든 것이 아닙니다. 예제로 만든 것이므로 데이터 베이스하고 연동을 않했구요 그냥 Images폴더를 만들어서 이미지 경로만 바꿔준 것입니다. 그리고 이미지파일들의 이름은 img01,img02...등등으로 되어 있고요 뒤 숫자만 바꿔가면서 이미지를 바꾸는 것이지요^^ 아주 허접 한 예제인가요..ㅋ죄송 합니다. 그냥 볼 때는 그럴 사 했는데...이렇게 까보고 나니깐..허접 하지요..ㅋㅋ^^;; 아무튼 코드 짜는 것은 개발자들 마다 다르기 때문에 더 좋은 방법이 있다면 그 방법으로 짜셔도 무관 합니다~^^그리고 저도 좀 알려주세요~ 늘 입버릇처럼 말하지만 저 또한 초보 개발자이고 공부 중에 있으니 공유해주세요~^^ㅎㅎ 세션객체는 왜 쓴 것일까...이미지를 바꿀 변수의 상태유지를 위해 만든 것 입니다. 버튼을 클릭하면 먼저 포스트백이 일어나고 난 뒤에 버튼 이벤트가 일어나기 때문에 위에서 지정한 변수는 항상 초기값을 갖게 됩니다. 그래서 저 같은 경우는 그냥 세션객체를 만든 것이지요.

자 그럼 여기까지 만들었다면 이제 실행을 해서 확인해 보세요~ 위 그림들과 같이 잘 되나요~ 혹시 더욱 자세하 내용을 보고 싶으시다면 아래 링크를 참고 하세요~

- UpdatePanelAnimation 관련

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/UpdatePanelAnimation/UpdatePanelAnimation.aspx

참 제가 쓴 글을 한번 읽어 볼 때면 웃음는 모습이 많은 것 같네요~ 글도 사람 성격에 따라 써지나 봅니다. 혹시 이런 웃는 모습이 불편하다면 말해주세요~그리고 제 내용이 부족한 부분은 지적부탁드립 니다~!!(오타도 좋습니다) 그리고 늘 제 블로그에 오시는 분들에게 조금이나만 도움이 됐으면 좋겠습니다~^^ 그럼 오늘도 즐공 하시길....^^

아래는 제가 만든소스 코드 입니다. 참고 하세요~^^

UpdatePanelAnimaProject.zip

Posted by happydong drum-83

TAG ajax, AJAXControls, animation, UpdatePanelAnimation, UpdatePanl

트랙백 0, | 댓글 0

[AJAX Control] TabContainer Control 써보기~!

프로그래밍/ASP.NET AJAX / 2008/09/18 18:47

ㅁ TabContainer

Tab를 이용한 기능을 하는 것들은 많이 보았을 것입니다. 즉, 한 화면에서 여러 개의 컨텐츠을 그룹단위로 지어 표현할 때에는 Tab만큼 표현하기 좋은 것은 없기 때문일 것입니다~! 이번에는 AJAX Control 중에서 TabContainer 컨트롤을 이용해서 간단한 예제를 만들어 보도록 하겠습니다. 자~ 그럼 만들어 볼 예제는 아래 그림과 같습니다. 짜짠....^^;;

1. 그림 (Daum 메인 화면 중에서..)

위 그림과 같이 스포츠 부분과 연애 부분의 기사내용을 TabContainer 컨트롤을 이용해서 간단하게 만들어 보도록 하겠습니다. 그럼 먼저 Visual Studio 2008(VS2008)로 웹 프로젝트 하나를 만들어 주세요~^^ 아~! 그리고 이 컨트롤은 AJAX ControlToolkit 1.0 에서 지원이 되는 컨트롤 입니다. 혹시 VS2008이 아직 않 깔려 있으시다면 VS2005로 테스트해 보셔도 상관은 없습니다. VS2005로 AJAX Control를 테스트 하시 려면 기본적으로 설치해야 하는 것들이 있다는 거 알고 계시죠~^^;; 혹시 모르시는 분들은 제가쓴 "ASP.NET AJAX 프로젝트 만들기 준비사항"를 읽어 보시고 필요한 파일을 다운로드 해서 설치하세요~^^

이제 준비 되셨으리라 생각이 됩니다. 아래 그림은 VS2008 도구상자에서 본 TabContainer 컨트롤과 VS2005에서 본 TabContainer 컨틀로 입니다.

2.그림

VS2005에서는 Tab관련해서 컨트롤이 두 개로 나눠어저 보이는 것을 볼 수 있습니다. 물론 VS2008에는 사라진 것이 아니지요..그냥 하나로 통합(?!)되었다고 표현해야 하나...VS2005에서와 쓰는 방법과 달라진 것 없는 것 같아요~ 그저 도구상자에서 컨트롤이 하나로 보인다는 거...정도...^^;;

암튼 잡소리는 그만 하고 코드로 만들어 보도록 하겠습니다. aspx페이지를 열어 두시고 AJAX Control를 사용하기 위해 ScriptManager를 생성해 줍니다. 그리고 나서 TabContainer 컨트롤을 도구상자에서 던저 넣어 주세요~ 물론 던저 넣으셔도 되고 직접 손으로 작성하셔도 됩니다.^^ 이런 것도 귀찮아 하시는 분들을 배려해서 제가 코드를 넣어(!?)줄 수는 없고 그냥 써 드리겠으니 복사해서 쓰세요~^^(넘 썰렁 개그인가요..ㅋ)

TabContainer Code (aspx페이지)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="AjaxControl" %>

… 중간 생략 …

<asp:ScriptManager ID="ScriptManager01" runat="server">

</asp:ScriptManager>

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170" ActiveTabIndex="0">

</AjaxControl:TabContainer>

위 코드에서 Register는 aspx 페이지 제일 위에 넣어 주는 센스...잊지 마세요~

이렇게 코드가 생겼습니다. 그럼 TabContainer 컨트롤 안에 TabPanel이 있어야겠지요~ VS2005에서는 도구상자에 있으니깐 던저 넣으셔도 되고요 손으로 직접 쓰셔도 됩니다. VS2008 또한 손으로 직접 쓰셔도 됩니다. 그냥 TabContainer 컨트롤 안에서 "<" 찍으셔도 TabPanel이라고 나타날 거예요~! Visual Studio의 엄청 편리한 인텔리센스 기능...^^ TabPanel를 통해서 Tab의 갯수가 정해 집니다. 그러니 필요한 만큼만 만드시면 되겠네요~

그럼 간략하게 TabContainer 컨트롤과 TabPanel 컨트롤의 속성을 아래 표로 보시지요~!

※ TabContainer 컨트롤 속성

속성	설명
OnActiveTabChanged	포스트백후 탭이 변경되었을 경우 서버측에서 발생하는 이벤트
ActiveTabIndex	첫번째로 보여질 탭의 지정
BackColor	배경색을 지정
BorderColor	테두리 색을 지정
BorderStyle	테두리 스타일을 지정
BorderWidth	테두리 너비을 지정
CssClass	컨트롤에 적용될 CSS클래스명 지정
Enabled	컨트롤 활성화된 상태지정
ScrollBars	TabContainer 본문에 스크롤바를 표시할 것인지를 설정
Width	탭의 넓이를 지정
Height	탭의 높이를 지정

※ TabPanel 컨트롤 속성

속성	설명
HeaderText	탭 부분에 보여질 문자지정
HeaderTemplate	탭(Header) 부분의 보여질 템플릿
ContentTemplate	본문 내용을 템플릿
OnClientClick	클라이언트 클릭 이벤트의 스크립트함수 이름을 지정

(TabContainer 컨트롤과 TabPanel 컨트롤의 속성이 비슷한것도 있습니다. 나중에 쓰면서 한번 확인해 보세요^^; )

저는 두 개의 TabPanel를 만들었습니다. 하나는 스포츠 기사 내용이 들어 갈 것 이고요 , 하나는

연애기사가 들어 갈 것입니다. 소스는 아래와 같습니다.

TabContainer , TabPanel Code (aspx페이지)

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170" ActiveTabIndex="0">

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

</ContentTemplate>

</AjaxControl:TabPanel>

<%-- 스포츠 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel02" runat="server" OnClientClick="TabPanulClick">

</ContentTemplate>

</AjaxControl:TabPanel>

</AjaxControl:TabContainer>

이렇게 해서 두 개의 탭이 만들어 졌습니다. 두 개의 텝이 조금 다르게 보이시나요~! 코드상으로 연애 뉴스 탭쪽은 HeaderText 속성 사용해서 탭 부분에 문자를 넣어 봤고요, 두 번째 스포츠 뉴스 쪽에는 HeaderTemplate 속성을 이용해서 문자를 넣어 봤습니다. 그리고 OnClientClick속성을 이용해서 스크립트 함수를 호출하도록 해 봤습니다 . 스크립트 함수는 아주 간단합니다. 그냥 메세지 출력입니다

아래는 스크립트 함수소스 코드 입니다.

Script Code (aspx페이지)

function TabPanulClick()

{

alert("이벤트 발생");

}

</script>

이렇게 하면 스포츠 메뉴 탭을 클릭하면 메세지 박스에 나타나겠지요~^^;;아주 허접한 이벤트 입니다. 이제 ContentTemplate안에 내용을 채워 주면 되겠네요~^^ 원하시는 대로 한번 꾸며 보세요~^^ 저는 위에서 보여 주었던 그림 그대로 한번 만들어 보도록 하겠습니다. 이미지들을 다운로드 받아 두었고요...코드로 짜면 되겠지요~ㅋ 코드는 아래와 같습니다.

TabPanel Code (aspx페이지)

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

ㅁ '뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요<br />

ㅁ '인순이는 예쁘다' 사랑받는 이유 I '대조영' 걸사비우 생존 당연한가<br />

ㅁ '케로로' 쓴 모자 2차대전 일본군모 I 신동엽·유재석·강호동 올해 성적표<br />

<br /> 앙상한 고아라<br />마른줄 알았지만..

</div>

<div id="subContent02" style="width: 110px; height: 50px; position: absolute; top: 111px;

left: 135px;">

 한지혜 이기적인<br />다리란 이런것!

</div>

- [텔존] 연예계 결혼한 올드미스들은?<br />

- 단발머리 자른 성유리, 그래도 예쁘네<br />

- 김민정, 일본배우 아오이 유우와 직찍<br />

- 금발로 돌아온 브리트니, 뱃살은 어쩔<br />

- 이효리 스타일 결정체, LA 사진 모음<br />

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

<%-- 스포츠 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel02" runat="server" OnClientClick="TabPanulClick">

ㅁ 4년계약 이승엽, 왜 연봉 깎였을까? I 홍성흔 트레이드, 매력없는 이유<br />

ㅁ 편파판정 핸드볼 '다시 치른다' I 맨유가 박지성을 기다리는 이유<br />

ㅁ 오릭스, 리오스 영입 포기 선언 I 조정웅-안연홍 커플, 내년 6월 결혼<br />

 김연아 일본서,<br />샤라포바와 동급

</div>

<div id="subContent05" style="width: 110px; height: 50px; position: absolute; top: 111px;

left: 135px;">

 소렌스탐, 올17개<br />대회만에 첫 승

</div>

- 'KIA맨' 서재응의 새로운 도전<br />

- 국가대표 선수들 "숙소달라"시위

<br />

- 홍성흔 트레이드가 매력없는 이유<br />

- 더 선 선정 최고의 프리키커 top10<br />

- 김연아, 전설의 길로 날개 편다<br />

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

위 코드는 따로 설명이 필요 없는 아주 단순하게 짜본 것입니다. 눈으로 잠깐 보셔도 아 실수 있는 내용이라 생각이 되는 군요~^^ 혹시 따로 만들기 귀찮은 분은 제가 만든 허접한 코드를 복사해서 붙어 넣으세요..단 이미지파일경로를 변경해 주는 센스 잊지 마세요~ㅋ 자 그럼 어디 잘 실행이 되는지 확인해 보도록 하겠습니다.

3.그림(처음실행)

4.그림(스포츠탭 클릭 이벤트 발생)

5.그림(스포츠 내용)

좀 비슷하게 만든것 같지요~^^;;; 아닐수도 있지만...제 눈에는 비슷하네요...ㅋㅋ(자기만족...ㅋㅋ) 이렇게 해서 간단하게 TabContainer 컨트롤에 대해서 알아 봤습니다. 혹시 참고 될 만 한 사이트를 원하신다면 아래 주소를 참고 하세요~^^;;

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx

아래는 제가 만든 소스 코드 입니다. 참고 하세요~^^

TabControlProject.zip

Posted by happydong drum-83

TAG ajax, AJAXControls

트랙백 0, | 댓글 4

[AJAX Control] ResizableControlExtention 써보기~!

프로그래밍/ASP.NET AJAX / 2008/09/03 01:05

ㅁ ResizableControlExtention

AJAX 컨트롤 중에서 이번에는 Resizable Control에 대해 알아 보도록 하겠습니다. 먼저 어떻게 실행이 되는지 그림을 통해 보도록 하겠습니다.

1. 그림

위 그림은 Naver 뉴스기사를 복사헤서 만들어 본 것 입니다. 김연아양이 멋지게 금메달을 따고 웃으면서 인터뷰하는 모습입니다. 그리고 이미지 테두리에 색이 들어 가있는 것은 그림에서는 않보이지만 마우스를 이미지위에 올려 놨을때 테두리에 색이 나타나도록 한 것입니다.
다음그림은 마우스를 저기 손 이미지를 클릭한 다음에 드레스했을때 이미지가 커지는 모습 입니다.

2.그림

이미지가 커지면서 옆에 있는 글자들의 레이아웃이 움직이는 것을 볼 수 있습니다. 자 그럼 어떻게 코드가 짜여져 있는 지 확인하기 전에 아래표를 한번 참고 하세요~나름 정리해 봤는데...^^;;;

※ Resizable Control 속성

속성	설명
TargetControlID	크기 조정이 이루어질 Panel ID 지정.
ResizableCssClass	크기를 조정하려 할때 적용될 Style 지정
HandleCssClass	크기를 조정할 핸들에 적용이 됨
MinimumWidth / MinimumHeight	최소 크기를 지정
MaximumWidth / MaximumHeight	최대 크기를 지정
HandleOffsetX / HandleOffsetY	크기를 조정할 핸들러의 위치 지정
OnClientResizeBegin	Resize 실행시 일어나는 클라이언트 이벤트
OnClientResizing	Resize중에 일어나는 클라이언트 이벤트
OnClientResize	Resize 완료시에 일어나는 클라이언트 이벤트

자 그럼 한번 만들어 보도록 하겠습니다.
먼저 Visual Studio 2008을 실행후 Web 프로젝트를 하나 생성을 합니다. 그런 다음에 솔루션 탐색기에서 마우스오른쪽 버튼 클릭을 해서 참조추가를 선택, 그리고 찾아보기를 선택을 해서 AjaxControlToolkit-Framework3.5 를 다운로드 받은 위치를 찾으세요~^^; 그런다음에 AjaxControlToolkit-Framework3.5 폴더 >> SampleWebSite 폴더 >>Bin 폴더 >> AjaxControlToolkit.dll를 찾아서 선택을 합니다~
(자세한 내용은 "ASP.NET AJAX 프로젝트 만들기 준비사항"를 참고 하세요^^)

자 그럼 aspx 페이지에 Panel 컨트롤 하나와 image 컨트롤 하나를 만들어 보도록 하겠습니다. 그리고 CssClass 명까지 한번 만들어 주세요~^^ 아하~그리고 Ajax Control를 사용하기 위해서는 ScriptManager를 생성해야 하는거 알고 있으시죠~저는 아래와 같이 코드를 만들어 봤습니다.

.aspx페이지

<body>

<asp:ScriptManager ID="ScriptManater01" runat="server">

</asp:ScriptManager>

<div>

<asp:Panel ID="imagePanel" runat="server" CssClass="imagePanelCSS">

<asp:Image ID="image01" runat="server" ImageUrl="~/ResizableControl/images/img01.jpg" AlternateText="김연아" style="width:100%; height:100%" />

</asp:Panel>

</div>

</form>

</body>

이미지 파일의 경로는 저와 다를수 있겠군요~^^;;알 맞게 지정해 주세요~그리고 저는 PanelStyle를 아래와 같이 지정 했습니다.

Panel Style

.imagePanelCSS

{

width:230px;

height:100px;

float:left;

padding:3px;

}

네~! 아주 심플합니다~^^;;자 이미지도 넣고...이게 기사거리가 필요하겠네요~모 기사거리는 Naver나 다음...여러군데서 글거 복사 해올수 있기때문에 알아서 원하시는 기사거리를 복사하세요~^^;;혹시 귀찮아 하시는 분들을 위해서 제가 복사한 글을 올리 도록 하겠습니다. 저도 나름 센스가 있답니다~^^;;

기사 내용

[OSEN=제원진 기자] 스케이팅 연기뿐만 아니라 영어도 잘하는 '피겨 요정' 김연아.<br /><br />

여자싱글 금메달을 목에 건 김연아가 17일(한국시간) 새벽 이탈리아 토리노의 팰리스 레알에서 열린 그랑프리 파이널 폐회 만찬에서 선수를 대표해 축사를 낭독했다.<br />

김연아는 이 자리에서 유창한 영어 실력을 뽐내며 축사를 해 참석자들로부터 뜨거운 박수를 받았으며 특히 ISU 관계자들이 "김연아의 영어 실력이 많이 늘었다"고 칭찬했다.<br />

김연아는 축사에서 "대회조직위를 비롯해 ISU, 심판진, 각국선수들 덕분에 행복한 1주일을 토리노에서 보낼 수 있었다"며 "모두가 내년 3월 스웨덴에서 있을 세계선수권에서 다시 보기를 고대한다"라고 말했다.<br /><br />

▲ 갈라쇼 '저스트 어 걸' 멋진 연기에 큰 호응<br /><br />

김연아는 이날 토리노 팔라벨라 올림픽빙상장에서 열린 시범 갈라쇼에서 '저스트 어 걸'에 맞춰 자신의 쇼프로그램을 깔끔하게 소화해 빙상장을 가득 채운 관중들로부터 큰 박수 갈채를 받았다.<br />

분홍색 배꼽티에 분홍색 바지 차림으로 17세 소녀다운 깜찍한 드레스를 입고 가장 마지막 순서로 나온 김연아는 3차례 점프를 군더더기 없이 깔끔하게 소화해 금메달리스트다운 면모를 과시. 이어 앵콜로<br />

'박쥐'서곡에 맞춰 쇼트프로그램 연기를 선보이면서 이너바우어에 이은 더블악셀 점프로 깔끔하게 마무리해 그랑프리 파이널 대단원의 막을 장식했다.<br />

글거 복사 하셨다면 이제는 ResizableControlExtender 컨트롤을 넣어 보도록 하지요~
편하시게 VS2008 도구상자에서 더블클릭하시면 됩니다. 아니면 그냥 손으로 쓰셔도 상관없고요다양하게 입맛에 맞게 넣어 주세요~
코드는 아래와 같습니다.

ResizableControlExtender (aspx페이지)

<cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"

TargetControlID="imagePanel"

ResizableCssClass="resizingImage"

HandleCssClass="handImage"

MinimumWidth="35" MinimumHeight="20"

MaximumWidth="350" MaximumHeight="270"

HandleOffsetX="3" HandleOffsetY="3">

</cc1:ResizableControlExtender>

여기 나와 있는 속성을에 대해서는 위에 표를 참고 하세요~그리고 ResizableCssClass와 HandleCssClass는 어떻게 정의 되어 있는지 아래 코드로 확인 하시겠습니다.

ResizableCssClass , HandleCssClass Style

.resizingImage

{

padding:0px;

border-style:solid;

border-width:3px;

border-color:#959695;

}

.handImage

{

width:15px;

height:16px;

background-image:url(images/HandleHand.png);

overflow:hidden;

cursor:se-resize;

}

resizingImage는 거의 border에 관련해서 Style를 주었습니다. 그리고 handImage는 핸들러의 역
활을 할 Style를 정의 했습니다. 이렇게 코드를 입력한후에 실행을 해보시면 그림과 같이 이미지의 크리가 조정이 되는 모습을 보실수 있을 것입니다.

이번에는 LinkButton를 이용해서 사이즈를 확대, 축소해 보도록 하겠습니다. 그리고OnClientResize 이벤트를 이용해서 이미지 로드된 시간을 출력하도록 하겠습니다.
그럼 먼저 LinkButton를 만들어 줍니다. 위에서 말했듯이 도구상자에서 던지셔도 되고 손으로 작
성하길 좋아하시는 분들은 손으로 작성해 주세요~ㅋㅋ 혹시 이것도 저것도 귀찮아 하시는 분들
을 위해 제가 친절하게 코드를 적어 드리도록 하겠습니다...ㅋㅋ Ctrl + C , V를 하세요^^;;;;

LinkButton (aspx페이지)

<asp:LinkButton ID="btnLink01" runat="server" Text="Submit" /><br />

<asp:LinkButton ID="btnLink02" runat="server" Text="축소" OnClick="btnLink02_Click" /><br />

<asp:LinkButton ID="btnLink03" runat="server" Text="확대" OnClientClick="return OnClientbtnClick();" /><br />

</div>

간단하게 Div를 만들어서 LinkButton들의 레이아웃을 잡았습니다. 그리고 LinkButton 아래 P태그를 만들었습니다. P태그안에는 마지막 이미지가 로드된 시간을 출력할 것 입니다. 링크 버튼의 첫번째는 따로 이벤트가 정의되어 있지 않습니다. 그냥 Submit 하기위한 버튼입니다. 그리고 두번째는 비하인드코드 즉 서버컨트롤 이벤트를 발생하도록 하였습니다. 아래 코드는 두번째 링크버튼 OnClick 이벤트의 비하인드 코드에 작성된 소스입니다.

LinkButton OnClick Event Code (cs페이지)

protected void btnLink02_Click(object sender, EventArgs e)

{

// System.Drawing.Size객체 생성

System.Drawing.Size _size = ResizableControlExtender1.Size;

// ResizableControl size값 설정

ResizableControlExtender1.Size = new System.Drawing.Size(_size.Width / 2, _size.Height / 2);

}

현재 이미지 사이즈에서 나누기 2를 한 다음에 ResizableControlExtender1의 Size를 설정합니다.두번째 링크버튼의 이벤트를 정의 했습니다. 그럼 이제 세번째 링크버튼의 이벤트를 정의 하
도록 하겠습니다. 세번째 링크 버튼은 OnClientClick 이벤트를 이용해서 Postback 없이 스크립
트 이벤트로만 이미지가 커지도록 소스를 작성 합니다. 코드 소스는 아래와 같습니다.

Script 이용(aspx페이지)

<asp:LinkButton ID="btnLink03" runat="server" Text="확대" OnClientClick="return OnClientbtnClick();" />

<cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server"

TargetControlID="imagePanel"

BehaviorID="ResizableControlBehavior1"

ResizableCssClass="resizingImage"

HandleCssClass="handImage"

MinimumWidth="35" MinimumHeight="20"

MaximumWidth="350" MaximumHeight="270"

HandleOffsetX="3" HandleOffsetY="3"

OnClientResize="OnClientResizeEvent">

</cc1:ResizableControlExtender>

function OnClientbtnClick()

{

var behavierid = $find("ResizableControlBehavior1");

var size = behavierid.get_Size();

behavierid.set_Size({ width:size.width*2 , height:size.height*2});

return false;

}

</script>

링크 버튼의 OnClientClick 이벤트에 앞에 return를 선언해 두고 스크립트에서 return 값을 False로 설정하면PostBack없이 스크립트 이벤트만 일어나게 됩니다. 그리고 ResizableControl 속성 중에서 BehaviorID를 설정합니다. BehaviorID는 클라이언트 컨트롤 아이디 입니다. 이 아이디를 통해서 스크립트단에서 컨트롤을 제어 할 수 있습니다. 그래서 스크립트 코드를 보시면 BehaviorID를 변수로 받는 코드를 보실수 있을 것입니다. 그로 인해서 현재 사이즈를 get_Size로 받아서 곱하기 2를 한 후 set_Size를 통해서 size를 지정하고 있습니다. 그럼 여기까지 링크버튼의 이벤트 처리가 끝이 났습니다. 그럼 마지막으로 image가 로드된 시간을 출력해 보도록 하겠습니다.
위 코드에서 보시듯 OnClientResize의 이벤트를 생성합니다. 스크립트 코드는 아래와 같습니다.

Script Code(aspx페이지)

function OnClientResizeEvent()

{

$get("datetime").innerHTML = "마지막 필드 시간 :"+(new Date()).toString();

}

스크립트 코드는 간단합니다. 위에서 선언한 P태그(datetime)부분에 innerHTML 개체를 통해서 해당 글자(시간)를 동적으로 생성하도록 한 코드입니다. 이제 코드들도 다 작성해 봤으니 실행을 해보도록 하겠습니다. 이상없이 코드를 짜셨다면 아래 그림과 같이 잘 실행이 되실 것입니다.

3.그림(Submit 클릭)

4.그림(축소클릭)

5.그림(확대클릭)

자~ 여기까지 ResizableControl사용에 대해 알아 보도록 했습니다. ResizableControl의 더욱 하세한 내용을 보고 싶으시면 아래 주소를 참고 하세요~^^ 위 소스도 아래 사이트를 참고로 만든 소스 입니다.

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ResizableControl/ResizableControl.aspx

그럼 여기가지 읽어 주셔서 감사 합니다~!!

아래는 제가 만든소스 코드입니다. 참고 하세요~^^

ResizableControlProject.zip

Posted by happydong drum-83

TAG ajax, AJAXControls

트랙백 0, | 댓글 4

[Tip] ASP.NET AJAX UpdatePanel 안에서 파일업로드 시켜보기...

프로그래밍/ASP.NET AJAX / 2008/08/14 15:01

ㅁ UpdatePanel 안에서 파일 업로드 시켜보기...

UpdatePanel 안에서는 FileUpload Control이 사용이 안됩니다. 그런데도 불고하고 꼭 하고 싶어서.. 예전에 iframe를 이용해서 처리했습니다.
즉, FileUpload Control이 있는 페이지를 하나 따로 만드는 것입니다. 그래서 iframe를 통해서
접근해서 파일을 업로드하는 것이지요~^^

아래는 살짝쿵 만들어 본 소스코드 입니다.

먼저 프로젝트 어떤 페이지들이 있는지 그림들 통해 보도록 하겠습니다.

1. 그림

Default.aspx : UpdatePanel로 감싸져 있는 페이지입니다.

FileUp.aspx : FileUpload Control이 있는 페이지입니다.

User_FileUpload.ascx : UserControl 이며, TextBox 와 Button 으로 이루어져 있습니다.

여기에 UserControl이 왜 있을까 하시는 분들을 위해 잠깐 설명하겠습니다. 구지 UserControl를
않만드셔도 상관 없습니다. 이 예제는 전에 어떤분이 UserControl안에 FileUpload 컨트롤을 넣어서 처리할수 있는 방법이 없느냐는 질문에 한번 만들어 본 것입니다. 그래서 구지 UserControl를
사용하지 않으셔도 상관없음을 알려드립니다~^^;;;
오호~그럼 이제 코드가 어떤식으로 짜여져 있는지 보도록 하겠습니다.
일단 Default 페이지부터 보도록 하지요~

////////////////////////////////////////////////////////////////////////////////////////////////

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="User_FileUpload.ascx" TagName="User_FileUpload" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

function btn01_Click()

{

var FileUP = document.getElementById("iframe01").contentWindow.document.getElementById("FilleUpload01");

FileUP.click();

var FName = FileUP.value;

document.getElementById("txtFileName").value = FName;

}

</script>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UPDatePanel01" runat="server">

<br />

<uc1:User_FileUpload ID="User_FileUpload1" runat="server" />

<br />

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////

비하인드 코드는 각각 하고자 하시는 대로 마음대로 짜시면 될 것 같습니다. 저는 그냥 참고식으
로 만든 예제라 비하인드 코드는 넣지 않았습니다...^^;;
위 코드를 보시면 아주 단순합니다. 그냥 현재 페이지가 Body 부분임을 알리는 글자와
UserControl , 그리고 IFrame 만 있습니다. 물론 IFrame은 Style를 이용해서 안보이게 해주어야
겠지요~^^ 또 제일 위에 Script 코드가 있네요~ 위 Script 코드는 UserControl 에 클릭이벤트를
정의한 겁니다. Script도 간단합니다. 그냥 iframe을 통해서 FileUpload Control에 접급한 것입니
다. 그리고 나서 클릭이벤트를 주고는 그 컨트롤의 value값 즉 사용자가 선택한 파일경로를 가
지오 와서 UserControl에 만들었던 TextBox에 넣어 주는 것입니다.

아래는 UserControl 코드 입니다.

//////////////////////////////////////////////////////////////////////////////////////////

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="User_FileUpload.ascx.cs" Inherits="User_FileUpload" %>

//////////////////////////////////////////////////////////////////////////////////////////

아주 심플 합니다.ㅋ

그럼 이제 FileUpload 컨트롤이 들어 있는 페이지의 소스를 보도록 하겠습니다.

//////////////////////////////////////////////////////////////////////////////////////////

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUp.aspx.cs" Inherits="FileUp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:FileUpload ID="FilleUpload01" runat="server" />

</div>

</form>

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////

여기도 별거 없네요...말그대로 FileUpload 컨트롤만 있습니다.
너무 샘플해서 설명하기가 부끄럽네요~ㅋ
아래 그림은 실행화면 입니다.

2.그림 (전체 모습)

3.그림(파일찾기 버튼클릭 모습)

4. 그림 (파일을 선택하고 TextBox에 경로가 들어가 모습)

이제 제가 설명한 부분이 대충 감이 오셨으리라 생각이 됩니다. 그럼 비하인드 코드에서 코드를
어떻게 짜야할지도 감이 오시겠군요~^^
이런 방법이 도움이 될지 모르겠습니다~
혹시나 해서 제가 만들 예제 파일도 올리도록 하겠습니다. ^^

AJAX_Upload.zip

Posted by happydong drum-83

TAG ajax, FileUpload, UpdatePanl

트랙백 0, | 댓글 0

ASP.NET AJAX 프로젝트 만들기 준비 사항~!

프로그래밍/ASP.NET AJAX / 2008/01/06 00:00

ㅁ ASP.NET AJAX 프로젝트 만들기 준비 사항~!

여기서 다루어질 이야기는 제목과 같습니다. 즉 ASP.NET AJAX 컨트롤에 관심은 있는데 어떻게
어디서 부터 시작을 해야 할지 모르는 분들을 위해 간단하게 이야기 하도록 하겠습니다. 역시 개
발의 시작은 프로젝트를 생성에서 부터 겠지요~!^^

★ VS2005 준비 사항 ★

ㅁ ASP.NET Extensions1.0 를 설치를 해야 합니다.

- 다운로드 주소

ㅁ ASP.NET Ajax controlToolkit 참조해야 합니다.

- 다운로드 주소

ASP.NET Extensions1.0는 .NET Framework 2.0 이상에서 지원이 된다고 합니다. 고로 Visual Studio2005 이상 버전에서 사용할 수 있겠지요~^^
AJAX Extensions1.0 설치한다면 Microsoft AJAX Library를 별도로 설치할 필요가 습니다.

이미 그 모듈도 포함하고 있기 때문이지요. Microsoft AJAX Library를 별도로 설치해야 하는 경우는

머신이 윈도우OS가 아니거나, .NET Framework가 지원되지 않아서 ASP.NET Extensions1.0을 설치

할 수 없는 경우에한 합니다. Microsoft AJAX Library는 비 Windows 환경을 위한 별도로 제공되는 스

크 립트라이브러리이기 때문입니다.

ASP.NET Extensions1.0를 다운로드 받아서 설치후 VisualStudio 2005를 실행하면 아래 화면과 같이

ASP.NET AJAX-Enabled Web Site 템플릿 프로젝트가 보일 것 입니다.

(VisualStudio 2005 실행 >> 파일 >> 새로만들기 >> 웹사이트)

1.그림

ASP.NET AJAX-Enabled Web Site를 선택하고 프로젝트명을 설정후 실행하면 이제 부터

ASP.NET AJAX Project 만들준비가 된 것 입니다.

다음은 VS2005의 AJAX Control Toolkit를 참조 하는 모습을 보도록 하겠습니다.

위 처럼 프로젝트를 실행했다면 솔루션탐색기에서 프로젝트를 선택하고 마우스 오른쪽 버튼을 클릭하

면 아래와 같은 그림의 메뉴들이 나타납니다. 그 중에 참조 추가를 선택 합니다.

2. 그림

이제 AJAX Control Toolkit를 다운로드 받은 경로에서 AjaxControlToolkit.dll파일을 프로젝트에 추가

합니다.

3. 그림

자~~ 이제 참조 추가까지 끝났습니다.. 음..이제 AJAXControl들 추가하도록 하겠습니다.

4.그림

탭 추가를 하면 탭 이름을 지정 할 수 있습니다. 원하는 이름을 설정을 합니다. 저는 "AJAX Controls"

라고 했습니다.

5. 그림

위 그림과 같이 dll 파일을 텝에 드래그 하면 아래과 같이 AJAX Control들이 나타나게 됩니다.

6. 그림

자 이렇게 해서 VS2005에서의 ASP.NET AJAX 프로젝트를 완전하게 만들 준비가 된 것 같군요~^^

이제는 VS2008로 ASP.NET AJAX 프로젝트를 어떻게 실행하는지 알아 보도록 하겠습니다.

★ VS2008 준비 사항 ★

VS2008은 VS2005의 상위 버전이므로 ASP.NET Extensions 따로 설치할 필요가 없습니다.

그냥 우리가 Web프로젝트를 실행시키면 기본적인 AJAX 컨트롤이 들어가 있는 것을 보실수

있을 것입니다.

7.그림

AJAX 컨틀롤을 추가하는 것은 위에서 본 내용과 동일한 방법을 통해서 추가 하면된다. 역시나

참조 추가 부분도 마찬가지이다. AJAXControlToolkit3.5 가 나왔으니깐 다운로드 받아서 추가

하면 될 것이다.( AJAXControl 다운로드) 다운로드 주소는 위에서 링크 걸린 곳과 동일 하다.

이렇게 해서 VS2008로 ASP.NET AJAX 프로젝트를 만들 준비가 된 것이다. 이제 부터 컨트롤을

하나씩 써보면서 여러가지로 만들어 보면 되는 것이다~^^;;

<Tip>

혹시 VS2008로 ASP.NET AJAX Project를 실행하는 도중에 아래와 같은 에러가 나타나면

web.config파일에서 아래 코드를 지워버리세요~!

8.그림

///////////////////////////////////////////////////////////////////////////////////////

<add assembly="System.Data.DataSetExtensions, Version=2.0.0.0, Culture=neutral,

PublicKeyToken=B77A5C561934E089"/>

///////////////////////////////////////////////////////////////////////////////////////

Posted by happydong drum-83

TAG ajax, AJAX프로젝트, ASP.NETAJAX1.0

트랙백 0, | 댓글 0

AJAX 방명록 만들기[9]

프로그래밍/ASP.NET AJAX / 2007/12/05 15:03

guest_board.zip

AJAX 방명록 만들기[9]

이번에는 글을 삭제할 수 있는 삭제버튼을 구현해 보도록 하겠습니다. 제가 만든 Ajax 방명록에는 따로 수정버튼이 있지는 않기때문에 글을 쓰다가 잘 못쓰면 그냥 삭제하고 다시 써야 합니다. 조금 불편하겠네요^^;; 하지만 지금까지 만들었던 내용을 잘 생각해 보시면 수정부분 구현은그리 어렵지 않을 것 이라 생각이 되는 군요~ 그 부분은 숙제로 남기도록 하고요~ㅋ(너무 검방진말투...죄송 ^^;;) 삭제 버튼에 관해서 코드를 하나하나 보도록 하겠습니다. 먼저 아래 그림을 보시면 삭제 버튼이 어디에 붙은 녀석인지 알수 있을 것입니다.

1. 그림

그리고 삭제 버튼을 클릭하게 되면 비밀번호를 입력 할 수 있도록 메세지창 처럼 나타나게 됩니다. 아래 그림과 같이 말이죠.

2. 그림

메세지창이 나타나면 글을 입력했을 때 비밀번호를 입력 하고 삭제를 클릭하면 삭제가 되는 겁니다. 자 이제 본격적으로 코드를 보도록 하겠습니다. 먼저~! aspx 페이지의 구성된 코드를 보도록 하겠습니다.

.aspx페이지

//삭제 취소

function cancel()

{

document.getElementById("<%= delete_table.ClientID%>").style.display = "none";

document.getElementById("<%= User_PassWord.ClientID %>").value = "";

}

//삭제 버튼을 클릭함.

function content_Delete(seq)

{

document.getElementById("<%= b_seq.ClientID %>").value = seq;

document.getElementById("<%= delete_table.ClientID%>").style.display = "block";

}

<asp:HiddenField ID="b_seq" runat="server" />

<%-- ################### 방명록 리스트 시작 ###################### --%>

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList_databound">

… 중간 생략 …

</HeaderTemplate>

… 중간 생략 …

<img alt="" style="cursor: pointer;" src="images/btn/imgDel.gif" id="Imgbtn_Delete"

onclick="content_Delete('<%# Eval("b_seq")%>')" />

</ItemTemplate>

</asp:DataList>

<%-- ############## 방명록 리스트 끝 ############################## --%>

<%-- ############### 삭제 관련 창 시작 작업중.. ################### --%>

<asp:Panel ID="pnl_delete" runat="server" Style="position: absolute; top: 300px; left: 500px;">

<table id="delete_table" style="display: none; background-color: #959695" cellspacing="0"

cellpadding="0" width="400" border="0" runat="server">

<tbody>

<td style="font-size: 11pt; width: 100%; color: white" id="tdHeader" align="center"

colspan="3" runat="server">

경고 > 삭제 관련

</td>

</tr>

</td>

삭제하시려면 비밀번호를 입력해주세요^^< br />

비밀 번호 : <asp:TextBox ID="User_PassWord" runat="server" TextMode="Password"></asp:TextBox>

</td>

</td>

</tr>

</td>

</tr>

</tr>

</td>

<asp:Button ID="btn_OK" runat="server" Text="삭제" OnClick="content_Deldete" />

</td>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

</asp:Panel>

<cc1:dragpanelextender id="DragPanelExtender2" runat="server" draghandleid="pnl_delete"

targetcontrolid="pnl_delete">

</cc1:dragpanelextender>

<%-- ########################## 삭제 관련 창 끝 ########### --%>

위 코드에서 중간 생략 부분은 AJAX 방명록 만들기[8] 부분에 자세하게 코드가 나와 있습니다. 참고 하실분은 참고 하세요~^^ 코드에 보시면 DataList 컨트롤에 ItemTemplate 안에 img태그가 있습니다. img 태그는 onclick Event를 가지고 있는 것을 볼 수 있습니다. 그럼 이벤트가 호출하는 JavaScript 함수에 대해 알아 보도록 하지요~! 음..인자 값으로 바인딩된 해당글의 번호를 받고 있습니다. 그리고 b_seq 라는 id를 가진 HiddenField 에 value 값으로 설정해 주고 있습니다. 그 다음에 메세지창의 table의 style 속성인 display 를 block로 설정해주고 있습니다. (메세지창의 table의 display 기본설정은 none 입니다) 이렇게 간단한 style 속성을 이용해서 기본적으로 페이지에는 존재하고 있지만 눈에 보이지 않고, 특정 이벤트가 일어날때 보이는 아주 간단한 구조 입니다.^^;;;; 이제 메세지창이 나타났겠군요~! 이 메세지창에서 삭제를 취소 하려고 버튼을 누루면 위에 JavaScript함수인 cancel함수가 호출이 됩니다. cancel 함수는 위 내용을 잘 읽으셨다면 이해하시리라 생각이 됩니다.^^;; 삭제를 진행하시려면 Textbox에 비밀번호를 입력하고 확인을 클릭하면 됩니다. 이때 일어나는 일들에 대해 알아 보도록 하겠습니다. 위 코드에서 보시면... btn_OK 라는 id를 가진 Button이 하나 있는 것을 볼 수 있을 것입니다. 한번 버튼 이벤트(content_Deldete)대해 알아 보도록 하겠습니다. 아래 코드는 비하인트 코드 부분입니다.

Guest_Board.aspx.cs페이지

protected void content_Deldete(object sender, EventArgs e)

{

delete_table.Style.Add("display", "none");

bclass.u_pass = this.User_PassWord.Text;

bclass.b_Seq = int.Parse(this.b_seq.Value);

bclass.Procedure(4);

if (bclass.pass_count != 1)

ScriptManager.RegisterStartupScript(this, this.GetType(), "testeste", "alert('비밀번호가 틀렸습니다!!')", true);

else

ScriptManager.RegisterStartupScript(this, this.GetType(), "Text", "alert('정상적으로 삭제되었습니다!!')", true);

ListBind();

}

처음으로 delete_table(메세지창의 table)의 Style 속성을 변경해 주고 있습니다. 비밀보호를 입력하고 나서는 메세지창이 계속 보여질 필요가 없으므로 않보이도록 했습니다. 그리고 bclass에 property를 이용해서 사용자가 입력한 비밀 번호화 해당글의 번호를 넘기고 있습니다. 삭제 하기 위해서는 필요한값들이지요~^^;; 아래는 property 코드 입니다.

boardClass.cs페이지

private int seq;

private string U_Pass;

public string u_pass

{

get { return U_Pass; }

set { U_Pass = value; }

}

public int b_Seq

{

set { seq = value; }

}

이렇게 값을 넣겨주고 나서는 bclass(boardclass)의 Procedure메소드를 호출하고 있습니다.이부분은AJAX 방명록 만들기 거의 모든 부분에서 다루었던 코드이므로 따로 설명 하지 않도록 하겠습니다~^^;; 인자 값으로 4를 넘기고 있습니다. 해당 코드는 아래와 같습니다~^^

boardClass.cs페이지

public void Procedure(int num)

{

… 중간 생략…

else if (num == 4)

{

query = "gb_password";

Db_Parameters(false);

Count = dcon.GetCheck(query);

if (Count != 0)

{

dcon.Comm.Parameters.RemoveAt(0);

query = "gb_Delete";

dcon.ExecuteNon(query);

}

gb_password 라는 프로시져를 query의 값으로 설정하고 있네요~
프로시져 내용은 아래와 같습니다.

gb_password Procedure

create proc gb_password

(

@b_seq int,

@b_pass varchar(20)

)

select count(*) from guest_board where b_seq = @b_seq and b_pass = @b_pass

그리고 나서 Db_Parameters 메소드를 호출하고 있습니다. 인자값으로는 bool 값을 넣겨 주고 있네요. Db_Parameters메소드는 AJAX 방명록 만들기[7] 부분에서도 다루었던 내용 입니다. 간단하게 설명하자면 받은 인자 값으로 해당 조건을 확인하고, 해당 프로지셔의 Parameter를 만듭니다.(Db_Parameters메소드의 자세한 코드는 AJAX 방명록 만들기[7]를 참고 해주세요)
그 다음 코드는 dbclass에 GetCheck 메소드를 호출하고 있습니다. 인자값으로 프로지져를 넘기고 있네요. 코드 쓰임새를 보아하니 return 값이 있는 메소드인듯 합니다. GetCheck메소드는 AJAX 방명록 만들기[8] 에서 다루었던 내용입니다. 삭제부분에서쓰여진 목적은 해당 글번호에 있는 비밀번호가 일치하는 게있는지 확인하기 위함 입니다. 일치하는 내용이 있다면 return 값이 1 이고 아니면 0 이 겠지요~^^; (GetCheck메소드의 자세한 코드는AJAX 방명록 만들기[8] 를 참고 해주세요~^^) 조건문을 확인해 보면 0이 아니라면 이니깐...1이면 삭제가 된다는 의미겠군요^^;;그럼 자시 query를 만들고 Parameter를 만들어야 하겠군요~! 프로시져는 아래와 같습니다.

gb_Delete Procedure

create proc gb_Delete

(

@b_seq int

)

delete from guest_board where b_seq = @b_seq

Parameter는 해당 글 번호 하나만 만들면 되겠군요~^^ 하지만 위에서 비밀번호와 해당글번호에 관련된 Parameter를 만들어 두었지 않습니까~!그럼 필요없는 비밀번호 Parameter만 없애 주면 되겠군요~그래서 RemoveAt메소드를 이용했습니다. 0번째를 지우는 거지요. 아까 비밀번호파라미터를 만들고 나서 글 번호 파라미터를 만들었기 때문에 0번째를 지우면 되겠지요.이렇게 지우고나서 dbclass에 ExecuteNon 메소드를 호출합니다. ExecuteNon메소드는 AJAX 방명록 만들기[7] 에서 다루었던 내용 입니다. 간단하게 설명하자면 ExecuteNonQuery메소드를 호출하도록 정의한 메소드 입니다. 이렇게 하면 데이터베이스에서 삭제가 일어 나겠군요~^^ 자 다시 이벤트 부분 코드로 돌아 와서...ㅋㅋ조건문이 하나 있군요~ 보아하니 bclass에서 property를 이용해서 Count값을 가지고와서 그 값이 1 이 맞는지 확인하는 것 같습니다. 맞습니다~! 확인하는 것입니다. 그래서RegisterStartupScript메소드를 통해서 Alert창을 뛰우는 것이지요. 그리고 나서 삭제도 되었으니깐 리스트부분을 다시 바인딩해야 하지 않겠습니까..그래서 코드 마지막에 ListBind()메소드를 호출하도록 했습니다. (ListBind 메소드는 AJAX 방명록 만들기[8]를 참고하세요~^^)
여기까지 제가 만들고자했던 AJAX 방명록이 다 만들어 졌습니다. 초보인 저 또한 이렇게 Ajax Control Toolkit를 이용해서 Ajax 방명록을 만들수 있을 알려드리려고 했는데... 도움이 되셨는지 모르겠습니다. 다소 제 설명이 너무나 미흠해서 이해가 않가실수도 있고...또는 애가 무슨소리하는거야...하는 생각이 들으 셨다면 죄송합니다. 그리고 제가 쓴 내용중에 제가 잘 못 알고 있는 부분이 있다면 서슴없이 따끔한 한마디 부탁드립니다~^^

제가 만든 소스도 올려 놓도록 하겠습니다. 혹시 소스를 보고 잘못된 부분이나 에러 같은 게있다면 말씀해 주세요~^^부족한 저에게 힘이 되어 주세요~ㅋㅋ^^
아무튼 지금까지 제가 나름 쓴 강좌를 읽어 주셔서 감솨합니다~

오늘 하루도 즐거고 행복한 하루되세요~^^홧팅~

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[8]

프로그래밍/ASP.NET AJAX / 2007/12/04 12:49

AJAX 방명록 만들기[8]

날씨도 쌀쌀해 지고 있네요.. 감기들 조심하세요~^^
AJAX 방명록 만들기[7] 부분에서 데이터를 DB에 넘기는 부분을 다루어 봤습니다^^ 이번에는 DB에 있는 데이터를 리스트 형식으로 보여주는 코드를 알아보려고 합니다~! 저는 DataList를 사용해서 만들어서 페이징을 따로 구현을 해야합니다. 그래서 먼저 페이징 구현소스를 먼저 보고, DataList 관련 소스를 보도록 하겠습니다~^^;;

제 말이 잘이해가 않되시더라도 코드를 보면서 하나하나 따라해 보세요~^^; 그리고 제가 항상 말하는 거지만 저 또한 초보개발자 입니다~!그래서 저와 같은 방식으로 만드는 것이 꼭 옮은 것은 아닐수도 있음을 기억해주세요~!ㅋ 우리 같이 더 넓은 미래를 향해 달려가자구요~ㅋㅋ 자~이제 헛소리는 그만하고 아래 코드를 보도록 하겠습니다.

.aspx페이지

function DoPage(current)

{

document.getElementById("<%= hiddenPage.ClientID %>").value = current;

<%= Page.ClientScript.GetPostBackEventReference(pageBind, "") %>

}

<asp:LinkButton ID="pageBind" runat="server" OnClick="pageBind_Click">

</asp:LinkButton>

<asp:HiddenField ID="hiddenPage" runat="server" Value="1" />

위 코드를 보시면 JavaScript 함수도 있고... LinkButton도 있고....HiddenField도 있는 것을 볼 수있습니다. JavaScript 함수는 사용자가 페이지를 이동할 때 클릭 이벤트에서 사용 되어질 함수이며, 간단하게 설명하자면 사용자가 선택한 페이지의 번호로를 HiddenField 에Value 값으로 넣게되면서 임의적으로 LinkButton에 이벤트를 주는 것입니다. 자~ 그럼 이제는 비하인드 코드에서 어떻게 코드가 구성이 되는지 알아 보도록 하겠습니다.

Guest_Board.aspx.cs페이지

private int currentPageIndex; //보여질 페이지

protected void Page_Load(object sender, EventArgs e)

{

currentPageIndex = int.Parse(hiddenPage.Value);

Page_Number();

}

위 코드는 페이징에 필요한 변수들을 선언해 두었구요~그리고 Page_Load 이벤트에서 일어 날 행위들을 정의한 부분입니다. Page_Load 이벤트 설명으로는 위에 선언한 변수 currentPageIndex에 HiddenField의 Value 값(기본값 1로지정했음)을 넣어주고 있고요!! Page_Number 라는 메소드를 호출하고 있습니다. 그럼 Page_Number 메소드의 소스를 보도록 하겠습니다.

Guest_Board.aspx.cs페이지

protected void Page_Number()

{

bclass.Procedure(2);

totalCount = bclass.total;

Page_List();

//바인딩 부분

ListBind();

}

Page_Number 라는 메소드가 어떤 행위를 하는지 살펴보면, 처음에는 boardClass에 있는 Procedure라는 메소드를 호출하고 있습니다. 인자 값으로 2를 넘기고 있고요. boardClass 와 Procedure 메소드는 지난 강좌부분에서 다루었으므로 따로 설명하지 않도록 하겠습니다~^^그래도 혹 제가 이런말을 한다고 해서 상처 받는 사람이 있으면 안되기 때문에 Procedure 메소드에 대해 살짝 말하자면 그저 메소드 이름에서도 알 수 있듯이 Procedure를 정의한 메소드입니다. 인자값은 해당 Procedure를 사용하기위한 조건의 값이 되겠구요~^^ 자 아래 코드는 해당 Procedure에 조건 부분만 간추려온 소스 입니다. 지난 강좌 부분에 해당 소스가 있기때문에 이해안가시면 지난 강좌를 참고해 주세요~^^;;

Guest_Board.aspx.cs페이지

private int total_Count; // boardClass의 전연변수 선언

....중간 생략...

else if (num == 2)

{

query = "total_count";

total_Count = dcon.GetCheck(query);

}

역시 위에서 설명한데로 Procedure 명을 정의하고있지요~^^;;그럼 total_count 프로시져에 대해서는 아래와 같습니다.

total_count Procedure

create proc total_count

select count(*) bSeq from guest_board

간단합니다..ㅋ 너무 간단해서 부끄럽네요~^^;;; 그 다음 코드를 보니깐 dbclass에 GetCheck 라는 매소드를 호출하고 있고요, 호출한 값을 전역 으로 선언해둔 total_Count 변수에 할당을 하고 있네요..대충 추측해 보시면 알겠지만 반환값이 있는 메소드인듯 하지요~인자값은 query(프로시져명)라는 값을넘기고 있네요. 그럼 GetCheck 메소드의 소스를 보도록 하겠습니다.

dbclass.cs 페이지

public int GetCheck(string procedure)

{

Comm.Connection = Conn;

Comm.CommandText = procedure;

Comm.CommandType = CommandType.StoredProcedure;

return (int)Comm.ExecuteScalar();

}

역시 int 형의 return 값이 있네요..ㅋㅋ 위 코드는 데이터베이스에 연결하는 코드이겠죠!^^위 코드의 일부는 지난 강좌에서도 다루었던 내용이므로 따로 설명하지 않도록 하겠습니다. 위에 있는 ExecuteScalar 함수는 쿼리를 실행하고 쿼리에서 반환된 결과 집합의 첫번째 행의 첫번째 열을 반환하는 역활을 해줍니다.(MSDN 참고). 리턴된 값은 위에서 와 같이 변수에 할당이 됩니다. 자~그럼 다시 제일 위로 올라가서... 보시면 totalCount 변수에 bclass 의 total을 호출하네요 보니깐 Property 인것 같은데요.아래 코드를 보도록 하시죠~^^

boardClass.cs페이지

public int total

{

get { return total_Count; }

}

아까 db에 연결해서 총수를 가지고 와서 그걸 boardclass에 있는 total_Count 변수에 넣었잖아요!이제는 그값을 Page 쪽으로 값을 넘기고 있네요.^^ 그 다음 코드를 보도록 하겠습니다. 변수에 총수를 할당하고 나서는 Page_List라는 메소드를 호출하고 있는 것을 볼 수 있습니다. 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

private int totalCount = 1; //총게시물 수

private int pageSize = 5; //한페이지 출력할 게시물 수

private int startGroup = 1;

private int group = 10;

private int pageCount = 0;//총 페이지 수

public void Page_List()

{

string page = null;

pageCount = (int)Math.Ceiling((double)totalCount / pageSize);

startGroup = ((currentPageIndex - 1) / group) * group + 1;

//처음으로

if (startGroup != 1)

{

page = String.Format("<a href='javascript:DoPage({0})'>{1}</a>",1,"처음");

}

//이전 버튼

if (startGroup != 1)

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup - group,"이전");

}

//페이지 있는곳까지 돌아라

int loop = 1;

while (loop <= group && startGroup <= pageCount)

{

if (startGroup == currentPageIndex)

{

page += String.Format("<span>{0}</span>", startGroup);

}

else

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup,startGroup);

}

loop++;

startGroup++;

}

//현재 페이지의 뒷 페이지로

if (startGroup <= pageCount)

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",startGroup,"다음");

}

// 마지막 페이지로

if (startGroup < (pageCount + 1))

{

page += String.Format("<a href='javascript:DoPage({0})'>{1}</a>",pageCount, "마지막");

}

Label lblPage = new Label();

lblPage.Text = page;

pnlPageNumber.Controls.Add(lblPage);

}

코드가 참 길죠~^^;;;;; 위에 보시면 pageCount, startGroup 머리를 아프게하는 녀석들이 있죠~!그러나 우리가 페이징을 구현하기위해서 많이 사용하고 있는 공식이라 어쩌면 편하게 느껴질수도 있겠네요~ㅋ 모~쉽게 이해 하시리라 생각이 됩니다~! 총 페이지 수를 알아내기 위해서 (전체 레코드 수 - 1) / 한 페이지의 크기 + 1 이라는 연산을 수행하는 부분인 것이지요. 그리고 그 밑으로 쭈욱~나왔는 조건들..ㅋ 딱 보시면 아하~하실것입니다. 아님.."왜 이렇게 지저분하게 했냐"라는 느낌이 들수도 있는 부분이겠네요~! 그러나 저는 부끄러워 하지 않겠습니다. 저같이 머리 나뿐 초보개발자가 이렇게라도 표현을 했다는것이...정말 대견스럽지 않습니까..ㅋㅋ^^;;(죄송합니다) 아~다시 돌아와서 위에 String 형식의 변수를 선언해서 해당 조건에 걸리면 <a>링크로 만들고 있습니다. 그리고 마지막 부분에 보시면 Label를 동적으로 생성을해서 Text값을 지정하고 있이요.대충 감이 오셨겠군요 그리고 나서pnlPageNumber라는 Label에 추가 해주고 있습니다. pnlPageNumber는 어디붙은 녀석이나면요. 아래 코드를 참고해주세요~

.aspx페이지

<%-- ###################### 방명록 리스트 시작 ##################### --%>

<asp:Panel runat="server" ID="pnl_dataList" Style="width: 100%;">

<asp:DataList ID="DataList1" runat="server" OnItemDataBound="DataList_databound">

<div id="list_title" style="color: #CC6666; text-align: center; font-size: 18pt;

background-color: #CCCCCC;">방명록 List 입니다~^^</div></td>

</tr></table>

</HeaderTemplate>

</tr>

</tr><tr style="height: 150px;"><td colspan="4" style="padding: 5px;">

<img alt="" style="cursor: pointer;" src="images/btn/imgDel.gif" id="Imgbtn_Delete"

onclick="content_Delete('<%# Eval("b_seq")%>')" />

</td></tr></table>

</td></tr>

</table>

</ItemTemplate>

</asp:DataList>

<asp:Label ID="pnlPageNumber" runat="server"></asp:Label>

</asp:Panel>

<%-- ################# 방명록 리스트 끝 ####################### --%>

이렇게 하면 페이징이 리스트 아래부분에 나타나겠지요~!그리고 javascritp 함수를 호출하도록 했기때문에 클릭하면 javascript 함수가 호출하겠지요. 소스는 제일위에 있내요.DoPage(current)라는 인자값으로 보여질페이지의 번호를 넘기도록 합니다. 그래서HiddenField에 값을 지정(currentPageIndex 변수값이됨)하고 해당 링크 이벤트를 발생하게 합니다. 이벤트 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

protected void pageBind_Click(object sender, EventArgs e)

{

this.ListBind();

}

간단하게도 ListBind 메소드를 호출하고 있습니다. 아까 위에서도 마지막 부분에 ListBind를 호출하는 소스를 보셨을 텐데요 그럼 ListBind 메소드 코드를 보도록 하시지요~!

Guest_Board.aspx.cs페이지

protected void ListBind()

{

int sum = (currentPageIndex - 1) * pageSize;

string query = String.Format("SELECT TOP {0} b_seq,b_name,b_content,b_ip,b_time,b_icon FROM guest_board WHERE b_seq NOT IN (SELECT TOP {1} b_seq FROM guest_board ORDER BY b_seq DESC)ORDER BY b_seq DESC", pageSize.ToString(), sum);

bclass.Query = query;

bclass.Procedure(3);

this.DataList1.DataSource = bclass.dataset;

this.DataList1.DataBind();

}

페이징을 위한 쿼리를 만들어서 날리는 부분이네요.(그냥 프로지져로만들면 편하겠네요) 켁~!부끄럽네요. 너무 허접해서리..ㅋ지금까지 보오셨던 데이터베이스 연결 구분과 똑같습니다. 따로 설명하지 않아도 지금까지 제가 썼던..강좌(!? 강좌라고 하는 좀 부족하죠..ㅋ)를 보시면 bclass는 이해하시리라 생각이 됩니다.^^; 코드 마지막쯤에 보시면 DataList 에DataSource는 정의하고 있네요. 그에 관련된 소스들을 그냥 한번 보도록 하겠습니다.

boardClass.cs 페이지

private DataSet ds = new DataSet();

public string Query

{

set { query = value; }

}

public void Procedure(int num)

{

.. 중간 생략 ..

else if (num == 3)

{

ds = dcon.GetDataSet(query);

}

public DataSet dataset

{

get { return ds; }

set { ds = value; }

}

dbclass.cs페이지

public DataSet GetDataSet(string procedure)

{

public SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand(procedure, Conn);

DataSet ds = new DataSet();

adapter.Fill(ds);

return ds;
}

위 코드와 Property를 이용해서 DataSet 형식을 받아서 DataSource 를 지정해주게 됩니다.그리고나서 DataBind를 시키면 다시 새로운 원하는 페이지의 글들이 나타나게 되는 거지요~^^휴~이렇게 긴 내용을 다루려고 하니깐 정말 힘드네요~! 저도 배우는 입장에서 어떻게 설명을 해야할지.. 마구 막히는 부분이 있던것 같 습니다. 이 글을 읽으시는 분들의 넓으신 아량으로 이해해 주세요~!

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

AJAX 방명록 만들기[7]

프로그래밍/ASP.NET AJAX / 2007/11/21 12:45

AJAX 방명록 만들기[7]

후~요즘 날씨가 너무 쌀쌀하네요!! AJAX 방명록 만들기 강좌를 빨리 끝내야하는데... 제가 좀 게을러서 늦어 지내요~^^캬캬~ 스파르타하게 빨리 빨리 올리도록 하겠습니다.^^
저번 내용은 데이터베이스는 만들어 보았습니다. 그럼 이제 작성한 글을 데이터베이스에 어떻게 연결해서 넘기게 되는지 확인해 보도록 하겠습니다. 일단 사용자가 글을 다쓰고 확인을 클릭하게 되면 비하인드코드에서 어떠한 일이 일어나는지 코드를 보시도록 하겠습니다!!

Guest_Board.aspx.cs페이지

protected boardClass bclass = new boardClass();

protected void WriteOK_Click(object sender, EventArgs e)

{

bclass.u_name = txtuserName.Text;

bclass.u_pass = txtpassword.Text;

bclass.u_content = txtContent.Text;

bclass.u_ip = Request.UserHostAddress;

bclass.icon = this.IMG_ICON.Value;

bclass.Procedure(1);

Text_Clear();

ListBind();

}

위 코드는 확인 버튼을 클릭하고 나서 대충유효성 검사까지 완료 되면 비하인드코드에서 일어나는 행위들입니다. 코드에서 bclass는 boardClass를 인스턴트로 생성한 것 입니다. 코드 위 부분에 인스턴트로 생성한 코드가 보이시지요. 그래서 boardClass에 접근이 가능하겠지요.
이제부터 설명하는 아래내용은 위 코드를 중심으로 하나하나의 코드와 구현내용을 보도록 하겠습니다.

ㅁ Property

bclass.u_name : 작성자 닉네임을 boardClass의 변수값으로 넘김.

bclass.u_pass : 작성자 비밀번호를 boardClass의 변수값으로 넘김

bclass.u_content : 작성내용을 boardClass의 변수값으로 넘김.

bclass.u_ip : 작성자의 ip 주소를 boardClass의 변수값으로 넘김.

bclass.icon : 작성자가 선택한 아이콘의 파일명이 boardClass의 변수값으로 넘김.

아래 코드는 boardClass의 변수선언 코드와 Property 부분입니다.

boardClass.cs페이지

private string U_Name;

private string U_Pass;

private string U_Content;

private string U_Ip;

private string ICon;

public string u_name

{

get { return U_Name; }

set { U_Name = value; }

}

public string u_pass

{

get { return U_Pass; }

set { U_Pass = value; }

}

public string u_content

{

get { return U_Content; }

set { U_Content = value; }

}

public string u_ip

{

get { return U_Ip; }

set { U_Ip = value; }

}

public string icon

{

set { ICon = value; }

}

저는 위와같이 코드를 짜보았습니다. 모 그냥 Property 만들지 않고 한페이지에서도 가능하지요! ^^;; 저는 초보라..ㅋ이렇게도 해보고 저렇게도 해보고 이렇고 있습니다.^^ㅋ 아무튼 이렇게 값들을 넘기고,그 다음에 코드를 보시면 bclass.Procedure(1); 코드가 있습니다. 이것은 어떻게 정의된 메소드인지 알아 보도록 하지요! 앞에 bclass. 이렇게 있는걸 보니..딱 boardClass에서 선언된 녀석이란걸 알수 있겠지요! 아래 코드로 확인해 보도록 하시지요!

boardClass.cs페이지

private dbClass dcon = new dbClass();

private string query;

public void Procedure(int num)

{

dcon.Open();

if (num == 1)

{

query = "gb_insert";

Db_Parameters(true);

dcon.ExecuteNon(query);

}

else if (num == 2)

{

query = "total_count";

total_Count = dcon.GetCheck(query);

}

else if (num == 3)

{

ds = dcon.GetDataSet(query);

}

else if (num == 4)

{

query = "gb_password";

Db_Parameters(false);

Count = dcon.GetCheck(query);

if (Count != 0)

{

dcon.Comm.Parameters.RemoveAt(0);

query = "gb_Delete";

dcon.ExecuteNon(query);

}

dcon.Close();

}

bclass.Procedure(1); 이 코드에서 보이듯 메스드에 int형식의 인자값을 받는 것을 알수 있습니다. 위 코드에서 보면 받은 인자값으로 query를 구분합니다.그럼 대충 제일 위에 코드부터 하나하나 살펴 보도록 하겠습니다. 코드 위 부분에 dbClass를 인스턴트로 생성하는 코드가 있습니다. dbClass에서는 데이터베이스 연결하고 실행하는 코드들을 정의한 Class입니다. 위 코드를 하나하나 보시면서 그때그때 dbClass 내용을 설명해 드리도록 하겠습니다. 먼저 dcon.Open();라는 코드가 선언 되어 있습니다. 그 코는 아래와 같습니다.

dbClass.cs

private SqlConnection Conn;

public void Open()

{

Conn = new SqlConnection(ConfigurationSettings.AppSettings["constr"]);

Conn.Open();

}

전역변수로 SqlConnection을 선언하고 Open이라는 메소드에서 Connection 연결정보를 정의했습니다. 사용자 정보는 Web.config 에 정의해 놓았습니다.(아래 코드 참고)

Web.config 페이지

- Web.config 파일에 정의 -

</appSettings>

그리고 SqlConnection의 Open메소드를 이용해서 데이터베이스와 연결을 했습니다. 자~그럼 아까 인자값을 1로 받았습니다. 그럼 1과 같은 조건에 걸리겠네요! 걸린 코드를 보니 일단 query라는 전역 변수에 "gb_insert"라는 저장프로시저명을 정의하고 있습니다. gb_insert의 내용은 아래코드와 같습니다.

gb_insert Procedure

CREATE proc gb_insert

(

@b_name varchar(20),

@b_pass varchar(20),

@b_content varchar(5000),

@b_ip varchar(15),

@b_icon varchar(20)

)

insert into guest_board (b_name,b_pass,b_content,b_ip,b_icon) values(@b_name,@b_pass,@b_content,@b_ip,@b_icon)

그 다음는 Db_Parameters라는 메소드에 bool형식의 인자값을 넘기고 있습니다. Db_Parameters메소드의 코드를 보도록 하겠습니다.

boardClass.cs페이지

public void Db_Parameters(bool X)

{

dcon.Comm.Parameters.Add("@b_pass", SqlDbType.VarChar, 20);

dcon.Comm.Parameters["@b_pass"].Value = U_Pass;

if (X)

{

dcon.Comm.Parameters.Add("@b_name", SqlDbType.VarChar, 20);

dcon.Comm.Parameters.Add("@b_content", SqlDbType.VarChar, 5000);

dcon.Comm.Parameters.Add("@b_ip", SqlDbType.VarChar, 15);

dcon.Comm.Parameters.Add("@b_icon", SqlDbType.VarChar, 20);

dcon.Comm.Parameters["@b_name"].Value = U_Name;

dcon.Comm.Parameters["@b_content"].Value = U_Content;

dcon.Comm.Parameters["@b_ip"].Value = U_Ip;

dcon.Comm.Parameters["@b_icon"].Value = ICon;

}

else

{

dcon.Comm.Parameters.Add("@b_seq", SqlDbType.Int);

dcon.Comm.Parameters["@b_seq"].Value = seq;

}

받은 인자 값으로 조건을 확인하고 있습니다. 여기서 조건을 사용한 목적은 insert할 것인지비밀번호를 확인 후 삭제를 할 것인지를 확인해서 그에 맞는 Parameter를 만들기 위함 입니다. 아까 ture로 값이 넘어 왔었지요! 그럼 기본적으로 b_pass의 parameter를 만들고b_name,b_content,b_ip,b_icon 이렇게 추가로 더 만들어 습니다.(값도 다 넣어 주었지요) 그럼 이제 실행 시키면 데이터가 데이터베이스에 넘어 가겠지요. 그 다음 코드가 바로 값을 넘겨주는 코드라고 보시면 되겠습니다.^^ "dcon.ExecuteNon(query)" 이 코드 또한 dbClass에 정의된 내용 입니다. 아래 코드로 보시겠습니다.

dbClass.cs페이지

public SqlCommand Comm = new SqlCommand();

public void ExecuteNon(string procedure)

{

Comm.Connection = Conn;

Comm.CommandText = procedure;

Comm.CommandType = CommandType.StoredProcedure;

Comm.ExecuteNonQuery();

}

SqlCommand를 전역으로 선언해 두었습니다. 그리고 ExeuteNon은 인자 값으로 string형의 값을 받습니다. 그 값은 SQL Query일 것이다. 생성한 Command에 Connection 객체를 생성하고 CommanText에 해당 Query를 설정하고 그 Type를 설정한뒤에 ExecuteNonQuery를 실행하면 입력한 내용이 데이터 베이스에 기록이 되게 됩니다~! 그럼 이제 마지막 줄에 있는 코드를 보도록 하겠습니다.조건들 마지막부분에 dcon.Close() 가 있습니다. 딱 아시겠지요!! 데이터 베이스를 넘겼으니깐 더 이상 데이터베이스와 연결할 필요가 없겠지요!그래서 끊도록 합니다. dcon.Close() 코드 또한 dbClass란걸 알수 있을 것입니다. 그럼 해당 코드에 코드내용을 보도록 하겠습니다. 모 보시지 않으셔도 대충 짐작하실것 같네요!^^;;;

dbClass.cs페이지

public void Close()

{

Comm.Parameters.Clear();

Conn.Close();

}

자 위코드로 인해 데이터 베이스 연결이 끊겼습니다. 그럼 계속해서 이벤트 단에 있는 나머지 코드를 살펴 보도록 하겠습니다. Text_Clear() 메소드는 글을 입력 받는 TextBox에 남아있는 글을 지우는 메소드입니다. 코드는 아래와 같습니다.

Guest_Board.aspx.cs페이지

protected void Text_Clear()

{

txtContent.Text = "";

txtuserName.Text = "";

IMG_ICON.Value = "";

}

딱 아실수 있으시겠지요!!그럼 이제 하나만은 코드를 보도록 하시지요!! ListBind() 메소드는 리스트부분에 새로작성한 글이 업데이트 될 수 있도록 합니다.이번 내용은 여기까지 작성하도록 하겠습니다. ListBing() 메소드는 리스트부분을 다룰때 자세하게 다루겠습니다. 테스트 하실때는 ListBind()부분은 주석처리해서 데이터 베이스 연결해서 데이터가 입력 되었는지 확인해 보도록 하십시오~^^

Posted by happydong drum-83

TAG Ajax방명록

트랙백 0, | 댓글 0

«이전 1 2 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'프로그래밍/ASP.NET AJAX'에 해당되는 글 18건

[Tip] TabContainer 스타일 지정

Trackback | http://www.happyday214.com/trackback/77

[AJAX Control] SliderExtender 써보기~!

Trackback | http://www.happyday214.com/trackback/76

[AJAX Control] UpdatePanelAnimationExtender 써보기~!

Trackback | http://www.happyday214.com/trackback/39

[AJAX Control] TabContainer Control 써보기~!

Trackback | http://www.happyday214.com/trackback/35

[AJAX Control] ResizableControlExtention 써보기~!

Trackback | http://www.happyday214.com/trackback/34

[Tip] ASP.NET AJAX UpdatePanel 안에서 파일업로드 시켜보기...

Trackback | http://www.happyday214.com/trackback/33

ASP.NET AJAX 프로젝트 만들기 준비 사항~!

Trackback | http://www.happyday214.com/trackback/45

AJAX 방명록 만들기[9]

Trackback | http://www.happyday214.com/trackback/25

AJAX 방명록 만들기[8]

Trackback | http://www.happyday214.com/trackback/23

AJAX 방명록 만들기[7]

Trackback | http://www.happyday214.com/trackback/12

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크