ASP.NET Web Forms 자습서: 사용자 컨트롤 예제

⚡ 스마트 요약

ASP.NET 웹 폼 사용자 컨트롤을 사용하면 재사용 가능한 UI 구성 요소를 한 번만 만들어 여러 페이지에서 사용할 수 있습니다. 이 문서에서는 사용자 컨트롤을 생성하고, 페이지 및 웹 구성 파일(web.config)에 전역적으로 등록하고, 공개 속성을 추가하는 방법을 보여줍니다.

♻️ 재사용 Code: 사용자는 패키지 마크업과 로직을 한 번만 제어하여 애플리케이션 전체에서 재사용할 수 있습니다.
🛠️ 컨트롤 생성: Visual Studio에서 웹 폼 사용자 컨트롤(.ascx)을 추가하고 해당 마크업을 추가합니다.
📝 페이지에서 등록하세요: 한 페이지에서 사용하려면 Register 지시문을 Src, TagName 및 TagPrefix와 함께 사용하십시오.
🌍 전 세계 등록: 모든 페이지에서 사용하려면 web.config 파일의 pages/controls 섹션에 해당 컨트롤을 추가하세요.
🔧 공공재산: MinValue와 같은 속성을 노출하여 페이지에서 컨트롤의 동작을 구성할 수 있도록 합니다.

ASP.Net에서는 재사용 가능한 코드를 만드는 것이 가능합니다. 재사용 가능한 코드는 코드를 다시 작성할 필요 없이 여러 곳에서 사용할 수 있습니다.

재사용 가능한 코드는 개발자가 코드를 작성한 후 소요하는 시간을 줄이는 데 도움이 됩니다. 한 번 작성하면 여러 곳에서 재사용할 수 있기 때문입니다.

ASP.Net에서 사용자 컨트롤 만들기

ASP.Net은 웹 컨트롤을 생성할 수 있는 기능을 제공합니다. 이러한 컨트롤에는 재사용 가능한 코드가 포함되어 있으며, 필요에 따라 애플리케이션 전체에서 사용할 수 있습니다.

ASP.Net에서 웹 사용자 컨트롤을 만드는 방법을 예시를 통해 살펴보겠습니다.

우리의 예에서:

웹 컨트롤을 만들어 보겠습니다.
헤더 구성 요소를 만드는 데 사용됩니다.
다음과 같은 내용이 포함될 것입니다: “Guru"99개의 튜토리얼" 및 "이 튜토리얼은 ASP.Net용입니다."

이전 섹션에서 만든 현재 웹 애플리케이션으로 작업해 보겠습니다. 아래 단계에 따라 웹 사용자 컨트롤을 만들어 보겠습니다.

단계 1) 첫 번째 단계는 웹 사용자 컨트롤을 만들어 Visual Studio 솔루션에 추가하는 것입니다.

Visual Studio의 솔루션 탐색기로 이동하여 DemoApplication 솔루션을 마우스 오른쪽 버튼으로 클릭합니다.
메뉴 항목 '추가' -> '새 항목'을 선택하세요.

단계 2) 다음 단계에서는 웹 사용자 컨트롤을 생성하는 옵션을 선택해야 합니다.

프로젝트 대화 상자에서는 다양한 유형의 구성 요소를 만드는 데 사용할 수 있는 다양한 옵션을 볼 수 있습니다. 왼쪽에 있는 "웹" 옵션을 클릭합니다.
"웹" 옵션을 클릭하면 "웹 폼 사용자 컨트롤" 옵션이 나타납니다. 이 옵션을 클릭하세요.
그런 다음 웹 컨트롤에 이름을 지정합니다.Guru99Control”.
마지막으로 '추가' 버튼을 클릭하면 Visual Studio가 솔루션에 웹 사용자 컨트롤을 추가합니다.

그러면 "Guru"99Control"이 솔루션에 추가되었습니다.

단계 3) 이제 웹 사용자 컨트롤에 사용자 지정 코드를 추가할 차례입니다. 우리의 코드는 순수 HTML 구문을 기반으로 합니다. 다음 코드를 '에 추가하세요.Guru99Control.ascx' 파일.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code 설명:-

웹 컨트롤 파일에서 먼저 테이블 요소를 생성합니다. 이 요소는 "를 표시하는 두 줄의 텍스트를 담는 데 사용됩니다.Guru"99개의 튜토리얼" 및 "이 튜토리얼은 ASP.Net용입니다."
다음으로, 첫 번째 테이블 행을 정의하고 텍스트를 "로 입력합니다.Guru99개의 튜토리얼."
그런 다음 두 번째 테이블 행을 정의하고 "This Tutorial is for ASP.Net"이라는 텍스트를 넣습니다.

알림: 현재로서는 이 코드를 실행하고 결과를 보여줄 수 없습니다. 이 코드가 제대로 작동하는지 확인하는 유일한 방법은 애플리케이션(aspx 파일)에 직접 포함시키는 것입니다. 이 부분은 다음 주제에서 자세히 살펴보겠습니다.

ASP.NET 웹 폼에 사용자 컨트롤 등록하기

앞 섹션에서 사용자 지정 웹 컨트롤을 만드는 방법을 살펴보았습니다. 이 컨트롤을 사용하면 웹 폼에 다음 두 줄을 표시할 수 있습니다.

"Guru99개의 튜토리얼
"이 튜토리얼은 ASP.Net용입니다."

사용자 정의 '컨트롤'을 만든 후에는 웹 애플리케이션에서 이를 사용해야 합니다. 첫 번째 단계는 애플리케이션(Demo.aspx)에 구성 요소를 등록하는 것입니다. 이는 ASP.Net 애플리케이션에서 사용자 정의 웹 컨트롤을 사용하기 위한 필수 조건입니다.

이제 어떻게 이를 달성할 수 있는지 살펴보겠습니다. 아래 단계는 이전 섹션에서 사용자 지정 컨트롤을 만든 내용의 연장선입니다. 이 섹션에서는 해당 컨트롤을 사용하겠습니다. 데모.aspx 웹 폼입니다. 먼저, 사용자 지정 '컨트롤'을 Demo.aspx 파일에 등록하겠습니다.

단계 1) demo.aspx 파일에서 작업하고 있는지 확인하십시오. 웹 사용자 컨트롤은 이 파일에 등록됩니다. .NET 솔루션의 솔루션 탐색기에서 demo.aspx 파일을 두 번 클릭하면 등록할 수 있습니다.

폼을 더블 클릭하면 아래와 같은 코드가 표시될 것입니다. 이 코드는 Visual Studio에서 ASP.Net 프로젝트에 웹 폼을 추가할 때 기본적으로 추가하는 코드입니다. 기본 코드는 폼이 브라우저에서 ASP.Net 웹 폼으로 실행될 수 있도록 필요한 단계를 포함합니다.

단계 2) 이제 사용자 컨트롤을 등록하는 코드를 추가해 보겠습니다. 아래 스크린샷은 위의 기본 코드에 사용자 컨트롤 등록을 추가한 모습을 보여줍니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Code 설명:-

첫 번째 단계는 웹 사용자 컨트롤을 등록하는 것입니다. 여기에는 다음과 같은 기본 매개변수가 포함됩니다.
1. 'Register' 키워드는 웹 사용자 컨트롤을 등록하는 데 사용됩니다.
2. Src 매개변수는 컨트롤의 이름을 정의하는 데 사용되며, 이 경우 이름은 다음과 같습니다. Guru99Control.ascx.
3. TagName과 TagPrefix는 컨트롤에 부여되는 개별 이름입니다. 이렇게 하면 HTML 페이지에서 일반 HTML 컨트롤처럼 참조할 수 있습니다.
다음으로, 이전에 지정한 TagPrefix:TagName을 통해 웹 사용자 컨트롤을 참조합니다. TagPrefix:TagName은 사용자 지정 웹 컨트롤을 사용하겠다는 것을 나타내는 지표입니다. 웹 서버에서 페이지가 처리될 때, TWebControl:WebControl 태그가 사용된 것을 확인할 수 있습니다. 그러면 'Guru99Control'에 따라.
1. "헤더" 컨트롤에는 선택적으로 ID가 부여됩니다. 일반적으로 HTML 컨트롤에 ID를 부여하는 것이 좋습니다.
2. 마지막으로, `runat="server"` 속성은 컨트롤이 웹 서버에서 실행되도록 합니다. 모든 ASP.Net 컨트롤의 경우 이 속성이 기본값입니다. 모든 ASP.Net 컨트롤(사용자 지정 컨트롤 포함)은 서버에서 실행되어야 합니다. 그런 다음 서버에서 클라이언트로 출력이 전송되어 브라우저에 표시됩니다.

위의 코드를 설정하고 프로젝트를 실행하면 비주얼 스튜디오, 아래 출력을 얻게 됩니다.

산출:-

브라우저에 표시된 출력 메시지는 웹 사용자 컨트롤이 성공적으로 실행되었음을 보여줍니다.

웹 구성 파일(web.config)에 ASP.Net 컨트롤을 전역적으로 등록하기

때때로 .Net 애플리케이션의 여러 페이지에서 사용자 정의 컨트롤을 사용해야 할 경우가 있습니다. 이럴 때 모든 ASP.Net 페이지에 사용자 정의 컨트롤을 일일이 등록하는 것은 비효율적입니다.

.Net에서는 'web.config' 파일에서 등록을 수행할 수 있습니다.
web.config 파일은 .Net 프로젝트의 모든 웹 페이지에서 사용되는 공통 구성 파일입니다.
여기에는 ASP.Net 웹 프로젝트에 필요한 구성 세부 정보가 들어 있습니다. 예를 들어, web.config 파일에서 일반적인 구성 중 하나는 다음과 같습니다. 대상 프레임워크 매개변수.
이 매개변수는 애플리케이션에서 사용하는 .Net Framework 버전을 식별하는 데 사용됩니다.

다음은 web.config 파일의 기본 코드 스냅샷입니다. 강조 표시된 부분은 대상 프레임워크 부분입니다.

우리 계정을 어떻게 등록할 수 있는지 알아봅시다. Guruweb.config 파일의 99Control입니다.

단계 1) 솔루션 탐색기에서 web.config 파일을 두 번 클릭하여 엽니다.

web.config 파일을 열면 아래 구성을 볼 수 있습니다. 'web.config'는 프로젝트가 생성될 때 Visual Studio에서 자동으로 추가됩니다. 이것은 ASP.Net 프로젝트를 제대로 작동시키는 데 필요한 기본 구성입니다.

단계 2) 이제 web.config 파일에 구성 요소를 등록해 보겠습니다. 이를 위해 아래 줄을 추가해야 합니다.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

등록 절차는 다음과 같은 하위 단계로 구성됩니다.

라는 태그를 추가하세요. . 이는 컨트롤에 대한 모든 구성이 솔루션의 모든 ASP.Net 페이지에 적용 가능함을 의미합니다.
그만큼 태그는 사용자 컨트롤에 대한 구성을 추가한다는 의미입니다.
다음으로 추가 태그를 사용하여 사용자 컨트롤을 등록합니다. tagPrefix, tagName 및 src의 나머지 매개변수는 이전과 동일합니다.

단계 3) 'demo.aspx' 페이지로 이동하여 해당 컨트롤에 대한 등록 코드를 삭제하는 것을 잊지 마세요. Guru99번 구성 요소입니다. 이 단계를 수행하지 않으면 'Guru'99Control.ascx' 파일은 'web.config' 파일 대신 'demo.aspx' 파일에서 실행됩니다.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

위 코드를 설정하고 Visual Studio를 사용하여 프로젝트를 실행하면 아래와 같은 출력이 나타납니다.

산출:-

출력 메시지는 웹 사용자 컨트롤이 성공적으로 실행되었음을 보여줍니다.

웹 컨트롤에 공용 속성 추가

속성은 모든 컨트롤과 연결된 키-값 쌍입니다. 간단한 예를 들어 보겠습니다. HTML 태그. 태그의 모양은 아래 스크린샷과 같습니다.

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

'div' 태그는 HTML 문서에서 섹션을 만드는 데 사용됩니다. 'div' 태그에는 스타일 속성이라는 속성이 있습니다. 이것은 div 태그에 표시된 텍스트에 다른 스타일을 부여하는 데 사용할 수 있습니다. 일반적으로 div 태그의 코드는 아래와 같습니다.

<div style="color:#0000FF">

따라서 색상 속성은 태그 자체에 대한 추가 정보를 제공하는 키-값 쌍일 뿐입니다. 위의 경우 키 이름은 'style'이고 키 값은 'color:#0000FF'입니다.

마찬가지로 사용자 컨트롤의 경우 컨트롤을 설명하는 고유한 속성을 만들 수 있습니다.

간단한 예를 들어보고 우리의 'Guru이전 섹션에서 생성한 '99Control'을 예로 들어 보겠습니다. 이 예제에서는 MinValue라는 간단한 정수 속성을 추가할 것입니다. 이 값은 사용자 컨트롤에 표시되는 텍스트의 최소 문자 수를 나타냅니다.

이를 실현하기 위해 아래에 언급된 단계를 수행해 보겠습니다.

단계 1) 열기 Guru99Control.ascx 파일에 MinValue 속성을 추가하는 코드를 넣으세요.

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

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Code 설명:-

`runat="server"` 속성은 .Net 관련 코드를 추가하고 있으며 웹 서버에서 실행되어야 함을 나타내는 데 사용됩니다. 이는 사용자 컨트롤에 추가된 모든 속성을 처리하는 데 필요합니다. 그런 다음 `MinValue` 속성을 추가하고 기본값으로 `0`을 지정합니다.

단계 2) 이제 데모.aspx 파일에서 이 속성을 참조해 보겠습니다. 지금 우리가 하고 있는 일은 MinValue 속성을 참조하고 새 값 100을 할당하는 것뿐입니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

알림: 이 코드를 실행해도 아무런 출력이 나타나지 않습니다. 출력 내용이 100자 제한을 초과하기 때문입니다.

자주 묻는 질문

예. AI 비서는 재사용 가능한 구성 요소에 대한 설명을 바탕으로 .ascx 마크업, 코드 비하인드 및 Register 지시문을 생성할 수 있습니다. Rev생성된 TagPrefix, TagName 및 Src 값을 확인하여 프로젝트와 일치하는지 확인하십시오.

부분적으로는 가능합니다. AI는 .ascx 사용자 컨트롤을 ASP.NET Core Razor 컴포넌트 또는 부분 뷰로 변환하고 모델의 차이점을 표시하는 데 도움을 줄 수 있습니다. 하지만 프레임워크마다 상태와 이벤트를 처리하는 방식이 다르기 때문에 마이그레이션에는 여전히 수동 테스트가 필요합니다.

사용자 정의 컨트롤(.ascx)은 기존 컨트롤을 기반으로 구축되며 생성하기 쉽지만 특정 프로젝트에만 국한됩니다. 반면, 사용자 정의 컨트롤은 DLL로 컴파일되어 구축하기는 더 어렵지만 여러 프로젝트에서 재사용할 수 있고 툴박스에서 사용할 수 있습니다.

컨트롤을 해당 페이지에서만 사용하는 경우, 해당 페이지에 직접 등록하십시오. 여러 페이지에서 컨트롤을 사용하는 경우에는 웹 구성 파일(web.config)에 등록하여 모든 페이지에 Register 지시문을 반복해서 입력하는 것을 방지하십시오.

ASP.NET Web Forms 자습서: 사용자 컨트롤 예제

ASP.Net에서 사용자 컨트롤 만들기

ASP.NET 웹 폼에 사용자 컨트롤 등록하기

웹 구성 파일(web.config)에 ASP.Net 컨트롤을 전역적으로 등록하기

웹 컨트롤에 공용 속성 추가

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기

ASP.Net에서 사용자 컨트롤 만들기

ASP.NET 웹 폼에 사용자 컨트롤 등록하기

관련 기사

웹 구성 파일(web.config)에 ASP.Net 컨트롤을 전역적으로 등록하기

웹 컨트롤에 공용 속성 추가

자주 묻는 질문

이 게시물을 요약하면 다음과 같습니다.

뉴스레터 신청하기