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

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

재사용 가능한 코드는 개발자가 코드를 작성한 후 소비하는 시간을 줄이는 데 도움이 됩니다. 한 번만 수행하면 여러 위치에서 재사용할 수 있습니다.

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

ASP.Net에는 웹 컨트롤을 만드는 기능이 있습니다. 이러한 컨트롤에는 재사용할 수 있는 코드가 포함되어 있습니다. 요구 사항에 따라 응용 프로그램 전체에서 사용할 수 있습니다.

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

우리의 예에서,

웹 컨트롤을 만들어 보겠습니다.
헤더 구성 요소를 만드는 데 사용됩니다.
여기에는 아래에 언급된 텍스트가 포함됩니다. "Guru99 Tutorials"This Tutorial is for ASP.Net"

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

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

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

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

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

솔루션에 "Guru99Control"이 추가된 것을 볼 수 있습니다.

단계 4) 이제 웹 사용자 컨트롤에 사용자 정의 코드를 추가할 시간입니다. 코드는 순수 HTML 구문을 기반으로 합니다. 다음 코드를 'Guru99Control.ascx' 파일에 추가합니다.

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

코드 설명:-

웹 컨트롤 파일에서는 먼저 테이블 요소를 생성합니다. 이는 표시하는 데 사용되는 2행의 텍스트를 보관하는 데 사용됩니다.

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

다음으로 첫 번째 테이블 행을 정의하고 텍스트를 "Guru99 Tutorials"로 입력합니다.
그런 다음 두 번째 테이블 행을 정의하고 "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 파일을 두 번 클릭하면 됩니다.

폼을 더블클릭하면 폼에 아래 코드가 보일 것입니다. 이것은 ASP.Net 프로젝트에 웹 폼이 추가될 때 Visual Studio에서 추가한 기본 코드입니다.

기본 코드는 양식이 브라우저에서 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

코드 설명:-

첫 번째 단계는 웹 사용자 컨트롤을 등록하는 것입니다. 이는 아래의 기본 매개변수로 구성됩니다.
1. 'Register' 키워드는 웹 사용자 컨트롤을 등록하는 데 사용됩니다.
2. src 매개변수는 컨트롤의 이름을 정의하는 데 사용되며, 이 경우에는 Guru99Control.ascx입니다.
3. tagname 및 Tagprefix는 컨트롤에 지정된 개별 이름입니다. 이는 HTML 페이지에서 일반 HTML 컨트롤로 참조할 수 있도록 하기 위한 것입니다.
다음으로, 이전에 할당된 TagPrefix:TagName을 통해 웹 사용자 컨트롤을 참조합니다. TagPrefix:TagName은 사용자 지정 웹 컨트롤을 사용하려는 표시기입니다. 웹 서버에서 페이지를 처리할 때 TWebControl:WebControl 태그가 사용된 것을 볼 수 있습니다. 그런 다음 그에 따라 'Guru99Control'을 처리합니다. 이 예에서는 TWebControl:WebControl입니다.
1. “Header” 컨트롤에는 선택적 ID가 부여됩니다. 일반적으로 HTML 컨트롤에 ID를 제공하는 것이 좋습니다.
2. 마지막으로, 컨트롤이 웹 서버에서 실행되도록 runat=server 속성입니다. 모든 ASP.Net 컨트롤의 경우, 이는 기본 속성입니다. 모든 ASP.Net 컨트롤(사용자 지정 컨트롤 포함)은 서버에서 실행해야 합니다. 그런 다음 출력이 서버에서 클라이언트로 전송되고 그에 따라 브라우저에 표시됩니다.

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

산출:-

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

웹 구성 구성 파일 asp에 asp.net 컨트롤을 전역으로 등록

때로는 .Net 애플리케이션의 여러 페이지에서 사용자 컨트롤을 사용하고 싶을 수도 있습니다. 이 시점에서는 모든 ASP.Net 페이지에 사용자 컨트롤을 계속 등록하고 싶지 않습니다.

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

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

web.config 파일에 Guru99Control을 등록하는 방법을 살펴보겠습니다.

단계 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 구성 요소가 등록된 제어 줄을 제거하는 것을 잊지 마세요. 이 단계를 수행하지 않으면 'web.config' 파일 대신 'demo.aspx' 파일에서 'Guru99Control.ascx' 파일이 실행됩니다.

<%@ 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.ore/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'입니다.

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

간단한 예를 들어 이전 섹션에서 생성한 'Guru99Control'을 기반으로 구축해 보겠습니다.

우리의 예에서 우리는 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
	</tr>
</table>

코드 설명:-

스크립트 runat=server 속성은 우리가 some.Net 특정 코드를 추가하고 있으며 웹 서버에서 실행되어야 함을 나타내는 데 사용됩니다.

이는 사용자 정의 컨트롤에 추가된 속성을 처리하는 데 필요합니다. 그런 다음 MinValue 속성을 추가하고 기본값 0을 지정합니다.

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

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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자 제한에 미치지 못하기 때문입니다.

요약

ASP.Net에는 사용자 컨트롤을 만드는 기능이 있습니다. 사용자 컨트롤은 응용 프로그램에서 여러 번 사용되는 코드를 갖는 데 사용됩니다. 그런 다음 사용자 정의 컨트롤을 응용 프로그램 전체에서 재사용할 수 있습니다.
사용자 컨트롤을 사용하려면 먼저 ASP.Net 페이지에 등록해야 합니다.
애플리케이션의 모든 페이지에서 사용자 컨트롤을 사용하려면 web.config 파일에 등록하세요.
웹 사용자 컨트롤에 속성을 추가할 수도 있습니다.

당신은 좋아할 것입니다 :

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

ASP.NET 웹 양식에 사용자 컨트롤 등록

웹 구성 구성 파일 asp에 asp.net 컨트롤을 전역으로 등록

관련 기사

웹 컨트롤에 공용 속성 추가

요약