안녕하세요. ^^ 이번 내용도 많은 분들이 아시는 내용일 겁니다.
하지만 공부하시는 분이나 처음 asp.net 을 접근하시는 분들께는 많은 도움이 될 수도 있을 겁니다.
처음 asp.net 을 개발 하시면, c# 으로 코드 비하인드 단에서 모든것을 처리할려고 하고요.
이를 쉽게 자바스크립트로 처리할 때는 어떻게 서버컨트롤을 접근해서 값을 가져와야 할지 매우 난감해
하시곤 하는데요.
이번 내용은 asp.net 1.x 서버컨트롤 중에 컬렉션 컨트롤인 radiobuttonlist 를 가지고 어떻게 자바스크립트 함수를
이용하여 선택한 값을 가져올지 알아 보겠습니다.
우선 아래와 같이 디자인단인 aspx 페이지에 아래와 같이 radiobuttonlist 컨트롤을 둡니다.
<asp:radiobuttonlist id="rblshim" runat="server" />
그 다음에 해당 radiobuttonlist 에 값이 나오도록 코드 비하인드단에서 ListItem 클래스를 이용하여 바인딩 컨트롤인
radiobuttonlist 에 키값과 텍스트 값을 아래와 같이 입력합니다.
ListItem lt = new ListItem("천재","0");
rblshim.Items.Add(lt);
lt = new ListItem("바보","1");
rblshim.Items.Add(lt);
ListItem 생성자에서 첫번째가 text 이며, 두번째가 value 값입니다. text 는 화면 UI 단에서 볼 수 있는 글내용이구요.
VALUE 는 고유 키값이라고 생각하시면 됩니다. 보통 협업에서 개발을 하시면 value 값을 db 에 저장하곤 하죠.
이제 실행하면 html 랜더링시 어떻게 보이는지 알아보겠습니다.
<table id="rblshim" border="0">
<tr>
<td><input id="rblshim_0" type="radio" name="rblshim" value="0" /><label for="rblshim_0">천재</label></td>
<td><input id="rblshim_1" type="radio" name="rblshim" value="1" checked="checked" /><label for="rblshimn_1">바보</label></td>
</tr>
</table>
어떤가요? input 태그로 radio 라고 형식을 지정하게 되고, 이는 랜더링시 우리가 지정한 radiobuttonlist 의 id 값이 아닌 랜덤으로 _0, _1 식으로 되어 있습니다 . 더 많이 추가되면 _2, _3, ~~ 이런식으로 id 에 적용되겠죠.
보통 책에서 보면 이를 코드 비하인드단에서 SelectedValue 속성을 이용하여 선택한 항목의 값을 가져오는데
사용을 합니다. 천재를 선택했다면 "0" 이라는 값을 가져오겠죠.
이 부분을 자바스크립트로 가져올려면 document 객체의 getElementById 요소를 이용하여 가져올 수 있는데요.
위와 같이 html 랜더링시, id 값이 지정한 id 값과 동일하지 않기 때문에 아래와 같이 기술하여 가져옵니다.
우선 랜더링시 해당 서버컨트롤의 id 값을 클라이언트단에서 확인을 하기 위해 서버컨트롤.ClientID 라고 기재를
하면 랜더링된 radio 객체를 접근할 수 있습니다.
var chkValue = document.getElementById('<%=rblshim.ClientID %>');
천재라고 선택했다면?
if(chkValue[0].checked)
{
alert("천재 입니다.");
return false;
}
간단하죠? 그런데 위와 같이 간단하게 안될 경우가 존재한다면????
function getRadioSelectedValue(objectName)
{
var col = document.getElementsByName(objectName);
for (i = 0 ; i < col.length ; i++) {
var el = col[i];
if (el.type == "radio" && el.checked) {
return el.value;
}
}
}
var chkValue = getRadioSelectedValue('<%=rblshim.ClientID %>');
if(chkValue = "0")
{
alert("천재 입니다.");
return false;
}
개수가 정확하다면??
document.getElementById('<%=rblshim.Items[0].ClientID%>');
이렇게 배열 방법으로도 접근도 가능합니다.
감사합니다. - posted by 심재운(shimpark@gmail.com)