RadioButton 및 RadioButtonList 웹 서버 컨트롤 개요

업데이트: 2007년 11월

RadioButton 컨트롤 및 RadioButtonList 컨트롤을 사용하면 함께 사용할 수 없는 미리 정의된 일련의 선택 옵션에서 항목을 선택하도록 할 수 있습니다.

이 항목의 내용은 다음과 같습니다.

• 기능

• 배경

• 코드 예제

• 클래스 참조

기능

CheckBox 컨트롤 및 CheckBoxList 컨트롤을 사용하여 다음을 수행할 수 있습니다.

• 라디오 단추를 선택할 때 페이지 포스트백 발생

• 사용자가 라디오 단추를 선택할 때 사용자 상호 작용 캡처

• 각 라디오 단추를 데이터베이스의 데이터에 바인딩

맨 위로 이동

배경

두 유형의 웹 서버 컨트롤, 즉 개별 RadioButton 컨트롤 또는 RadioButtonList 컨트롤을 사용하여 ASP.NET 웹 페이지에 라디오 단추를 추가할 수 있습니다. 두 컨트롤 모두 함께 사용할 수 없는 미리 정의된 일련의 선택 옵션에서 사용자가 항목을 선택하도록 할 수 있으며 레이블이 있는 라디오 단추를 개수에 관계없이 정의하고 이를 가로 또는 세로로 정렬할 수 있도록 합니다.

개별 RadioButton 컨트롤의 경우 페이지에 추가한 다음 단독으로 사용합니다. 대개 두 개 이상의 개별 단추를 그룹으로 함께 묶어 사용합니다.

또는 라디오 단추 목록 항목의 컬렉션에 대해 부모 컨트롤 역할을 수행하는 단일 컨트롤인 RadioButtonList 컨트롤을 사용할 수 있습니다. 이 컨트롤은 기본 ListControl 클래스에서 파생됩니다. 따라서 ListBox, DropDownList, BulletedList 및 CheckBoxList 웹 서버 컨트롤과 매우 유사하게 작동합니다. RadioButtonList 컨트롤을 사용하는 대부분의 프로시저는 다른 List 웹 서버 컨트롤을 사용하는 프로시저와 같습니다.

두 컨트롤 형식 모두 장점이 있습니다. 개별 RadioButton 컨트롤을 사용하면 RadioButtonList 컨트롤을 사용하는 것보다 라디오 단추 그룹의 레이아웃을 더욱 정밀하게 제어할 수 있습니다. 예를 들어 라디오 단추 사이에 라디오 단추용이 아닌 텍스트를 넣을 수 있습니다.

RadioButtonList 컨트롤은 데이터 소스의 데이터를 기반으로 라디오 단추 그룹을 만들 경우에 매우 효과적입니다. 선택된 단추를 확인하는 코드를 쓰기도 쉽습니다.

참고:
HtmlInputRadioButton 서버 컨트롤을 사용하여 ASP.NET 웹 페이지에 라디오 단추를 추가할 수도 있습니다. 자세한 내용은 HtmlInputRadioButton 서버 컨트롤 선언 구문을 참조하십시오.

더 긴 옵션 목록이나 런타임에 길이가 달라질 수 있는 목록을 제공하려면 ListBox 또는 DropDownList 웹 서버 컨트롤을 사용합니다.

라디오 단추 그룹화

라디오 단추는 대개 단독으로 사용하지 않는 대신 그룹화하여 상호 배타적인 옵션 집합을 제공하는 데 사용합니다. 그룹 안의 라디오 단추는 한 번에 하나만 선택할 수 있습니다. 다음과 같은 방법으로 라디오 단추를 그룹화할 수 있습니다.

• 개별 RadioButton 웹 서버 컨트롤을 페이지에 추가한 다음 전체를 수동으로 한 그룹에 할당합니다. 그룹 이름은 임의적으로 그룹 이름이 같은 모든 라디오 단추는 하나의 그룹에 속하는 것으로 간주됩니다.

• RadioButtonList 웹 서버 컨트롤을 페이지에 추가합니다. 컨트롤의 목록 항목이 자동으로 그룹화됩니다.

RadioButton 및 RadioButtonList 이벤트

개별 RadioButton 컨트롤과 RadioButtonList 컨트롤에 대한 이벤트는 다소 다르게 동작합니다.

개별 RadioButton 컨트롤

개별 RadioButton 컨트롤을 클릭하면 CheckedChanged 이벤트가 발생합니다. 이 이벤트는 CheckBox 컨트롤에서 상속됩니다. 기본적으로 이 이벤트로 인해 페이지가 서버로 게시되지는 않습니다. 그러나 AutoPostBack 속성을 true로 설정하여 컨트롤이 즉시 포스트백을 수행하도록 강제 적용할 수 있습니다. 이 이벤트에 즉시 응답하는 방법에 대한 자세한 내용은 방법: RadioButton 웹 서버 컨트롤 그룹의 사용자 선택에 응답을 참조하십시오.

참고:
자동 포스트백 기능을 사용하려면 브라우저에서 ECMAScript(Jscript 또는 JavaScript)를 지원하고 사용자 브라우저에 이 스크립트가 활성화되어 있어야 합니다.

CheckedChanged 이벤트에 대한 이벤트 처리기를 만들어야 할 수도 있습니다. 페이지의 일부분으로 실행되는 코드에서 선택된 라디오 단추를 테스트할 수 있습니다. 일반적으로 현재 선택한 항목을 읽는 것만이 아니라 라디오 단추가 변경되었음을 알아야 할 경우에만 CheckedChanged 이벤트에 대한 이벤트 처리기를 만듭니다. 자세한 내용은 방법: RadioButton 웹 서버 컨트롤의 선택 설정 및 가져오기를 참조하십시오.

RadioButtonList 컨트롤

RadioButtonList 컨트롤은 사용자가 목록에서 다른 라디오 단추를 선택하여 변경할 때 SelectedIndexChanged 이벤트를 발생시킵니다. 기본적으로 이 이벤트로 인해 페이지가 서버로 게시되지는 않습니다. 그러나 AutoPostBack 속성을 true로 설정하여 컨트롤이 즉시 포스트백을 수행하도록 강제 적용할 수 있습니다. 자세한 내용은 방법: List 웹 서버 컨트롤의 변경 내용에 응답을 참조하십시오.

참고:
자동 포스트백 기능을 사용하려면 브라우저에서 ECMAScript(Jscript 또는 JavaScript)를 지원하고 사용자 브라우저에 이 스크립트가 활성화되어 있어야 합니다.

개별 RadioButton 컨트롤의 경우와 같이 일반적으로 페이지가 다른 방법으로 게시된 다음 RadioButtonList 컨트롤의 상태를 테스트합니다. 자세한 내용은 방법: List 웹 서버 컨트롤의 선택 확인을 참조하십시오.

RadioButton 컨트롤 HTML 특성

RadioButton 컨트롤은 브라우저의 두 부분, 즉 라디오 단추를 나타내는 input 요소와 라디오 단추의 캡션을 나타내는 개별 label 요소를 렌더링합니다. 그런 다음 이 두 요소의 조합이 span 요소에 래핑됩니다.

스타일 또는 특성 설정을 RadioButton 컨트롤에 적용하면 외부 span 요소에 적용됩니다. 예를 들어 컨트롤의 BackColor 속성을 설정하면 설정이 span 요소에 적용됩니다. 따라서 내부 input 및 label 요소 모두에 영향을 줍니다.

따라서 라디오 단추와 레이블을 개별적으로 설정할 수도 있습니다. RadioButton 컨트롤은 런타임에 설정할 수 있는 두 속성을 지원합니다. InputAttributes 속성은 HTML 특성을 input 요소에 추가할 수 있도록 하고, LabelAttributes 속성은 HTML 특성을 label 요소에 추가할 수 있도록 합니다. 설정하는 특성은 원래 상태로 브라우저에 전달됩니다. 다음 예제에서는 마우스 포인터를 대면 레이블이 아닌 라디오 단추의 색만 변하도록 input 요소의 특성을 설정하는 방법을 보여 줍니다.

RadioButton1.InputAttributes.Add("onmouseover", _
    "this.style.backgroundColor = 'red'")
RadioButton1.InputAttributes.Add("onmouseout", _
    "this.style.backgroundColor = 'white'")

RadioButton1.InputAttributes.Add("onmouseover", 
    "this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", 
    "this.style.backgroundColor = 'white'");

컨트롤에 데이터 바인딩

개별 RadioButton 컨트롤을 데이터 소스에 바인딩하고, RadioButton 컨트롤의 모든 속성을 데이터 소스의 모든 필드에 바인딩할 수 있습니다. 예를 들어 데이터베이스의 정보를 기반으로 컨트롤의 Text 속성을 설정할 수 있습니다.

라디오 단추는 그룹으로 사용되기 때문에 일반적으로 단일 라디오 단추를 데이터 소스에 바인딩하지는 않습니다. 대신 대개 RadioButtonList 컨트롤을 데이터 소스에 바인딩합니다. 이 경우 데이터 소스는 데이터 소스의 각 레코드에 대한 라디오 단추(목록 항목)를 동적으로 생성합니다.

맨 위로 이동

코드 예제

방법: Web Forms 페이지에 RadioButton 웹 서버 컨트롤 추가

방법: Web Forms 페이지에 RadioButtonList 웹 서버 컨트롤 추가(Visual Studio)

방법: RadioButton 웹 서버 컨트롤의 선택 설정 및 가져오기

방법: RadioButtonList 웹 서버 컨트롤의 레이아웃 설정

방법: RadioButton 웹 서버 컨트롤 그룹의 사용자 선택에 응답

방법: List 웹 서버 컨트롤에 항목 추가(Visual Studio)

방법: 데이터 소스에서 List 웹 서버 컨트롤 채우기(Visual Studio)

방법: List 웹 서버 컨트롤의 변경 내용에 응답

맨 위로 이동

클래스 참조

다음 표에서는 RadioButton 및 RadioButtonList 컨트롤과 관련된 클래스를 보여 줍니다.

맨 위로 이동

참고 항목

작업

방법: List 웹 서버 컨트롤의 선택 설정(Visual Studio)

방법: List 웹 서버 컨트롤의 선택 확인

참조

CheckBox 및 CheckBoxList 웹 서버 컨트롤 개요