3. ASP.NET 웹 폼

  • 16 minutes to read

ASP.NET 웹 응용 프로그래밍은 C# 또는 Visual Basic의 기능 중에서 웹 사이트 제작 관련 기술을 모은 집합입니다. 앞으로 웹 사이트 제작에 필요한 필수 구성 요소를 골고루 살펴볼 것이니 웹 프로그래밍의 재미에 푹 빠져보길 바랍니다. ASP.NET은 크게 웹 폼과 MVC로 구분하지만 기본적으로는 ASP.NET 웹 폼, 그리고 두 영역에서 두루 사용할 수 있는 명령어 부분을 의미합니다. 이 강의에서는 ASP.NET 웹 폼 부분을 공부해보겠습니다.

03_01 ASP.NET과 Core를 다루는 기술 3장 ASP.NET 웹 폼과 윈 폼

https://youtu.be/En3IQp-9aVc

3.1. ASP.NET 웹 응용 프로그램

ASP.NET 웹 페이지 하나는 디자인을 담당하는 Default.aspx와 코드를 담당하는 Default.aspx.cs로 표현합니다.  ASPX 파일  ASP.NET 웹 폼 페이지라고 합니다.  ASPX.CS 파일  코드 비하인드(숨김) 페이지라고 합니다.

그림 3 1 ASP.NET 웹 페이지

3.1.1 Blazor 컴포넌트 구조  .razor 파일  Blazor 컴포넌트라고 합니다.  .razor.cs 파일  코드 비하인드(숨김) 파일이라고 합니다.

3.2 웹 폼의 개요 HTML, CSS, 자바스크립트의 확장자는 일반적으로 *.html, *.css, *.js다. 마찬가지로 ASP.NET 웹 페이지의 확장자는 *.aspx이며, 이 aspx 페이지 하나를 가리켜 ASP.NET 웹 폼이라고 부릅니다. 일반적인 HTML 페이지는 기본 태그로 body 태그까지 두지만, ASP.NET 페이지는 body 태그 안에 form 태그를 하나 더 두고 그 안에 모든 소스 코드를 작성합니다. ASP.NET 웹 폼은 서버 측 자원에 접근하기 쉽고, 기존 HTML 페이지가 할 수 없었던 많은 기능과 웹 사이트 제작에 필요한 많은 기능을 손쉽게 사용하게 도와줍니다. Visual Studio 2019에서 자동으로 만들어주는 aspx 페이지는 다음과 같습니다.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>웹 폼</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

3.2.1 System.Web.UI.Page 클래스 ASP.NET의 각 웹 페이지는 Page 클래스에서 모든 기능을 상속받습니다. Page 클래스는 웹 사이트 제작에 필요한 모든 구성 요소를 지니고 있습니다. Page 클래스를 상속받으므로 해당 웹 폼 페이지는 아주 손쉽게 웹 페이지를 구성할 수 있습니다. Visual Studio 2019에서 자동으로 만들어주는 코드 비하인드 페이지인 aspx.cs 페이지의 기본 코드는 다음과 같습니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DevASPNET
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Page 클래스에서 제공하는 이벤트 중에서는 Load 이벤트가 가장 중요합니다. 각각의 웹 페이지가 로드될 때 어떤 처리를 하고 싶다면 Page_Load 이벤트 처리기를 사용하면 됩니다.

3.2.2 ASP.NET 서버 컨트롤 ASP.NET은 서버 컨트롤(Server Control)을 많이 제공합니다. 서버 컨트롤이란 HTML 태그의 버튼, 텍스트박스, 레이블 같이 웹 페이지에서 모양과 기능을 지닌 표현 단위 하나를 말합니다. 그리고 서버 컨트롤이 ASP.NET 웹 페이지에 적용되고 C# 코드와 연동되어 좀 더 나은 모양과 기능을 가지는 것을 ASP.NET 서버 컨트롤이라고 합니다. 이 강의에서는 몇 가지 컨트롤을 사용하여 웹 폼 명령어를 학습하고 앞으로 이어지는 장에서 각각의 컨트롤을 좀 더 자세하게 살펴보겠습니다. Visual Studio의 도구 상자를 열면 많은 범주의 서버 컨트롤 목록을 살펴볼 수 있습니다.

그림 3 2 Visual Studio 2019 도구 상자

ASP.NET 웹 폼에서 제공하는 서버 컨트롤의 종류는 HTML 서버 컨트롤, Web 서버 컨트롤(표준 컨트롤), 유효성 검사(Validation) 컨트롤, 사용자 정의 컨트롤(User Control) 등으로 구분됩니다.

3.2.3 runat=”server” ASP.NET은 모든 HTML 구성 요소에 ID 속성과 runat=”server” 속성을 주어 HTML 태그에서 ASP.NET 서버 컨트롤로 바꿀 수 있습니다. 서버 컨트롤로 바꾸면 코드 숨김 파일인 C# 코드에서 서버 컨트롤 개체에 직접 접근해서 속성을 통한 데이터를 주고 받거나, 이벤트 처리기를 통해 서버 측 기능을 구현할 수 있습니다.

<참고> HTML 태그와 ASP.NET 서버 컨트롤 서버 컨트롤을 사용하는 프로그래밍 방식은 윈도 폼과 WPF 프로그래밍 방식(이벤트 드리븐 방식)과 같아서 컨트롤과 코드를 사용하여 페이지를 개발할 수 있으므로 굉장히 편리합니다. 다만, 이런 자동화된 기능을 구현하다 보니 쓸데없는 HTML 태그가 내부에 많이 생성되어 네트워크 트래픽이 증가합니다. 최근 웹 프로그래밍의 추세는 군더더기 없는 깔끔한 HTML 소스만 사용되는, 좀 더 클린 HTML을 반환시켜 주는 MVC 프레임워크의 방식을 선호합니다. 이 책을 통해 웹 폼과 MVC의 장점을 모두 익혀서 웹 사이트를 제작하는 최적의 방식을 습득합니다. </참고>

3.2.4 ASP.NET 관련 확장자 ASP.NET 관련 파일의 확장자는 html, css, js 등을 비롯하여 새로운 형태가 많다. 확장자와 관련된 내용은 차차 계속 설명하겠지만, 대표적인 것만 간단히 정리해봅니다.  aspx : ASP.NET의 기본 확장자. 웹 폼을 의미합니다.  ascx : 단독으로는 실행되지 않으며 aspx에 포함되어서 실행되는 웹 폼 사용자 정의 컨트롤을 의미합니다.  master: 웹 사이트의 공통 레이아웃을 담고 있는 마스터 페이지에 대한 확장자다.  cshtml : ASP.NET MVC에서의 뷰(View) 페이지를 C# 문법으로 작성하는 페이지입니다.  config: 각종 환경 설정을 하는 파일입니다. web.config, bundle.config 등이 있습니다.

3.3 [실습] 웹 프로젝트 생성 및 웹 폼 출력하기 3.3.1 소개 2장에서 미리 살펴본 실습을 참고하여 ASP.NET 페이지의 실행 단계를 다음과 같이 다시 한 번 복습해봅니다. 이번 실습에서 만들 DevASPNET 웹 프로젝트는 3~4장에서 사용할 것입니다.

<참고> 이번 내용을 "웹 프로젝트 생성 및 웹 폼 출력하기"라는 제목의 동영상 강좌로도 마련하였으니 참고하기 바랍니다.

https://youtu.be/du4MR-D_uL8 </참고>

3.3.2 따라하기 ① Visual Studio를 실행하고 ASP.NET 웹 응용 프로그램을 다음과 같이 생성합니다. 이름 위치 ASP.NET 템플릿 선택 폴더 및 핵심 참조 추가 DevASPNET C:\ASP.NET ASP.NET 4.6 템플릿-Empty 표에는 웹 프로젝트를 생성하는 데 필요한 정보가 다 들어 있습니다. 이번에는 다시 한 번 전체 순서를 소개할 테니 잘 숙지한 뒤 다음부터는 제시된 표를 보고 생성하도록 합니다.

  • <파일 > 새로 만들기 > 프로젝트>를 클릭하여 새로운 웹 프로젝트를 다음과 같이 생성합니다. 그림 3 3 새 프로젝트 메뉴

  • 새 프로젝트 생성 화면에서 <Visual C# > 웹 > .NET Framework 4.6 > ASP.NET 웹 응용 프로그램>을 선택하고 프로젝트의 위치 및 이름을 다음 그림과 같이 지정합니다. 프로젝트 이름은 DevASPNET으로 설정하였습니다. 그림 3 4 프로젝트 이름 및 위치 설정

  • 템플릿 선택 창에서는 Empty를 선택 후 <확인> 버튼을 눌러 프로젝트를 생성합니다. 그림 3 5 ASP.NET 템플릿 선택 화면

  • 다음은 DevASPNET이란 이름으로 생성된 웹 프로젝트의 기본 모습입니다. 그림 3 6 생성된 DevASPNET 프로젝트

② 솔루션 탐색기의 프로젝트에 마우스 오른쪽 버튼을 클릭해서 <추가 > 새 항목> 메뉴를 클릭합니다. [Ctrl]+[Shift]+[A] 단축키로 바로 실행할 수도 있습니다. 그림 3 7 새 항목 추가

③ 새 항목 추가 화면에서 다음 그림과 같이 <웹 폼> 항목을 선택하고 이름에 FrmASPNET.aspx를 입력 후 추가 학습: 버튼을 클릭하여 프로젝트에 웹 폼 페이지를 하나 추가합니다. 그림 3 8 웹 폼 선택 및 페이지 생성

④ 추가된 FrmASPNET.aspx 페이지에 다음 그림과 같이 한 줄짜리 HTML 코드를 입력합니다. 그림 3 9 FrmASPNET.aspx 페이지에 코드 입력

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="FrmASPNET.aspx.cs" Inherits="DevASPNET.FrmASPNET" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <em>ASP.NET의 세계에 오신 것을 환영합니다.</em>
    </div>
    </form>
</body>
</html>

(5) 솔루션 탐색기에서 다음과 같이 FrmASPNET.aspx에 마우스 오른쪽 버튼을 클릭한 후 <시작 페이지로 설정> 메뉴를 선택합니다.. 그림 3 10 시작 페이지로 설정

(6) 시작 페이지로 선택된 파일을 [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.

그림 3 11 ASP.NET 페이지를 웹 브라우저로 실행

3.3.3 마무리 앞으로 이와 같이 웹 사이트를 하나 제작하여 그 안에 aspx 파일을 여러 개 두고 해당 파일을 시작 페이지로 설정 후 실행시켜 보는 과정을 반복하면서 ASP.NET 관련 주요 명령어 및 환경에 대해 이해하도록 합니다.

3.4 이벤트 처리기 3.4.1 Page_Load 이벤트 처리기 Page_Load 메서드는 ASP.NET 웹 사이트에서 각각의 웹 페이지가 실행되는 시점을 나타냅니다. 즉, 페이지가 로드될 때 발생되는 이벤트를 잡아내는 이벤트 처리기(event handler)에 해당됩니다. C# 콘솔 응용 프로그램에서 프로그램의 진입점을 나타내는 Main 메서드와 같습니다. <코드> using System;

namespace DevASPNET { public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // 코드 비하인드 파일(페이지) } } }


3.4.2	 Button_Click 이벤트 처리기
버튼이름_Click으로 만들어지는 메서드로 해당 버튼이 클릭되는 순간에 실행되는 코드입니다. ASP.NET 웹 폼에서 작성되는 프로그램은 대부분 사용자가 버튼 같은 컨트롤을 클릭할 때 무엇인가 실행됩니다. 이때 버튼의 클릭 이벤트를 잡아내는 이벤트 처리기를 사용합니다. 다음 코드는 특정 버튼을 클릭했을 때 화면에 “반갑습니다.”라는 문자열을 출력시켜 주는 간단한 예다. C# 콘솔 응용 프로그램에서의 Console.Write()에 해당하는 ASP.NET의 명령어는 Response.Write() 메서드입니다. 
<코드>
using System;

namespace DevASPNET
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnClick_Click(object sender, EventArgs e)
        {
            Response.Write("반갑습니다.<br/>");
        }
    }
}

3.4.3 기타 이벤트 처리기 앞으로 서버 컨트롤을 학습하면서 각각의 컨트롤이 가지고 있는 이벤트 처리기를 계속 알아갈 것입니다. 수많은 이벤트 처리기와 속성, 메서드가 있으므로 그때그때 필요한 내용을 따라하기 방식으로 학습합니다. 처음부터 모든 걸 다 암기한다는 생각은 버리고 하나씩 찾아가면서 기능을 배우도록 합니다. 사실 어떤 개발자도 컨트롤의 속성과 이벤트를 모두 기억하지 못할 것입니다. 다만, 기본적인 기능을 학습한 뒤 프로그래밍을 하다 보면 컨트롤 사용법에 대해서 익숙해지고, 그런 다음에는 특정 컨트롤에 어떤 기능이 있는지 있다면 어떻게 사용하는지에 대한 자료를 검색 엔진에서 쉽게 찾아 참고할 수 있습니다.

3.5 웹 폼 레이아웃 레이아웃(layout)은 ASP.NET 웹 폼에서 각종 컨트롤의 위치를 결정합니다. ASP.NET의 레이아웃은 CSS 라이브러리인 부트스트랩(Bootstrap) 같은 클라이언트 라이브러리와 함께 사용하면 더욱 효과적이므로 이 책에서는 ASP.NET 페이지를 꾸미는 데 부트스트랩을 적극 활용할 것입니다. 추가 학습: 부트스트랩에 대한 정보는 다음 사이트를 참고하기 바랍니다.  https://getbootstrap.com/

3.6 [실습] Blazor로 Home, About, Contact 페이지 만들고 메뉴 등록하기

동영상 강의

03_02 MemoEngineCom 이름의 ASP.NET Web Forms 프로젝트 및 클래스 라이브러리 프로젝트 추가 및 MVC 5 업데이트   https://youtu.be/0RQVfAg4eC8

VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다. www.VisualAcademy.com
박용준 강사의 모든 동영상 강의는 데브렉에서 독점으로 제공됩니다. www.devlec.com