ASP.NET With C Shap [hoons.kr] chapter 3

강좌 최초 작성일 : 2004년 04월 01일
  강좌 최종 수정일 : 2004년 08월 17일 

  작성자 : YouKnow(문윤호) youknow@fuz.co.kr
  편집자 : HOONS(박경훈) http://www.hoonsbara.com

  강좌 제목 : ASP.NET Summary Ver.2 Chapter 3 (HTML 서버 컨트롤 사용하기)
 

    1. 텍스트 편집

    사용자로부터 텍스트 값을 입력받고 편집하도록 하는 컨트롤에는 HtmlInputText 컨트롤과 HtmlTextArea 컨트롤이 있다.

<form id="Form1" method="post" runat="server">         <DIV style="DISPLAY: inline; Z-INDEX: 102; LEFT: 24px; WIDTH: 160px; POSITION: absolute; TOP: 24px; HEIGHT: 18px"  ms_positioning="FlowLayout"><FONT face="굴림">사용자 ID :</FONT></DIV>         <!-- type을 text로 설정하여 Text Field로 사용한다. -->         <INPUT style="Z-INDEX: 101; LEFT: 200px; POSITION: absolute; TOP: 24px" type="text" id="Text1"  name="Text1" runat="server">         <DIV style="DISPLAY: inline; Z-INDEX: 103; LEFT: 24px; WIDTH: 160px; POSITION: absolute; TOP: 56px; HEIGHT: 24px" ms_positioning="FlowLayout">비밀번호 :</DIV>         <!-- type을 password로 설정하여 Password Field로 사용한다. -->         <INPUT style="Z-INDEX: 104; LEFT: 200px; POSITION: absolute; TOP: 56px" type="password" id="Password1" name="Password1" runat="server">          <!--              Wrap 프로퍼티는 soft, hard, off 세가지 모드를 가질 수 있다.             soft : Word wrapping O, Line Feed 전송 X             hard : Word wrapping O, Line Feed 전송 O             off  : Word wrapping X, Line Feed 전송 X         -->         <TEXTAREA style="Z-INDEX: 105; LEFT: 24px; WIDTH: 232px; POSITION: absolute; TOP: 96px; HEIGHT: 120px" rows="7" cols="26" id="TEXTAREA1" name="TEXTAREA1" runat="server">         </TEXTAREA>          <TEXTAREA style="Z-INDEX: 106; LEFT: 264px; WIDTH: 232px; POSITION: absolute; TOP: 96px; HEIGHT: 120px" rows="7" cols="26" id="TEXTAREA2" name="TEXTAREA2" wrap="hard" runat="server">         </TEXTAREA>     </form>

 (소스) InputText.aspx

    2. 명령 (Commands)

    서버 코드에 의한 폼의 특정 처리를 위해서 서버로 폼을 전송하는 역할을 하는 것으로 HtmlButton, HtmlInputButton, HtmlInputImage 컨트롤이 있다.

<form id="Form1" method="post" runat="server">         텍스트버튼 : <button runat="server" id="button1" type="button">버튼입니다.</button>         <br>         이미지버튼 : <button runat="server" id="button2" type="button"><img src="../image/write.gif"></button>         <br>         <INPUT type="button" value="Button" id="Button3" name="Button3" runat="server">&nbsp;&nbsp;         <INPUT type="submit" value="Submit" id="Submit1" name="Submit1" runat="server">&nbsp;&nbsp;         <INPUT type="reset" value="Reset" id="Reset1" name="Reset1" runat="server">         <P><input type="image" id="Image1" src="../image/write.gif" name="Image1" runat="server" alt="글쓰기"></P>     </form>

    (소스) Button.aspx

    3. 리스트에서 선택

    HtmlSelect 컨트롤은 윈도 애플리게이션의 콤보박스(combobox)나 리스트박스(listbox) 컨트롤과 같은 역할을 하는 것으로 사용자에게 여러 아이템을 목록을 보여 주고 특정 아이템을 선택하도록 하는 역할을 한다. 이 컨트롤은 <select>...</select> 태그와 맵핑된다. DropDown이나 ListBox 컨트롤을 드래그 한 후 마우스 오른쪽 버튼을 클릭한 뒤 속성을 클릭하면 Text와 Value 값을 입력하여 아이템을 추가 할 수 있다. 이때 크기(size)의 설정에 따라 DropDown 또는 ListBox 형식으로 렌더링 된다.

    4. 이미지 출력

    HtmlImage 컨트롤은 이미지를 보여 주는 역할을 하며 <img> 태그와 맵핑된다. HtmlImage 컨트롤의 속성 창에서 ''src'' 프로퍼티의 확장버튼을 클릭하면 ''이미지 선택'' 창이 열린다. 이미지 선택 창의 중단에 위치한 ''URL 형식''에는 그림에서 보는 것처럼 ''루트 상대적'', ''문서 상대적'', ''절대적''이라는 세가지 항목이 있는데 이것은 이미지의 경로를 표현하는데 사용할 형식을 설정하는 부분이다.

    ① 루트 상대적(Root Relative)    : /프로젝트명/images/logo_xpert.gif

    ② 문서 상대적(Doc Relative)     : images/logo_xpert.gif

    ③ 절대적(Absolute)          : http://서버명/프로젝트명/images/logo_xpert.gif

    5. 상태값 저장

    HtmlInputHidden은 웹 페이지의 폼 내부에 애플리케이션의 프로세싱의 필요한 특정값을 저장할 수 있는 컨트롤이다. 폼의 상태 정보를 저장한다. (서버로의 라운드 트립이 발생하더라도 유지하고 있어야 할 정보에 사용한다.) 사용자가 웹 브라우저의 HTML 소스 보기를 했을 때에는 이 값이 노출되므로 보안이 필요한 데이터를 이 컨트롤에 저장하는 것을 올바르지 않다. 반면 ASP.Net에서는 Session이나 Cookie 객체 외에 State랄 객체가 제공되는데 이를 응용하면 기존에 hidden 태그를 사용했던 부분을 대체할 수 있다.

    6. 내비게이션

    HtmlAnchor 컨트롤은 HTML의 주요 특징 중의 하나인 하이퍼링크를 이용하여 다른 페이지로의 내비게이션을 위한 컨트롤이다.

    7. 값 설정

    HtmlInputCheckBox : 사용자가 체크할 수 있는 박스를 만든다. CheckBox 컨트롤은 Label을 하나씩 포함한다.

    HtmlInputRadioButton : 사용자가 선택할 수 있는 버튼을 만든다. 여러 항목 중에서 사용자에게 하나를 선택하게 할 때 사용된다.

<form id="Form1" method="post" runat="server">         <P><FONT face="굴림"><SELECT id="Select1" name="Select_Drop" runat="server">                 <OPTION value="문윤호" selected>younho</OPTION>                 <OPTION value="윤용운">yabado</OPTION>                 <OPTION value="김재실">nyaong2g</OPTION>                 <OPTION value="김현승">puzzle</OPTION>                 <OPTION value="김유철">nettalk</OPTION>             </SELECT></FONT></P>         <P runat="server"><SELECT id="Select2" size="4" name="Select_List" runat="server">             <OPTION value="김순근">noenemy</OPTION>             <OPTION value="안재우">lancers</OPTION>             <OPTION value="이동범">funnyfox</OPTION>             <OPTION value="김현승">puzzle</OPTION>             <OPTION value="김유철">nettalk</OPTION>         </SELECT></P>         <P runat="server">align : <IMG alt="닷넷 엑스퍼트1" src="/WebTest/image/logo_xpert.gif" id="IMG1" runat="server" align="top"> top</P>         <P runat="server">align : <IMG id="IMG2" alt="닷넷 엑스퍼트2" src="../image/logo_xpert.gif" runat="server" align="middle"> middle</P>         <P runat="server" id="P1">align : <IMG id="IMG3" alt="닷넷 엑스퍼트3" src="/WebTest/image/logo_xpert.gif" runat="server" align="bottom"> bottom</P>         <P>             <input type="hidden" runat="server" id="Hidden1" value="문윤호">             <br>             <a href="http://www.asp.net" runat="server" target="_blank">ASP.Net Site로 이동</a>         </P>         <FONT face="굴림">당신이 좋아하는 여자 연예인은 ?</FONT><br>         <INPUT type="checkbox" id="Checkbox1" name="Checkbox1" runat="server"><FONT face="굴림">&nbsp;전지현</FONT><br>         <INPUT type="checkbox" id="Checkbox2" name="Checkbox2" runat="server"><FONT face="굴림">&nbsp;이영애</FONT><br>         <INPUT type="checkbox" id="Checkbox3" name="Checkbox3" runat="server"><FONT face="굴림">&nbsp;김현주</FONT><br>         <br>         <INPUT type="submit" value="Submit" id="Submit1" name="Submit1" runat="server">         <P><FONT face="굴림"> 다음중 ASP.NET의 특징이 아닌것은?<br>             <INPUT type="radio" id="Radio1" value="Radio1" name="RadioGroup" runat="server">&nbsp;호출시마다 매번 컴파일된다.<br>             <INPUT type="radio" id="Radio2" value="Radio2" name="RadioGroup" runat="server">&nbsp;웹 팜 환경에서 Session 변수를 공유할 수 있다.<br>             <INPUT type="radio" id="Radio3" value="Radio3" name="RadioGroup" runat="server">&nbsp;.NET 플랫폼을 지원한다.<br>             <INPUT type="radio" id="Radio4" value="Radio4" name="RadioGroup" runat="server">&nbsp;OOP를 지원한다.<br>             <INPUT id="Submit2" type="submit" value="Submit" name="Submit2" runat="server"></FONT>         </P>     </form>

(소스) htmlselect.aspx

    체크박스 및 라디오버튼에 무엇이 선택되었는 확인하기 위해 Submit 버튼을 2개 추가 하였다. 디자인 모드에서 버튼을 더블 클릭하면 자동으로 이벤트를 설정하고 해당 위임자 메소드가 추가 되는데 이곳에 선택된 값에 대한 결과를 Display할 수 있도록 작업하자.

private void Submit1_ServerClick(object sender, System.EventArgs e)     {         string strMsg = "선택한 연애인 : ";         if (Checkbox1.Checked == true)             strMsg += " 전지현 ";         if (Checkbox2.Checked == true)             strMsg += " 이영애 ";         if (Checkbox3.Checked == true)             strMsg += " 김현주 ";         Response.Write(strMsg + "<hr>");     }     private void Submit2_ServerClick(object sender, System.EventArgs e)     {         string strMsg = null;                if(Radio1.Checked == true)             strMsg = "정답입니다.<hr>";         else             strMsg = "틀렸습니다. 1장부터 다시 보세요.<hr>";         Response.Write(strMsg);     }

    8. 테이블 관련

    HtmlTable <table> Table을 생성한다. HtmlTableRow <tr> Table 내에 하나의 Row를 생성한다. HtmlTableCell <td> Row 내에 하나의 Cell을 생성한다. 대부분의 HTML 페이지가 테이블 태그에 의해서 그 레이아웃이 결정되기 때문이고 배경색이나 글자 크기 등의 설정에 따라서 사용자에게 보여질 페이지가 천차만별로 변하기 때문이다. VS.NET에서는 이와 같은 테이블의 스타일을 GUI 환경에서 편집할 수 있는 기능을 제공하는데 컨테스트 메뉴에서 ''스타일 작성''을 선택하여 설정할 수 있다.

    9. 파일 전송

    HtmlInputFile 컨트롤은 웹 페이지를 통해 클라이언트에서 서버로 파일을 전송할 때 사용되는 컨트롤이다. 바이너리 모드로 파일을 전송하기 위해선 form의 enctype을 ''multipart/form-date''로 설정해 줘야 한다. ASP.NET에서는 업로드 기능이 기본적으로 제공되므로 더 이상 외부 객체에 의존할 필요가 없다. HtmlInputFile 클래스의 PostedFile 속성은 첨부된 파일에 대해 접근할 수 있으며 SaveAs라는 메소드를 이용해서 파일을 업로드해서 특정 경로에 저장할 수 있다.

    10. HtmlGenericControl : 컨트롤로 변화 되어야 할 HTML 요소를 위한 기본적인 객체 모델 (프로퍼티, 메소드, 이벤트)

    <span | body | div | font | others runat="server" id="컨트롤 ID">
        태그 사이의 내용
    </span | body | div | font | others>

<form id="Form1" method="post" encType="multipart/form-data" runat="server">         <FONT face="굴림">             <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="80%" border="1" runat="server">                 <TR>                     <TD>1.1</TD>                     <TD>1.2</TD>                     <TD>1.3</TD>                 </TR>                 <TR>                     <TD>2.1</TD>                     <TD>2.2</TD>                     <TD>2.3</TD>                 </TR>                 <TR>                     <TD>3.1</TD>                     <TD>3.2</TD>                     <TD>3.3</TD>                 </TR>             </TABLE>         </FONT>         <br>         <INPUT type="file" id="File1" name="File1" runat="server">         <br><br>         <INPUT id="Submit1" type="submit" value="업로드하기" name="Submit1" runat="server">     </form>

   (소스) htmltable.aspx