ASP.NET 컨트롤: 확인Box, 라디오버튼, 목록Box, 텍스트 상자, 레이블
제이콥 리
Web Forms에 ASP.Net 컨트롤 추가
ASP.Net에는 텍스트 상자, 레이블 등의 컨트롤을 폼에 추가하는 기능이 있습니다.
웹 양식에 사용할 수 있는 다른 컨트롤을 살펴보고 공통 속성 중 일부를 살펴보겠습니다.
우리의 예제에서는 다음과 같은 기능을 가진 하나의 양식을 만들 것입니다.
- 사용자가 자신의 이름을 입력할 수 있는 기능입니다.
- 사용자가 거주하는 도시를 선택하는 옵션
- 사용자가 성별에 대한 옵션을 입력할 수 있는 기능입니다.
- 사용자가 배우고 싶은 강좌를 선택하는 옵션입니다. 둘 다에 대한 선택이 있을 것입니다. C# 및 ASP.Net
각 컨트롤을 자세히 살펴보겠습니다. 위에서 언급한 기능을 사용하여 양식을 작성하도록 추가해 보겠습니다.
단계 1) 첫 번째 단계는 데모 웹 양식에 대한 양식 디자이너를 여는 것입니다. 이렇게 하면 도구 상자에서 컨트롤을 끌어서 놓을 수 있습니다. 웹 양식.
Designer 웹 양식을 열려면,
- 솔루션 탐색기에서 Demo.aspx 파일을 마우스 오른쪽 버튼으로 클릭하고
- 메뉴 옵션 디자이너 보기를 선택합니다.
위 단계를 수행하면 아래와 같이 양식 디자이너를 볼 수 있습니다.
이제 컨트롤을 하나씩 추가해 보겠습니다.
라벨 컨트롤
레이블 컨트롤은 폼에서 사용자에게 텍스트나 메시지를 표시하는 데 사용됩니다. 레이블 컨트롤은 일반적으로 다른 컨트롤과 함께 사용됩니다. 일반적인 예로는 텍스트 상자 컨트롤과 함께 레이블이 추가되는 경우가 있습니다. 레이블은 텍스트 상자에 채워질 내용을 사용자에게 알려줍니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 'name'이라는 레이블을 사용합니다. 이는 이후 섹션에서 추가될 텍스트 상자 컨트롤과 함께 사용됩니다.
단계 1) 첫 번째 단계는 아래에 표시된 대로 도구 상자에서 '라벨' 컨트롤을 웹 양식으로 끌어 놓는 것입니다.
단계 2) 라벨을 추가한 후 다음 단계를 따르세요.
- 라벨 컨트롤을 마우스 오른쪽 버튼으로 클릭하여 속성 창으로 이동합니다.
- 속성 메뉴 옵션을 선택하세요
단계 3) 속성 창에서 Text 속성의 이름을 Name으로 변경합니다.
마찬가지로 컨트롤의 ID 속성 값도 lblName으로 변경합니다. 컨트롤에 의미 있는 ID를 지정하면 코딩 단계에서 컨트롤에 액세스하기가 더 쉬워집니다. 이는 아래에 나와 있습니다.
위의 변경 사항을 적용하면 다음과 같은 출력이 표시됩니다.
산출:-
웹 양식에 이름 레이블이 나타나는 것을 볼 수 있습니다.
텍스트 상자
텍스트 상자는 사용자가 웹 양식 애플리케이션에 텍스트를 입력할 수 있도록 하는 데 사용됩니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 사용자가 이름을 입력할 수 있는 텍스트 상자 하나를 양식에 추가합니다.
단계 1) 첫 번째 단계는 아래에 표시된 것처럼 도구 상자에서 텍스트 상자 컨트롤을 웹 양식으로 끌어오는 것입니다.
텍스트 상자 컨트롤이 폼에 있으면 폼 디자이너에서 이것이 어떻게 보일지 아래는 보여줍니다.
단계 2) 텍스트 상자를 추가한 후에는 ID 속성을 변경해야 합니다.
- Textbox 컨트롤을 마우스 오른쪽 버튼으로 클릭하여 속성 창으로 이동합니다.
- 속성을 선택한 다음
- 텍스트 상자의 id 속성을 txtName으로 변경합니다.
위의 변경을 하면 다음과 같은 출력이 표시됩니다.
산출:-
목록 상자
Listbox는 웹 양식에 항목 목록을 보여주는 데 사용됩니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 양식에 목록 상자를 추가하여 일부 도시 위치를 저장합니다.
단계 1) 첫 번째 단계는 아래에 표시된 것처럼 도구 상자에서 웹 양식으로 목록 상자 컨트롤을 끌어오는 것입니다.
단계 2) 목록 상자를 폼으로 드래그하면 별도의 사이드 메뉴가 나타납니다. 이 메뉴에서 '항목 편집' 메뉴를 선택합니다.
단계 3) 이제 목록 상자에 목록 항목을 추가할 수 있는 대화 상자가 표시됩니다.
- 목록 항목을 추가하려면 추가 버튼을 클릭하세요.
- 목록 항목의 텍스트 값에 대한 이름을 지정합니다(이 경우 Mumbai). Mangalore 및 Hyderabad에 대한 목록 항목을 추가하려면 1단계와 2단계를 반복합니다.
- 확인 버튼을 클릭하십시오
단계 4) 속성 창으로 이동하여 컨트롤의 ID 속성 값을 다음으로 변경합니다. lst위치.
위의 변경 사항을 적용하면 다음과 같은 출력이 표시됩니다.
산출:-
출력 결과를 보면 목록 상자가 폼에 추가된 것을 분명히 볼 수 있습니다.
라디오 버튼
라디오 버튼은 사용자가 선택할 수 있는 항목 목록을 표시하는 데 사용됩니다. 아래 예시를 통해 이를 어떻게 구현할 수 있는지 살펴보겠습니다. 남성/여성 옵션에 대한 라디오 버튼을 추가하겠습니다.
단계 1) 첫 번째 단계는 도구 상자에서 '라디오 버튼' 컨트롤을 웹 양식으로 끌어오는 것입니다. (아래 이미지 참조). '남성' 옵션에 대한 라디오 버튼 하나와 '여성'에 대한 라디오 버튼 하나, 총 2개의 라디오 버튼을 추가해야 합니다.
단계 2) 라디오버튼이 추가되면 'text' 속성을 변경하세요.
- 'Radiobutton 컨트롤'을 클릭하여 속성 창으로 이동합니다.
- Radio 버튼의 text 속성을 'Male'로 변경합니다.
- 동일한 단계를 반복하여 '여성'으로 변경합니다.
- 또한 해당 컨트롤의 ID 속성을 rdMale 및 rd Female로 변경합니다.
위의 변경 사항을 적용하면 다음과 같은 출력이 표시됩니다.
산출:-
출력에서 라디오 버튼이 양식에 추가되었음을 명확하게 확인할 수 있습니다.
체크박스
체크박스는 사용자가 여러 가지 선택 사항을 선택할 수 있는 옵션 목록을 제공하는 데 사용됩니다. 아래에 표시된 예를 통해 이를 구현하는 방법을 살펴보겠습니다. 웹 양식에 체크박스 2개를 추가합니다. 이 체크박스는 사용자에게 학습할지 여부에 대한 옵션을 제공합니다. C# 또는 ASP.Net.
단계 1) 첫 번째 단계는 아래에 표시된 것처럼 도구 상자에서 체크박스 컨트롤을 웹 양식으로 끌어오는 것입니다.
단계 2) 체크박스를 추가한 후 체크박스 ID 속성을 'chkASP'로 변경합니다.
- 체크박스 컨트롤을 클릭하여 속성 창으로 이동합니다.
- 해당 컨트롤의 ID 속성을 'chkC' 및 'chkASP'로 변경합니다.
또한 체크박스 컨트롤의 텍스트 속성을 'C#'으로 변경합니다. 다른 체크박스 컨트롤에 대해서도 동일한 작업을 수행하고 'ASP.Net'으로 변경합니다.
- 체크박스의 ID 속성을 'chkASP'로 변경합니다.
- 체크박스의 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;
}
코드 설명:-
- 위의 코드 줄은 가장 간단한 작업을 수행합니다. Name 텍스트 상자 컨트롤의 값을 가져와 Response 객체를 통해 클라이언트로 전송합니다. 따라서 이름 텍스트 상자에 문자열 "Guru99"를 입력하려면 txtName의 값을 입력합니다. 텍스트는 'Guru99'가 됩니다.
- 다음 코드 줄은 'lstLocation.SelectedItem.text' 속성을 통해 목록 상자의 선택된 값을 가져옵니다. 그런 다음 Response.Write 메서드를 통해 이 값을 클라이언트에 다시 씁니다.
- 마지막으로, 폼의 모든 컨트롤을 보이지 않게 만듭니다. 이렇게 하지 않으면 모든 컨트롤과 응답 값이 함께 표시됩니다. 일반적으로 사용자가 이름, 위치, 성별 등과 같은 폼의 모든 정보를 입력하면 사용자에게 표시되는 다음 페이지에는 입력되지 않은 정보만 있어야 합니다. 사용자는 이름, 성별, 위치 컨트롤을 다시 보고 싶어하지 않습니다. 하지만 ASP.Net은 이를 알지 못하므로 기본적으로 사용자가 제출 버튼을 클릭하면 모든 컨트롤을 다시 표시합니다. 따라서 모든 컨트롤이 숨겨져 사용자가 원하는 출력만 볼 수 있도록 코드를 작성해야 합니다.
위의 변경 사항을 적용하면 다음과 같은 출력이 표시됩니다.
산출:-
출력 화면에서 다음 단계를 수행합니다.
- 이름 텍스트 상자에 Guru99라는 이름을 입력하세요.
- 방갈로르 목록상자에서 위치를 선택하세요
- 제출 버튼을 클릭하세요.
이렇게 하면 'Guru99'가 나타나고, 페이지에 'Bangalore'라는 위치가 표시됩니다.
요약
- In ASP.Net, 레이블, 텍스트 상자, 목록 상자 등의 표준 컨트롤을 양식에 추가할 수 있습니다.
- 각 컨트롤에는 이와 관련된 이벤트가 있을 수 있습니다. 가장 일반적인 이벤트는 버튼 클릭 이벤트입니다. 이는 웹 서버에 정보를 제출해야 할 때 사용됩니다.
