'프로그래밍/03.ASP.NET' 카테고리의 글 목록 (8 Page)

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

AJAX 방명록 만들기[5]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:56

AJAX 방명록 만들기[5]

이번에는 간단하게 글을 입력하고 유효성 검사를 하는걸 보시겠습니다. 저는 아주아주 간단하게 유효성 체크를 했습니다. 부족한점 이해해 주시고요!!
먼저 아래 그림을 보도록 하겠습니다!

위 그림은 내용을 입력한 모습 입니다 . 이미가 삽입이 되었죠. 어떻게 들어 갔는지 먼저 확인하고 유효성관련 된 내용을 보도록 하겠습니다! AJAX 방명록 만들기[4] 에서 이미지 모음 코드를 보았을 것입니다. 그 코드 거의 마지막쯤에 아래 코드가 있었을 것입니다.

Image Code(.aspx페이지)

간단하죠 마우스 클릭을 하면 이벤트가 일어나는 거죠.그럼 imgcancel() 함수의 호출내용을 보도록 하겠습니다.

Script Code (.aspx페이지)

function imgcancel()

{

document.getElementById("<%= pnl_imglist1.ClientID %>").style.display = "none";<?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

document.getElementById("<%= pnl_imglist1.ClientID %>").style.height = "0px";

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

document.getElementById("<%= pnl_imglist2.ClientID %>").style.height = "0px";

}

간단합니다. document객체중에서 getElementById메소드를 사용해서 해당 아이디를 가진 객체를 찾는 것이지요.그래서 style를 설정하는 코드입니다. 여기서 ID는 이미지 모음 Panel ID가 되겠지요<%= 로 감싸저 있는 이유는 Panel이 서버컨트롤이라 우리가 일반적으로 그냥 ID를 쓰면 접근이 않됩니다. 그렇기 때문에 꼭 위와 같이 지정하고 ClientID를 지정해 주어야 하는것이지요. 다음은 imgOK() 함수내용을 알아 보도록 하겠습니다.

Script Code(.aspx페이지)

function imgOK()

{

imgcancel();

if(document.getElementById("base_check").checked)

icon = "icon01.gif";

var iconn = '<img alt="" src="images/list_img/'+icon+'" />';

document.getElementById("imgAdd").innerHTML = iconn;

}

위 코드를 살펴보면 먼저 imgcancel()함수를 먼저 호출하는 것을 볼수 있습니다. 왜냐..일단 이미지모음 부분을 안보이게 해야 하기 때문이겠지요^^ 그런다음에 조건이 하나 붙고있습니다. 이 조건은 이미지 모음에 있는 라디오버튼으로 사용자가 기본 check 이미지를 사용했는지를 확인하는 조건입니다. 기본 체크이미지를 선택했다면 True이기 때문에 조건에 걸려 icon변수(전역변수)에 해당값을 넣게 됩니다. 만약 사용자가 다른 이미지를 선택하게 되면 라디오버튼마다 onclick 이벤트를 주었기 때문에 아래와 같은 함수를 호출하게 됩니다.

Script Code (.aspx페이지)

function img_radio(value)

{

icon = "icon"+value+".gif";

}

위 img_radio함수는 인자값 하나를 갖습니다. 그 인자같은 radio버튼 속성에 value값을 받는것이지요. 저는 radio 버튼마다 value값을 설정해 주었습니다. 궁금하시면 AJAX 방명록 만들기[4]에 이미지 모음 코드를 한번 살펴보세요^^ 위 내용은 아까도 말했듯 전역으로 선언한 icon 변수에 값을 넣어 주고있습니다. 값은 이미지 파일명이 되겠습니다.value는 무엇인가 1,2,3... 이런 값이 들어 오게 됩니다. 이미지 파일명이 icon1.gif, icon2.gif..이런식으로 구성이 되어 있거든요^^ 그럼 다시 imgOk() 함수의 나머지 부분도 알아보도록 하겠습니다. 보시면 하나의 변수를 선업하고 그 값은 HTML 코드의 내용를 넣고 있습니다. img태그를 사용하고 있는 것 같지요. 맞습니다 img 태그입니다. 그리고 나서는 document개체에getElementById메소드로 imgAdd라는 ID를 찾습니다. imgAdd는 <div id="imgAdd"></div> 이것입니다. 아무것도 없는 div태그에 innerHTML속성을 사용해서 해당 블록에 태그가 동적으로 생성되게 한 것 입니다.그래서 위와같이 글쓰는 부분에 이미지가 들어 갈수 있었던것 입니다.이제 이미지가 어떻게 들어 갔는지 알았으니깐 간단하게 유효성 Script는 어떻게 쓰는지 알아 보도록 하겠습니다. 제일 위에 그림을 보면 "확인"버튼이 있습니다. 저 버튼은 서버컨트롤이 아닙니다. 그래서 클릭하면 Postback이 일어 나지 않습니다. 유효성에서 다 통과가 되야 Postback이 일어나는 거죠. 그럼 확인 버튼을 클릭하면 어떠한 Script 함수가 호출되는지 알아 보도록 하겠습니다. 코드는 아래와 같습니다.

Script Code (.aspx페이지)

function write_Ok()

{

var id = document.getElementById("<%= txtuserName.ClientID %>").value;

var pass = document.getElementById("<%= txtpassword.ClientID %>").value;

var content = document.getElementById("<%= txtContent.ClientID %>").value;

Check(id,pass,content,icon);

}

위 코드는 대충 보시면 이해하실것 같군요 지역변수를 3개 선언을 해서 그 변수에 해당 값을 넣게되는 것입니다. 그래서 Check라는 함수를 호출하게 되는 것입니다.Check 함수는 4개의 parameter을 받습니다. 그것은 아래와 같습니다.

- id : 사용자가 입력한 닉네임(지역변수)
- pass : 사용자가 입력한 아이디(지역변수)
- content : 사용자가 입력한 내용(지역변수)
- icon : 사용자가 선택한 이미지(전역변수)

그럼 Check함수를 알아 보도록 하겠습니다. Check함수는 따로 .js파이로 빼두었습니다.그냥 코드가 길어질 것 같아서요^^;;

boardScript.js페이지

// JScript 파일

function Check(id,pass,content,_icon)

{

if(_icon == "")

{

alert("이미지를 선택해주세요!");

return;

}

if(id == "")

{

alert("닉네임을 입력해주세요!");

return;

}

else if(!id.match(/[a-zA-Z가-힣0-9]/))

{

alert("닉네임을 정확히 입력해주세요!");

return;

}

if(pass == "")

{

alert("비밀번호를 입력해주세요!");

return;

}

else if(pass.length < 4 || !pass.match(/[a-zA-Z가-힣0-9]/))

{

alert("비밀번호를 정확히 입력해주세요!");

return;

}

if(content == "")

{

alert("내용을 입력해 주세요!");

return;

}

DateOK();

}

아주 간단하지 않습니까?! 부끄럽습니다! 나중에 좀더 보안할 예정입니다! 일단 간단하게 설명해드리겠습니다. if(_icon == "") 이런 조건식은 사용자가 내용을 입력하지 않고 확인 버튼을 눌렸는지 알아보기 위함이고요, else if(!id.match(/[a-zA-Z가-힣0-9]/)) 이런 조건식은 정규식을 이용한 것입니다. 사용자가 처음부터 스페이스를 이용해서 이름을 넣을 수도 있기때문이죠. 그리고 else if(pass.length < 4 || !pass.match(/[a-zA-Z가-힣0-9]/))는PassWord 입력은 4이거나 그이상이 되야하는데 4자보다 적게 넣었는지 확인하는 것이고요!!그리고 비밀번호도 스페이스로 쓸수 없게 한것입니다. 더 정확하게 하려면 입력한 비밀번호의 length 만큼 반복을 돌려서 스페이스를 넣었는지 검사를 해야겠죠!! 아무튼 유효성을 대충 이러합니다. 아주 간단합니다. 혹시 이걸보고 만들실분들은 유효성을 직접더 짜보세요!나름 재미도 있습니다^^. 이렇게 해서 유효성에 걸리면 경고 메세지가 뜨고 return이 됩니다. 여기서 return은 함수를 아예 빠져나오게 되는 것입니다. 그리고 걸리는게 없다면 제일 아래에 있는 DateOK() 함수를 호출하게 됩니다. 그럼 DateOK() 함수를 알아 보도록 하겠습니다.

Script Code(.aspx페이지)

function DateOK()

{

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

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

}

위 코드에서 IMG_ICON는 서버컨트롤의 히든필드입니다. 히든필드에 값은 icon(이미지파일이름)값을 넣게 되는 것이요! .cs파일에서는 자바스크립트 변수에 접근할수 없기때문에 값을 히든필드에 넣어습니다. 그리고 다음 코드가 처음 보는 코드인가요!! 저 코는 임의적으로 서버컨트롤에 클릭 이벤트를 주는 것입니다. WriteOK는 링크 버튼 ID입니다. 코드에 보시면WriteOK라는 링크 버튼을 보실 수 있을 것입니다. 자세한 코드 설명은 MSDN 설명으로 보시겠습니다.

Page.ClientScript MSDN 설명

Page.ClientScript속성 : ClientScript 속성을 사용하여 웹 페이지에서 스크립트를 관리, 등록 및 추가하는 데 사용할 수 있는 ClientScriptManager 개체를 가져옵니다.ClientScriptManager 클래스는 더 이상 사용되지 않는 :Track('ctl00_LibFrame_ctl16|ctl00_LibFrame_ctl17',this);" href="http://msdn2.microsoft.com/ko-kr/library/system.web.ui.page(VS.80).aspx">Page 클래스 메서드 대신 스크립트를 관리하기 위해 ASP.NET 2.0에 새로 추가되었습니다.

그럼 GetPostBackEventReference는 무엇인가 이 또한 MSDN를 설명을 보시겠습니다

GetPostBackEventReference MSDN 설명

GetPostBackEventReference : 서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다.

GetPostBackEventReference의 오버로드 목록은 아래표와 같습니다.

ClientScriptManager.GetPostBackEventReference (PostBackOptions)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 지정한 PostBackOptions 인스턴스에 의해 정의됩니다.
ClientScriptManager.GetPostBackEventReference (Control, String)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다.
ClientScriptManager.GetPostBackEventReference (PostBackOptions, Boolean)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 수 있는 문자열을 반환합니다. 참조 문자열은 지정된 PostBackOptions 개체에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.
ClientScriptManager.GetPostBackEventReference (Control, String, Boolean)	서버에 다시 게시 작업을 발생시키는 클라이언트 이벤트에 사용할 문자열을 반환합니다. 참조 문자열은 다시 게시 작업과 추가 이벤트 정보의 문자열 인수를 처리하는 지정된 컨트롤에 의해 정의됩니다. 유효성 검사에 대한 이벤트 참조도 선택적으로 등록합니다.

저 같은 경우는 위 표에서 두번째 오버로드를 사용했다고 볼수 있습니다. 이렇게 하므로써 WriteOK 링크버튼에 OnClick="WriteOK_Click" 이벤트가 발생하는 것이며, 그로인해 서버에서는 DB에 데이터를 넣겨주는 일을 하는 것이지요! 다음에는 서버에서 DB에 어떻게 넣는지 알아보도록 하겠습니다. 읽어 주셔서 감사합니다. 제가 좀 오타가 많아서 혹시 보시면 이해해 주세요. 자꾸 이해해 달래~~!!(웃찾아 유행어 인용)

Posted by happydong

, |

AJAX 방명록 만들기[4]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:53

AjAX 방명록 만들기[4]

이번에는 이미지 모음이 간단한 애니메이션 효과와 함께 나타나는 코드를 보도록 하겠습니다. 제가 스토리보드 부분에서 "이미지 삽입 클릭~^^" 부분을 클릭하면 이미지 모음이 나타난다고 했습니다. 일단 그림으로 잠깐 보도록 하겠습니다.

1 - 1 그림.

1 - 2 그림

1 - 3 그림

위 그림으로 보았듯 어떤 애니메이션 효과인지 미리 집작할수 있을 것입니다. 그림 일단 이미지 모임 구현 HTML 코드를 보도록 하겠습니다.

.aspx페이지 Code

<%--#####################이미지 리스트 시작 ###########################--%>
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

<asp:Panel runat="server" ID="pnl_imglist1" CssClass="ImgList" Style="display: none;">

<asp:Panel runat="server" ID="pnl_imglist2" CssClass="imgList" Style="display: none;">

<table border="0" cellpadding="0" cellspacing="0" style="filter: alpha(opacity=80);

background-color: White;" width="100%">

<tr>

</tr>

<tr>

</tr>

<tr>

<td><input type="radio" id="base_check" name="img_Radio"

value="01" checked="checked" onclick="img_radio(this.value)" /></td>

</tr>

중간 생략.....

<tr>

</tr>

</table>

</asp:Panel>

<cc1:dragpanelextender id="DragPanelExtender1" runat="server"

draghandleid="img_title" targetcontrolid="pnl_imglist1"></cc1:dragpanelextender>

<%--######################이미지 리스트 끝 ##############################--%>

중간 생략 부분은 같은 코드가 반복이라 생략하였습니다. 위 코드를 보시면 이미지 모음 테이블이 두개의 Panel로 감싸저 있습니다. 그리고 두개의 Panel 은Style="display: none;" 으로 설정이 되어 있습니다. 그렇기 때문에 브라우져에 나타나지 않는 것이죠!!그럼 언제 어떻게 나타나느냐!? 아래 코드를 보면 알수 있을 것입니다.

AnimationExtender Code(.aspx 페이지)

<%--##################### 애니메이션 시작 ############################# --%>

<cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img">

<Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor"

StartValue="#AAAAAA" EndValue="#959695" />

</Parallel>

</Parallel>

<Color AnimationTarget="pnl_imglist2" PropertyKey="backgroundColor"

StartValue="#FFFFFF" EndValue="#959695" />

</Parallel>

</Sequence>

</OnClick>

</Animations>

</cc1:animationextender>

<%-- ########################## 애니메이션 끝 ####################### --%>

위 코드는 AJAX ControlToolkit중에서 animationextender 컨트롤 입니다. 이름 그대로 애니메이션 효과를 정의할 수 있는 컨드롤인 것이죠! 아직까지는 animationextender 컨트롤 사용법에 대해서 자세하게 나온 책들은 없는 것같아요!(http://www.asp.net/ajax/ajaxcontroltoolkit/samples/Walkthrough/UsingAnimations.aspx)
위 주소를 참고 하시면 여러가지 애니메이션 효과를 사용하실수 있을 것입니다. 참고 하세요!^^ 이제 코드를 본격적으로 살펴 보도록 하겠습니다.

<cc1:animationextender id="Animation" runat="server" targetcontrolid="Div_img">

위 코드에서 id는 원하는 이름으로 주시면 됩니다. 그리고 targetcontrolid는 OnClick 이벤트가 일어날 대상의 id를 정의해 주면됩니다.(주의: id를 서버컨트롤이어야 합니다.)저 같은 경우는 "이미지 삽입 클릭" 부분은 <div> 감싸고 id를 Div_img라고 했습니다. (AJAX 방명록 만들기[3] 소스참고)

애니메이션을 명시해 주고 있죠!

이벤트를 지정해 줍니다.

단어에서 뜻이 "연속..연달아 일어남.."인 듯한거 보니깐 그 안에 있는 코드가 연달아서 일어 난다고 예상할수 있을 것입니다.

어떤식으로 Action이 일어날것인지 정의해 주고 있죠!! Attribute는 style태그를 지정해주고 Value는 그style태그에 맞는 값을 지정해주는 것이죠!그리고 AnimationTarget은 이 style이 적용될 id를 넣어주면 되겠습니다. 위 코드에서 보시면 아시겠지만 pnl_imglist1 는 Panel의 id입니다. 거기 보시면 style에 display가 none으로 설정되어 있습니다. 하지만 클릭이벤트가 발생하면 그 style이 block으로 설정된다는 이야기죠!! 조금 이해가 되시죠!!

<Color AnimationTarget="pnl_imglist1" PropertyKey="backgroundColor"

StartValue="#AAAAAA" EndValue="#959695" />

</Parallel>

위 코드도 아주 멋진 애니메이션효과를 주는 코드인것 같습니다~^^

Parallel 뜻을 찾아보니.. "평행의,나란한..."이라고 하는군요!그럼 나란하게 평행하게 애니메이션이 일어 난다는 이야기겠죠!!(맞나!?)저도 공부하면서 알아보는 거라서요!ㅋ 가끔 이런식으로 이야기를 해도좀 이해해주세요^^;;자 그럼 속성을 보도록 하죠!!AnimationTarget 은 이제 바로 이해하시겠죠. Duration 은 뜻을 찾아보니깐 "지속,계속,존속" 이라고합니다.그럼 평행하게 지속적으로 무언가가 일어 난다는 거겠죠!! 저는 .3으로 설정했습니다.그간격으로 일이 진행이 되겠죠.그럼 Fps는 무엇인가..이거는 사전에도 찾을 수 없더라고요!!근데..제가 집작하는 건데요!!왠지 속도를 뜻하는게 아닐까...하네요!! 저는 25로 설정을 했는데..25를 기준으로 낮게 하면 버벅거리면서 열리고요! 높으면 아주 부드럽게 열린다고 해야하나!!그렇더라고요!!그래서 이거는 제가 직잡하는 것 입니다. 나중에 더 공부해서 알아 볼게요^^;;;

Move는 움직임을 뜻하겠죠! 수평으로 얼마큼 움직여라..수직으로 얼마큼 움직여라

는 내용입니다.

Resize 는 사이크를 발하는 것이겠습니다. 최종사이즈는 정하는 것이죠!!

Color 는 색의변화를 지정해주는 것입니다. 역시 AnimationTarget를 정하고 PropertyKey는 style태그를 넣고 StartValue 처음보여줄 색과 EndValue 마지막보여줄 색을 정의합니다.위에 Parallel 코드안에 Move와 Resize , Color가 감싸저 있으니 Parallel TargetID 에서 애니메이션이 일어 나겠죠! 자 그 다음 코드들은 반복되는 코드니깐 이제 조금 알수 있을 것이라고 생각이 됩니다!!

자 이제 다시 이미지 모임 구현 HTML 코드를 보시겠습니다. 제일 마지막쯤에 dragpanelextender컨트롤이라고 보이 실것입니다. 그 컨트롤에 대해서 알아보도록 하지요!

dragpanelextender컨트롤은 이름 그대로 드래그를 할 수 있는 컨트롤이라고 할 수 있습니다. 즉 사용자가 원하는 위치로 움직일 수있다는 이야기죠. 이제 이해가 되 셨습니까! 기존에는 이렇게 움직이는 컨트롤을 짜려면 Script로 힘들게 짜야했죠 아니면 어디서 복사해와서 쓰던지요. 그런데 dragpanelextender컨트롤를 이용하면 간단한 설정만으로 그런한 기능이 손쉽게 구현된다는 말씀입니다! 자 한번 속성을 간단하게 알아 볼까요.

TargetControlID	드래그를 가능하게 하는 패널 컨트롤의 ID입니다.
DragHandleID	패널 컨트롤을 위해 드래그를 할 수 있는 컨트롤의 ID입니다. 사용자가 이 컨트롤을 클릭하여 드래그하면 패널 컨트롤이 움직이게 됩니다

아주 간단하지 않습니다?!^^ 정말 간단해서 제가 따로 설명할 필요가 없을 것 같군요.속성의 내용만 보고도 알것습니다. 그렇죠!

그럼 이미지 모음부분은 이만 설명하도록 하겠습니다. 오~정말 제가 초보라서 그런지 설명하는데 부족한점을 많이 느끼고 있습니다.정말 쉽지 않네요. 아무튼 저같은 초보자들에게 조금이나마 도움이 되었으면 하는 바램입니다.그럼 다음에는 간단한 유효성 Script 코드를 보고 DB에 넣는 코드를 한번 보시겠 습니다~!

Posted by happydong

, |

AJAX 방명록 만들기[3]

프로그래밍/03.ASP.NET / 2007. 11. 17. 00:47

AJAX 방명록 만들기[3]

1,2 강좌는 코드에 대한 내용이 별로 없어서 지루했을 것 같습니다.

이제 본격적으로 코드를 한번 살펴 보도록 하겠습니다. .aspx 페이지를 보시면 아래와 같은 코드가 들어가 있을 것입니다.

.aspx페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o /><?xml:namespace prefix = o />

</asp:Content>

위 코드에서 <asp:Content> 와 </asp:Content> 사이에 아래와 같은 코드를 집어 넣습니다.

.aspx 페이지

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Guest_Board.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

<%--########## 여기도 추가해주세요!!아래에서 설명하겠습니다.###### --%>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<%--##########이렇게 추가해주세요!!###### --%>

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

</asp:ScriptManager>

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

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

위와 같이 코드를 직접 입력해 주셔도 되고요!!아니면 컨트롤을 끌어다가 넣으셔도 상관 없습니다. 컨트롤은 아래 그림과 같이 있습니다.

위 컨트롤을 선택후 원하는 위치에 끌어다가 넣으면 코드가 알아서 생성됩니다. 그럼 ID만 정해주면 되겠죠!그럼 위 코드에서 ScriptManager 와 UpdatePanel 이 왜들어가는지 약간 궁금하시리라 생각됩니다. Ajax 방명록을 만들기위해서 제일 중요한 컨트롤들 입니다. 이 두개의 컨트롤이 없다면 조금 복잡한 코드로 만들어야 하겠죠!
. ScriptManager 컨트롤은 Ajax 컨트롤을 사용하려면 꼭 넣어야하는 코드입니다. 안그러면 일단 에러가 나거든요!! 이름 그대로 Ajax컨트롤들의 Manager 역활을 담당하는것 같습니다.
. UpdatePanel 컨트롤은 정말 대단한것 같습니다. 기존에 Ajax기술을 구현하려면 Ajax engine를 따로 구현해야 했죠. 그렇게 해야 클라이언트 브라우저에서 깜빡이 없이 데이터가 처리가 될수 있었죠. UpdatePanel안에 감싸져 있는 것들은 페이지 깜빡인 없이 데이터가 처리될 수 있습니다! 따로 Ajax engine를 만들필요 없이말이죠. 정말 대단한 컨트롤인것 같습니다. 하지만 UpdatePanel를 너무 남발하면 않좋다고 합니다. 그리고 Ajax컨트롤들도 너무 많이 사용하면 브라우저가 무거워진다고 하네요.자 그럼 이제 글쓰는 부분의 HTML코드를 보겠습니다.

HTML Code (.aspx페이지)

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

<%--########################방명록 글쓰기 시작 ######################## --%>

※ 주의 닉네임은 1~12자이내,비밀번호는4~12자이네,내용은 1자이상이여야합니다!

Dong wook 방명록 남겨주세요~^^      <asp:Image runat="server" ID="write_Img"

ImageUrl="~/images/btn/imgdown.gif" Style="cursor: pointer;" /></div>

</div>

<asp:Panel runat="server" ID="write_Header2">

<tr>

</div>

이미지삽입 클릭!^^

</div>

</td>

</tr>

 닉네임</td>

<asp:TextBox runat="server" ID="txtuserName" TextMode="SingleLine"

CssClass="Userinfo" MaxLength="12"></asp:TextBox></td>

비밀번호</td>

<asp:TextBox runat="server" ID="txtpassword" TextMode="password" CssClass="Userinfo"

MaxLength="12"></asp:TextBox></td>

</tr>

<tr>

<asp:TextBox runat="server" TextMode="MultiLine" ID="txtContent"

CssClass="txtContent"></asp:TextBox>

</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

<%--########################### 방명록 글쓰기 끝 ####################### --%>

</ContentTemplate>

</asp:UpdatePanel>

위 코드가 아래의 그림처럼 보여지게 되겠지요!

음.. 코드가 좀 길네요! 근데 기본적인 HTML코드를 아시는 분들은 이해하시리라 생각 됩니다. 저는 여기서 주요 요소만 설명해드리겠습니다. 먼저 한눈에 딱 들어오는 코드가 있죠! CollapsiblePanelExtender 컨트롤!! 컨트롤 앞에 cc1: 가 붙은 이유는 젤위에 코드에 아래와 같은 코드가 있기때문이죠.

Register(.aspx페이지)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

TagPrefix="cc1" %>

마치 ASP.NET server 컨트롤과 비슷하게 사용되지 않습니까 <asp:TextBox....> 비슷하죠!!TagPrefix 부분에 자신이 사용한 원하는 이름으로 바꾸셔도 상관없습니다. test로 바꾸시면<test:CollapsiblePanelExtender로 쓰시면 되겠죠^^!아무튼 CollapsiblePanelExtender 컨트롤이 모하는 컨트롤이냐면요!! 스토리보트에서 보면 글쓰는 부분이 닫혔잖아요!!그걸 가능하게 해주는 컨트롤 입니다. 기존에는 자바스크립트로 어렵게 만들어야 했지만 이컨트롤을 이용하면 아주 쉽게 해결이 됩니다. 속성은 아래표와 같습니다.

TargetControlID	확장하거나 축소하는 동작을 실행할 Panel 컨트롤 ID 입니다.
CollapsedSize	축소된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
ExpandedSize	확장된 상태일 때의 대상 컨트롤의 사이즈로써, 픽셀 단위로 지정합니다.
Collapsed	처음 컨트롤이 로딩될 때 축소된 상태 또는 확장된 상태로 화면에 보이게 할 것인지를 정의합니다. (bool형 지정)
AutoCollapse	대상 컨트롤인 Panel에서 마우스를 벗어나게 했을 경우 자동적으로 축소시킬 것인지를 정의합니다(bool형 지정)
AutoExpand	대상 컨트롤인 Panel에 마우스를 올렸을 경우 자동적으로 확장시킬 것인지를 정의합니다. (bool형 지정)
ScrollContents	컨텐츠(내용)가 패널 자신보다 더 클 경우 스크롤바를 보이게 할 것인지를 정의합니다. (bool형 지정)
ExpandControlID / CollapseControlID	확장되거나 축소하게 하는 클릭 이벤트를 줄 컨트롤 ID을 정의합니다.
TextLabelID	Panel 컨트롤이 위치된 곳에서 보여줄 "상태 글자(status text)"를 나타내는 Label 컨트롤의 ID를 정의합니다.
CollapsedText	Panel 컨트롤이 축소되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ExpandedText	Panel 컨트롤이 확장되었을 때 TextLabelID에 의해 정의된 컨트롤에서 보여지는 글자를 정의합니다.
ImageControlID	Panel 컨트롤이 위치된 곳에서 축소된 상태를 가리키는 Image 컨트롤의 ID를 정의합니다.
CollapsedImage	Panel 컨트롤이 축소되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandedImage	Panel 컨트롤이 확장되었을 때ImageControlID에 의해 사용되는 이미지의 경로를 지정합니다.
ExpandDirection	Panel 컨트롤이 상하 또는 좌우로 확장될 것인지에 대한 "Vertical"이나 "Horizontal"을 지정합니다.

위 속성을 보시면 제가 설정한 속성을 한번에 알수 있을 것 입니다.

CollapsiblePanelExtender (.aspx 페이지)

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="write_Header2" ExpandControlID="write_Img"

CollapseControlID="write_Img" ImageControlID="write_Img"

ExpandedImage="~/images/btn/imgUp.gif" CollapsedImage="~/images/btn/imgdown.gif">

</cc1:CollapsiblePanelExtender>

아주 간단하지 않습니까^^ 초보인 저도 이렇게 가능합니다~!
이번 내용은 여기까지 다루도록 하고요 다음 편에서는 이미지 모음이 어떻게 나타나는지 알아 보도록 하겠습니다!!

Posted by happydong

, |

«이전 1 ··· 5 6 7 8 9 10 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

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

AJAX 방명록 만들기[5]

AJAX 방명록 만들기[4]

AJAX 방명록 만들기[3]

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바