'ASP.NET & Core를 다루는 기술'이라는 책을 통해서 ASP.NET 공부를 하기 시작했다. 아직 많이 읽어보질 못해 평가하기는 좀 그렇지만 예제랑 설명이 적절하게 섞여서 나온 책인 것 같다. 위의 책을 바탕으로 공부한 내용을 글로 쓰려한다.
ASP.NET 표준 컨트롤
ASP.NET으로 웹 페이지를 제작할 때 만들어지는 모든 UI를 가리켜 ASP.NET 서버 컨트롤이라 하고, 일반적으로 많이 사용되는 컨트롤을 그룹으로 묶어서 표준 컨트롤이라고 한다.
실습 (Button)
'FrmStandardControl.aspx' 웹 폼을 생성하고 aspx, cs 코드는 다음과 같이 입력한다.
<div>
<h1>표준 컨트롤 (Standard Control)</h1>
<h2>[1] 순수 HTML 사용해서 버튼 만들기</h2>
<input type="button" value="버튼1" id="btnInput" />
<h2>[2] runat 속성을 추가해서 서버 컨트롤 버튼 만들기</h2>
<input type="button" value="버튼2" runat="server" id="btnHtml" />
<h2>[3] ASP.NET 표준 컨트롤을 사용해서 버튼 만들기</h2>
<asp:Button Text="버튼3" runat="server" ID="btnServer" />
</div>protected void Page_Load(object sender, EventArgs e)
{
btnHtml.Value = "HTML 서버 컨트롤 - 버튼";
btnServer.Text = "표준 컨트롤 - 버튼";
}
코드 숨김 파일(cs파일)에서는 순수 HTML에는 접근을 할 수가 없다. 'runat="server"'를 붙인 input 요소에 대해서는 Value 속성으로 접근이 가능하다. ASP.NET 표준 컨트롤은 Text 속성을 통해 버튼의 텍스트를 변경할 수 있는 것이 특징이다.
실습 ( Label 컨트롤을 사용한 현재 날짜와 시간 출력하기 )
웹 페이지에 Label 컨트롤을 집어넣고 웹 브라우저가 로드되는 순간의 서버 측 시간을 구해서 Label에 출력한다.
그러기 위해서 'FrmLabel.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
<div>
현재 시간 :
<asp:Label ID="lblDateTime" runat="server" BackColor="#FFFC0" BorderColor="Red"
BorderStyle="Solid" BorderWidth="1px" ForeColor="Blue" />
</div>protected void Page_Load(object sender, EventArgs e)
{
// 레이블에 현재 날짜와 시간을 출력
lblDateTime.Text = DateTime.Now.ToString();
}
TextBox 컨트롤
TextBox 컨트롤은 사용자에게 어떤 값을 입력받을 때 사용한다. 종류는 크게 세 가지다.
- SingleLine TextBox : <input thpe="text">로 만들고 일반적인 텍스트 값을 입력 받을 때 사용된다.
- Password TextBox : <input type="password">로 만들고 텍스트를 입력해도 텍스트 값을 보여주지 않는다. 비밀번호 입력 양식으로 사용된다.
- MultiLine TextBox : <textarea></textarea>로 만들고 여러 줄을 입력 받을 때 사용된다.
실습 ( TextBox 컨트롤을 사용해 사용자 정보 얻어오기 )
실습을 하기 위해서 'FrmTextBox.aspx' 웹 폼을 만들고 aspx. cs 코드는 다음과 같이 입력한다.
<div>
<h2>SingleLine</h2>
이름 :
<asp:TextBox ID="txtSingleLine" runat="server" CssClass="myTextAlign" ></asp:TextBox>
<h2>MultiLine</h2>
소개 :
<asp:TextBox ID="txtMultiLine" runat="server" TextMode="MultiLine" ></asp:TextBox> <br />
<h2>Password</h2>
암호 :
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> <hr />
<asp:Button ID="btnOK" runat="server" OnClick="Click_btnOK" Text="확인" />
</div>protected void Click_btnOK(object sender, EventArgs e)
{
// 이름 받아 오기
string strName = txtSingleLine.Text;
// 소개 받아 오기
string strIntro = txtMultiLine.Text;
// 암호 받아 오기
string strPassword = txtPassword.Text;
// 출력
Response.Write(
strName + "<br />"
+ strIntro + "<br />"
+ strPassword + "<br />");
}
새 텍스트 박스에 텍스트를 입력하고 '확인' 버튼을 누르면 화면 상단에 다음과 같이 입력한 텍스트가 출력이 된다.
실습 ( Button 컨트롤을 사용해 명령어 실행하기 )
버튼을 클릭할 때마다 텍스트박스에 있는 숫자 값을 1 증가시키거나 1 감소시키는 코드를 작성할 거다.
실습을 위해 'FrmButton.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
<div>
<asp:TextBox ID="txtNum" runat="server" ></asp:TextBox>
<asp:Button ID="btnUp" runat="server" OnClick="btnUp_Click" Text=" 증가 " />
<asp:Button ID="btnDown" runat="server" OnClick="btnDown_Click" Text=" 감소 " />
</div>protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
txtNum.Text = "0"; // 처음 로드할 때만 0으로 초기화
}
}
protected void btnUp_Click(object sender, EventArgs e)
{
txtNum.Text = Convert.ToString(Convert.ToInt32(txtNum.Text) + 1);
}
protected void btnDown_Click(object sender, EventArgs e)
{
txtNum.Text = Convert.ToString(Convert.ToInt32(txtNum.Text) - 1);
}'Page.IsPostBack'을 통해서 처음 로드했는지 안 했는지 판별을 할 수 있다.
LinkButton 컨트롤
링크 버튼 컨트롤은 사용자가 어떤 명령을 서버 측에 전달할 때 사용한다. 웹 페이지에서는 <a>로 출력된다.
실습 ( LinkButton 컨트롤을 사용해 링크 모양의 버튼 만들기 )
'FrmLinkButton.aspx' 웹 폼을 만들어주고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:LinkButton ID="lnkDotNetKorea" runat="server" OnClick="lnkDotNetKorea_Click">닷넷코리아로 이동</asp:LinkButton>
</div>
... 생략 ...... 생략 ...
protected void lnkDotNetKorea_Click(object sender, EventArgs e)
{
// 닷넷코리아 이동
Response.Redirect("http://www.dotnetkorea.com/");
}
... 생략 ...
ImageButton 컨트롤
이미지 버튼 컨트롤은 사용자가 어떤 명령을 서버 측에 전달할 때 사용한다. 웹 페이지에서는 <input type="image">로 출력된다.
실습 ( ImageButton 컨트롤을 사용해 명령어 실행하기 )
'FrmImageButton.aspx' 웹 폼을 만들고 aspx, cs 코드는 다음과 같이 입력한다.
... 생략 ...
<div>
<asp:ImageButton ID="imgWrite" runat="server" AlternateText="글쓰기" OnClick="imgWrite_Click" ToolTip="글쓰기" style="width: 14px" />
<asp:ImageButton ID="imgList" runat="server" AlternateText="리스트" OnClick="imgList_Click" ToolTip="리스트" style="width: 14px" />
</div>
... 생략 ...... 생략 ...
protected void Page_Load(object sender, EventArgs e)
{
imgWrite.ImageUrl = "/images/btn_post.gif";
imgList.ImageUrl = "./images/btn_list.gif";
}
protected void imgWrite_Click(object sender, ImageClickEventArgs e)
{
Response.Write("글쓰기 버튼 클릭됨.<br />");
}
protected void imgList_Click(object sender, ImageClickEventArgs e)
{
Response.Write("리스트 버튼 클릭됨.<br />");
}
... 생략 ...- 페이지를 로드할 때 각 이미지를 ImageUrl 속성에서 지정할 수 있다.
- 이미지는 따로 images 폴더를 만들어 이미지를 참고해도 상관없다.
