RadioButton 컨트롤과 RadioButtonList 컨트롤을 사용하면 사용자는 상호 배타적인 미리 정의된 작은 옵션 집합 중에서 선택할 수 있습니다.
1. 기능
CheckBox 컨트롤과 CheckBoxList 컨트롤을 사용하여 다음 작업을 수행할 수 있습니다.
· 라디오 버튼을 선택하면 페이지 포스트백이 발생합니다.
·사용자가 라디오 버튼을 선택할 때 사용자 상호 작용을 캡처합니다.
· 각 라디오 버튼을 데이터베이스의 데이터에 바인딩합니다.
2. 배경
ASP.NET 웹 페이지에 라디오 단추를 추가할 때 단일 RadioButton 컨트롤 또는 RadioButtonList 컨트롤이라는 두 가지 웹 서버 컨트롤을 사용할 수 있습니다. 두 컨트롤 모두 사용자가 상호 배타적인 미리 정의된 옵션의 작은 집합 중에서 선택할 수 있도록 해줍니다. 이러한 컨트롤을 사용하여 레이블이 지정된 라디오 버튼을 원하는 만큼 정의하고 수평 또는 수직으로 정렬할 수 있습니다.
개별 RadioButton 컨트롤을 페이지에 추가하고 컨트롤을 개별적으로 사용할 수 있습니다. 일반적으로 두 개 이상의 개별 버튼이 함께 그룹화됩니다.
또는 라디오 버튼 목록 항목 그룹의 상위 컨트롤로 사용할 수 있는 단일 컨트롤인 RadioButtonList 컨트롤을 사용할 수 있습니다. 이 컨트롤은 기본 ListControl 클래스에서 파생되므로 ListBox, DropDownList, BulletedList 및 CheckBoxList 웹 서버 컨트롤과 매우 유사하게 작동합니다. RadioButtonList 컨트롤을 사용하는 절차의 대부분은 다른 목록 웹 서버 컨트롤의 경우와 동일합니다.
두 가지 유형의 컨트롤 모두 고유한 장점이 있습니다. 단일 RadioButton 컨트롤을 사용하면 RadioButtonList 컨트롤을 사용하는 것보다 라디오 버튼 그룹의 레이아웃을 더 효과적으로 제어할 수 있습니다. 예를 들어 라디오 버튼 사이에 라디오 버튼이 아닌 텍스트를 포함할 수 있습니다.
데이터 소스의 데이터를 기반으로 라디오 버튼 세트를 만들려면 RadioButtonList 컨트롤을 선택하는 것이 더 좋습니다. 어떤 버튼이 선택되었는지 확인하는 코드 작성 측면에서도 약간 더 간단합니다.
참고: HtmlInputRadioButton 서버 컨트롤을 사용하여 ASP.NET 웹 페이지에 라디오 버튼을 추가할 수도 있습니다.
사용자에게 긴 옵션 목록이나 런타임 시 길이가 변경될 수 있는 목록을 제공하려면 ListBox 또는 DropDownList 웹 서버 컨트롤을 사용하십시오.
1. 그룹 라디오 버튼
라디오 버튼은 단독으로 사용되는 경우가 거의 없지만, 상호 배타적인 옵션 세트를 제공하기 위해 그룹화됩니다. 그룹 내에서는 한 번에 하나의 라디오 버튼만 선택할 수 있습니다. 다음과 같은 방법으로 그룹화된 라디오 버튼을 만들 수 있습니다.
단일 RadioButton 웹 서버 컨트롤을 페이지에 추가하여 시작한 다음 모든 컨트롤을 그룹에 수동으로 할당합니다. 그룹 이름은 무엇이든 될 수 있습니다. 동일한 그룹 이름을 가진 모든 라디오 버튼은 단일 그룹의 일부로 간주됩니다.
RadioButtonList 웹 서버 컨트롤을 페이지에 추가합니다. 이 컨트롤의 목록 항목은 자동으로 그룹화됩니다.
2. RadioButton 및 RadioButtonList 이벤트
이벤트는 단일 RadioButton 컨트롤과 RadioButtonList 컨트롤 사이에서 다르게 작동합니다.
3. 단일 RadioButton 컨트롤
단일 RadioButton 컨트롤은 사용자가 컨트롤을 클릭할 때 CheckedChanged 이벤트를 발생시킵니다. (이 이벤트는 CheckBox 컨트롤에서 상속됩니다.) 기본적으로 이 이벤트로 인해 페이지가 서버로 전송되지는 않습니다. 그러나 AutoPostBack 속성을 true로 설정하면 컨트롤이 즉시 포스트백을 수행하도록 강제할 수 있습니다.
참고: 자동 포스트백 기능을 사용하려면 브라우저가 ECMAScript(Jscript 또는 JavaScript)를 지원해야 하며 사용자 브라우저에서 스크립팅을 활성화해야 합니다.
CheckedChanged 이벤트에 대한 이벤트 처리기를 만들어야 할 수도 있습니다. 페이지의 일부로 실행되는 코드에서 어떤 라디오 버튼이 선택되었는지 테스트할 수 있습니다. 일반적으로 현재 선택 항목을 읽는 것이 아니라 라디오 버튼이 변경되었음을 알아야 하는 경우에만 CheckedChanged 이벤트에 대한 이벤트 처리기를 만듭니다.
4. RadioButtonList 컨트롤
RadioButtonList 컨트롤은 사용자가 목록에서 선택한 라디오 버튼을 변경할 때 SelectedIndexChanged 이벤트를 발생시킵니다. 기본적으로 이 이벤트로 인해 페이지가 서버로 전송되지는 않습니다. 그러나 AutoPostBack 속성을 true로 설정하면 컨트롤이 즉시 포스트백을 수행하도록 강제할 수 있습니다.
참고: 자동 포스트백 기능을 사용하려면 브라우저가 ECMAScript(Jscript 또는 JavaScript)를 지원해야 하며 사용자 브라우저에서 스크립팅을 활성화해야 합니다.
개별 RadioButton 컨트롤과 마찬가지로 페이지가 다른 방법으로 전송된 후 RadioButtonList 컨트롤의 상태를 테스트하는 것이 더 일반적입니다.
5. RadioButton 제어 HTML 속성
RadioButton 컨트롤이 브라우저에 렌더링되면 라디오 버튼을 나타내는 입력 요소와 라디오 버튼 제목을 나타내는 별도의 레이블 요소라는 두 부분으로 나누어집니다. 이 두 요소는 범위 요소로 결합됩니다.
RadioButton 컨트롤에 스타일이나 속성 설정을 적용하면 해당 스타일과 속성이 외부 범위 요소에 적용됩니다. 예를 들어 컨트롤의 BackColor 속성을 설정하면 해당 설정이 범위 요소에 적용됩니다. 따라서 내부 입력 요소와 레이블 요소 모두에 영향을 미칩니다.
때로는 라디오 버튼과 라벨에 대해 별도의 설정을 지정해야 할 수도 있습니다. RadioButton 컨트롤은 런타임에 설정할 수 있는 두 가지 속성을 지원합니다. InputAttributes 특성을 사용하면 입력 요소에 HTML 특성을 추가할 수 있고 LabelAttributes 특성을 사용하면 레이블 요소에 HTML 특성을 추가할 수 있습니다. 설정된 속성은 있는 그대로 브라우저에 전달됩니다. 다음 예제에서는 사용자가 라디오 버튼 위에 마우스 포인터를 올리면 레이블이 아닌 라디오 버튼의 색상만 변경되도록 입력 요소의 속성을 설정하는 방법을 보여줍니다.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.BackgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.BackgroundColor = 'white'");
6. 컨트롤에 데이터 바인딩
단일 RadioButton 컨트롤을 데이터 소스에 바인딩할 수 있고 RadioButton 컨트롤의 모든 속성을 데이터 소스의 모든 필드에 바인딩할 수 있습니다. 예를 들어 데이터베이스의 정보를 기반으로 컨트롤의 Text 속성을 설정할 수 있습니다.
라디오 버튼은 그룹으로 사용되기 때문에 단일 라디오 버튼을 데이터 소스에 바인딩하는 것은 일반적이지 않습니다. 대신 RadioButtonList 컨트롤을 데이터 소스에 바인딩하는 것이 더 일반적입니다. 이 경우 데이터 소스는 데이터 소스의 각 레코드에 대해 라디오 버튼(목록 항목)을 동적으로 생성합니다.
3. 방법: Web Forms 페이지에 RadioButton 웹 서버 컨트롤 추가
Web Forms 페이지에 라디오 버튼을 추가하는 방법에는 두 가지가 있습니다.
·단일 RadioButton 웹 서버 컨트롤을 추가합니다.
·RadioButtonList 웹 서버 컨트롤을 추가한 다음 컨트롤에 단일 목록 항목을 추가합니다.
단일 RadioButton 웹 서버 컨트롤을 사용하는 경우 일반적으로 이러한 컨트롤 집합을 페이지에 추가한 다음 그룹화합니다. 여러 가지 버튼 그룹을 만들 수 있습니다.
단계:
1. 도구 상자의 "표준" 탭에서 RadioButton 컨트롤을 페이지로 드래그합니다.
2. "속성" 창에서 텍스트 속성을 설정하여 제목을 지정합니다.
3. TextAlign 속성을 설정하여 제목 방향을 변경할 수도 있습니다.
4. 페이지에 추가하려는 각 라디오 버튼에 대해 1~3단계를 반복합니다.
개별 RadioButton 웹 서버 컨트롤을 그룹화합니다.
각 컨트롤의 GroupName 속성을 동일한 이름으로 설정합니다. 어떤 문자열이든 이름으로 사용할 수 있지만 공백은 포함할 수 없습니다. 예를 들어 모든 버튼의 GroupName 속성에 "RadioButtonGroup1" 문자열을 할당할 수 있습니다.
여러 개의 버튼 그룹을 만들려면 각 그룹마다 다른 그룹 이름을 사용하세요.
참고: 언제든지 RadioButton 컨트롤을 페이지에 추가하고 이를 기존 그룹으로 나눌 수 있습니다.
4. 방법: Web Forms 페이지에 RadioButtonList 웹 서버 컨트롤 추가
Web Forms 페이지에 라디오 버튼을 추가하는 방법에는 두 가지가 있습니다.
·RadioButtonList 웹 서버 컨트롤을 추가한 다음 컨트롤에 단일 목록 항목을 추가합니다.
·단일 RadioButton 웹 서버 컨트롤을 추가합니다.
RadioButtonList 컨트롤을 사용하면 페이지에 개별 컨트롤을 추가할 수 있습니다. 컨트롤에 항목을 추가하는 것은 컨트롤에 정적 목록을 표시할지 아니면 런타임에 동적으로 생성된 목록을 표시할지에 따라 별도의 프로세스입니다.
단계:
1. 도구 상자의 "표준" 탭에서 RadioButtonList 컨트롤을 페이지로 끌어다 놓습니다.
2. "속성" 창에서 TextAlign 속성을 설정하여 제목 방향을 변경하도록 선택할 수도 있습니다.
3. 여러 열을 표시하도록 컨트롤의 레이아웃을 변경하도록 선택할 수도 있습니다.
4. 다음 방법 중 하나를 수행하여 컨트롤 항목을 생성합니다.
·각 항목을 별도로 생성합니다.
·데이터를 컨트롤에 바인딩합니다.
5. 방법: RadioButton 웹 서버 컨트롤에서 선택 항목 설정 및 가져오기
선택한 라디오 버튼을 디자인 타임에 설정하거나 런타임 시 코드에서 설정할 수 있습니다. 라디오 버튼이 그룹에 속하는 경우 버튼을 설정하면 그룹의 다른 모든 선택 항목이 지워집니다.
참고: RadioButtonList 컨트롤을 사용하는 경우 버튼 값을 가져오고 설정하는 프로세스가 다릅니다.
1. 선택한 RadioButton 컨트롤을 설정합니다.
컨트롤의 Checked 속성을 true로 설정합니다. 그룹에서 여러 RadioButton 컨트롤을 선택하는 경우 브라우저는 어떤 버튼이 선택되는지 결정합니다.
이 속성을 false로 설정하면 선택이 지워지지만 다른 라디오 버튼은 선택되지 않습니다. 따라서 그룹에 있는 모든 라디오 버튼의 Checked 속성을 false로 설정하면 모든 선택 항목을 지울 수 있습니다.
어떤 RadioButton 컨트롤이 선택되었는지 확인하는 것은 기본적으로 Checked 속성을 테스트하는 것입니다.
공개 무효 Button1_Click(개체 전송자, System.EventArgs e)
{
if (RadioButton1.Checked) {
Label1.Text = "선택하셨습니다. " + RadioButton1.Text;
}
else if (RadioButton2.Checked) {
Label1.Text = "선택하셨습니다. " + RadioButton2.Text;
}
else if (RadioButton3.Checked) {
Label1.Text = "선택하셨습니다. " + RadioButton3.Text;
}
}
6. 방법: RadioButtonList 웹 서버 컨트롤에서 레이아웃 설정
기본적으로 RadioButtonList 웹 서버 컨트롤은 단추 목록만 표시합니다. 그러나 원하는 수의 열을 지정할 수 있으며 해당 열 내에서 항목이 정렬되는 방식(세로(기본값) 또는 가로)도 지정할 수 있습니다. 3열 세로 레이아웃은 다음과 같습니다.
AD G
B E H
C F
동일한 항목의 가로 레이아웃은 다음 레이아웃을 생성합니다.
ABC
D E F
G H
열 수 및 정렬 지정
·RadioButtonList 컨트롤의 RepeatColumns 속성을 원하는 열 수로 설정합니다.
· 다음 코드 예제와 같이 RepeatDirection 열거형을 사용하여 RepeatDirection 속성을 수직 또는 수평으로 설정합니다.
protected void Button1_Click(개체 전송자, System.EventArgs e)
{
// 5개의 라디오 버튼을 만듭니다.
string[] colors = {"빨간색", "파란색", "녹색", "노란색", "주황색"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i < colors.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// 라디오 버튼을 수평으로 배치합니다.
this.RadioButtonList1.RepeatDirection =
RepeatDirection.Horizontal;
}
7. 방법: RadioButton 웹 서버 제어 그룹의 사용자 선택에 응답
사용자가 RadioButton 컨트롤을 선택하면 해당 컨트롤은 응답할 수 있는 이벤트를 발생시킵니다.
설명: RadioButtonList 컨트롤에서 발생하는 이벤트는 단일 RadioButton 컨트롤에서 발생하는 이벤트와 다릅니다.
RadioButton 컨트롤의 선택 이벤트에 직접 응답할 필요가 전혀 없을 수도 있습니다. 사용자가 라디오 버튼 그룹에서 선택 항목을 변경한 시기를 알아야 하는 경우에만 이 이벤트에 응답하십시오.
어떤 라디오 버튼이 선택되었는지만 알고 싶고 선택 사항이 변경되었는지는 알고 싶지 않은 경우 양식이 서버로 전송된 후 라디오 버튼 선택을 테스트하면 됩니다.
각 RadioButton 서버 컨트롤은 별도의 컨트롤이고 각 컨트롤은 독립적으로 이벤트를 발생시킬 수 있기 때문에 라디오 버튼 그룹은 전체적으로 이벤트를 발생시키지 않습니다.
컨트롤의 CheckedChanged 이벤트에 대한 이벤트 처리기를 만듭니다.
기본적으로 CheckedChanged 이벤트로 인해 Web Forms 페이지가 즉시 서버로 전송되지는 않습니다. 대신 다음에 양식을 보낼 때(예: Button 웹 서버 컨트롤을 클릭할 때) 서버 코드에서 이벤트가 발생합니다. CheckedChanged 이벤트로 인해 즉시 게시되도록 하려면 RadioButton 컨트롤의 AutoPostBack 속성을 true로 설정합니다.
참고: RadioButton 컨트롤이 선택되었을 때 서버로 보내려면 브라우저가 ECMAScript(JScript, JavaScript)를 지원해야 하며 사용자 브라우저에서 스크립팅을 활성화해야 합니다.
다음 코드 예제에서는 사용자가 RadioButton 컨트롤을 선택할 때 응답하는 방법을 보여줍니다.
공개 무효 RadioButton1_CheckedChanged(객체 발신자,
System.EventArgs 전자)
{
Label1.Text = "라디오 버튼을 선택하셨습니다. " + RadioButton1.Text;