ASP.NET 컨트롤: 확인Box, 라디오버튼, 목록Box

Web Forms에 ASP.Net 컨트롤 추가

ASP.Net은 텍스트 상자나 레이블과 같은 컨트롤을 폼에 추가할 수 있는 기능을 제공합니다.

웹 폼에서 사용할 수 있는 다른 컨트롤들을 살펴보고 공통적인 속성들을 알아보겠습니다.

우리의 예제에서는 다음과 같은 기능을 가진 하나의 양식을 만들 것입니다.

1. 사용자가 자신의 이름을 입력할 수 있는 기능입니다.
2. 사용자가 거주하는 도시를 선택할 수 있는 옵션입니다.
3. 사용자가 성별에 대한 옵션을 입력할 수 있는 기능입니다.
4. 사용자가 배우고 싶은 강좌를 선택하는 옵션입니다. 둘 다에 대한 선택이 있을 것입니다. C# 그리고 ASP.Net.

각 컨트롤을 자세히 살펴보겠습니다. 위에서 언급한 기능을 사용하여 양식을 작성하도록 추가해 보겠습니다.

단계 1) 첫 번째 단계는 데모 웹 양식에 대한 양식 디자이너를 여는 것입니다. 이렇게 하면 도구 상자에서 컨트롤을 끌어서 놓을 수 있습니다. 웹 양식.

Designer 웹 양식을 열려면 다음 단계를 따르세요.

• 솔루션 탐색기에서 Demo.aspx 파일을 마우스 오른쪽 버튼으로 클릭하고
• 메뉴 옵션 디자이너 보기를 선택합니다.

위 단계를 수행하면 아래와 같이 양식 디자이너를 볼 수 있습니다.

이제 컨트롤을 하나씩 추가해 보겠습니다.

라벨 컨트롤

레이블 컨트롤은 폼에서 사용자에게 텍스트나 메시지를 표시하는 데 사용됩니다. 레이블 컨트롤은 일반적으로 다른 컨트롤과 함께 사용됩니다. 예를 들어, 텍스트 상자 컨트롤과 함께 레이블을 추가하는 경우가 많습니다. 레이블은 사용자가 텍스트 상자에 무엇을 입력해야 하는지 알려줍니다. 아래 예제를 통해 이를 구현하는 방법을 살펴보겠습니다. '이름'이라는 레이블을 사용하겠습니다. 이 레이블은 나중에 추가할 텍스트 상자 컨트롤과 함께 사용됩니다.

단계 1) 첫 번째 단계는 아래 그림과 같이 도구 상자에서 '레이블' 컨트롤을 웹 폼으로 드래그하는 것입니다.

단계 2) 라벨을 추가한 후 다음 단계를 따르세요.

1. 레이블 컨트롤을 마우스 오른쪽 버튼으로 클릭하여 속성 창으로 이동합니다.
2. 속성 메뉴 옵션을 선택하세요.

단계 3) 속성 창에서 Text 속성 값을 Name으로 변경합니다.

마찬가지로 컨트롤의 ID 속성 값도 lblName으로 변경합니다. 컨트롤에 의미 있는 ID를 지정하면 코딩 단계에서 컨트롤에 액세스하기가 더 쉬워집니다. 이는 아래에 나와 있습니다.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

웹 양식에 이름 레이블이 나타나는 것을 볼 수 있습니다.

텍스트 상자

텍스트 상자는 사용자가 웹 양식 애플리케이션에 텍스트를 입력할 수 있도록 하는 데 사용됩니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 사용자가 이름을 입력할 수 있는 텍스트 상자 하나를 양식에 추가합니다.

단계 1) 첫 번째 단계는 아래 그림과 같이 도구 상자에서 텍스트 상자 컨트롤을 웹 폼으로 드래그하는 것입니다.

아래는 텍스트 상자 컨트롤이 폼에 추가된 후 폼 디자이너에서 보이는 모습입니다.

단계 2) 텍스트 상자를 추가한 후에는 ID 속성을 변경해야 합니다.

• 텍스트 상자 컨트롤을 마우스 오른쪽 버튼으로 클릭하여 속성 창으로 이동합니다.
• 속성을 선택한 다음
• 텍스트 상자의 ID 속성을 txtName으로 변경하세요.

위의 변경을 하면 다음과 같은 출력이 표시됩니다.

산출:-

목록 상자

Listbox는 웹 양식에 항목 목록을 보여주는 데 사용됩니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 양식에 목록 상자를 추가하여 일부 도시 위치를 저장합니다.

단계 1) 첫 번째 단계는 아래 그림과 같이 도구 상자에서 목록 상자 컨트롤을 웹 폼으로 드래그하는 것입니다.

단계 2) 리스트박스를 폼으로 드래그하면 별도의 사이드 메뉴가 나타납니다. 이 메뉴에서 '항목 편집' 메뉴를 선택하세요.

단계 3) 이제 목록 상자에 목록 항목을 추가할 수 있는 대화 상자가 표시됩니다.

1. 목록 항목을 추가하려면 추가 버튼을 클릭하세요.
2. 목록 항목의 텍스트 값에 이름을 지정합니다. 이 예에서는 Mumbai입니다. 1단계와 2단계를 반복하여 Mangalore와 Hyderabad에 대한 목록 항목을 추가합니다.
3. OK 버튼을 클릭하십시오.

단계 4) 속성 창으로 이동하여 컨트롤의 ID 속성 값을 lstLocation으로 변경합니다.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

출력 결과를 보면 리스트박스가 폼에 추가된 것을 분명히 확인할 수 있습니다.

라디오 버튼

라디오 버튼은 사용자가 선택할 수 있는 항목 목록을 표시하는 데 사용됩니다. 아래 예시를 통해 이를 어떻게 구현할 수 있는지 살펴보겠습니다. 남성/여성 옵션에 대한 라디오 버튼을 추가하겠습니다.

단계 1) 첫 번째 단계는 도구 상자에서 '라디오 버튼' 컨트롤을 웹 폼으로 드래그하는 것입니다(아래 이미지 참조). '남성'과 '여성' 옵션을 위한 라디오 버튼 두 개를 추가해야 합니다.

단계 2) 라디오버튼이 추가되면 'text' 속성을 변경하세요.

• 'Radiobutton 컨트롤'을 클릭하여 속성 창으로 이동합니다.
• Radio 버튼의 text 속성을 'Male'로 변경합니다.
• '여성'으로 변경하려면 동일한 단계를 반복하십시오.
• 또한 해당 컨트롤의 ID 속성을 rdMale 및 rd Female로 변경합니다.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

출력 결과를 보면 라디오 버튼이 폼에 추가된 것을 분명히 확인할 수 있습니다.

체크박스

체크박스는 사용자가 여러 선택지를 고를 수 있는 옵션 목록을 제공하는 데 사용됩니다. 아래 예시를 통해 이를 구현하는 방법을 살펴보겠습니다. 웹 폼에 체크박스 두 개를 추가해 보겠습니다. 이 체크박스는 사용자가 학습 여부를 선택할 수 있도록 합니다. C# 또는 ASP.Net.

단계 1) 첫 번째 단계는 아래 그림과 같이 도구 상자에서 체크박스 컨트롤을 웹 폼으로 드래그하는 것입니다.

단계 2) 체크박스를 추가했으면 체크박스의 ID 속성을 변경하세요.

• 체크박스 컨트롤을 클릭하여 속성 창으로 이동합니다.
• 해당 컨트롤의 ID 속성을 'chkC' 및 'chkASP'로 변경합니다.

또한 체크박스 컨트롤의 텍스트 속성을 'C#'으로 변경합니다. 다른 체크박스 컨트롤에 대해서도 동일한 작업을 수행하고 'ASP.Net'으로 변경합니다.

1. 체크박스의 ID 속성을 'chkASP'로 변경하세요.

2. 체크박스의 ID 속성을 chkC로 변경하세요.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

출력 결과를 보면 체크박스가 폼에 추가된 것을 분명히 확인할 수 있습니다.

단추

버튼은 사용자가 클릭하여 양식 작성을 시작할 수 있도록 하는 데 사용됩니다. 아래 예시를 통해 이를 구현하는 방법을 살펴보겠습니다. '제출' 버튼을 추가하여 양식에 입력된 모든 정보를 제출할 것입니다.

단계 1) 첫 번째 단계는 아래 그림과 같이 도구 상자에서 버튼 컨트롤을 웹 폼으로 드래그하는 것입니다.

단계 2) 버튼이 추가되면 버튼 컨트롤을 클릭하여 속성 창으로 이동합니다. 단추 컨트롤의 텍스트 속성을 제출로 변경합니다. 그리고 버튼의 ID 속성을 'btnSubmit'으로 변경하세요.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

출력에서 버튼이 양식에 추가되었음을 명확하게 확인할 수 있습니다.

ASP.Net의 이벤트 처리기

웹 양식으로 작업할 때 컨트롤에 이벤트를 추가할 수 있습니다. 이벤트는 작업이 수행될 때 발생하는 것입니다. 아마도 가장 일반적인 작업은 양식의 버튼을 클릭하는 것입니다.

웹 양식에서는 해당 aspx.cs 파일에 코드를 추가할 수 있습니다. 이 코드는 양식에서 버튼을 눌렀을 때 특정 작업을 수행하는 데 사용할 수 있습니다. 이는 일반적으로 Web Forms에서 가장 일반적인 이벤트입니다. 이를 어떻게 달성할 수 있는지 살펴보겠습니다.

우리는 이것을 간단하게 만들 것입니다. 사용자가 입력한 이름을 표시하려면 버튼 컨트롤에 이벤트를 추가하기만 하면 됩니다. 이를 달성하기 위해 아래 단계를 따르십시오.

단계 1) 먼저 웹 폼에서 버튼을 두 번 클릭해야 합니다. 그러면 Visual Studio에서 버튼의 이벤트 코드가 나타납니다.

btnSubmit_Click 이벤트는 웹 폼 디자이너에서 버튼을 두 번 클릭하면 Visual Studio에서 자동으로 추가됩니다.

단계 2) 이제 제출 이벤트에 코드를 추가하여 이름 텍스트 상자 값과 사용자가 선택한 위치를 표시해 보겠습니다.

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code 설명:-

1. 위 코드는 아주 간단한 작업을 수행합니다. 이름 텍스트 상자 컨트롤의 값을 가져와 Response 객체를 통해 클라이언트로 보냅니다. 따라서 문자열 "를 입력하려면 위 코드를 사용하면 됩니다.Guru이름 입력란에 "99"를 입력하면 txtName.Text의 값은 '가 됩니다.Guru99 '.
2. 다음 코드 줄은 'lstLocation.SelectedItem.Text' 속성을 통해 리스트박스에서 선택된 값을 가져옵니다. 그런 다음 Response.Write 메서드를 사용하여 이 값을 클라이언트로 다시 출력합니다.
3. 마지막으로 폼의 모든 컨트롤을 숨깁니다. 이렇게 하지 않으면 모든 컨트롤과 응답 값이 함께 표시됩니다. 일반적으로 사용자가 이름, 위치, 성별 등의 정보를 모두 입력하면 다음 페이지에는 입력하지 않은 정보만 표시되어야 합니다. 사용자는 이름, 성별, 위치 컨트롤을 다시 보고 싶어하지 않습니다. 하지만 ASP.Net은 이를 알지 못하므로 기본적으로 사용자가 제출 버튼을 클릭하면 모든 컨트롤이 다시 표시됩니다. 따라서 사용자가 원하는 결과만 볼 수 있도록 모든 컨트롤을 숨기는 코드를 작성해야 합니다.

위와 같이 변경하면 다음과 같은 결과가 나타납니다.

산출:-

출력 화면에서 다음 단계를 수행하십시오.

1. 이름을 대세요 Guru이름 입력란에 99를 입력하세요.
2. 방갈로르 목록 상자에서 위치를 선택하세요.
3. 제출 버튼을 클릭합니다.

이렇게 하면 '가 표시됩니다.Guru페이지에는 '99'와 '방갈로르'라는 위치가 표시됩니다.

자주 묻는 질문