OnClientClick 의 충돌 현상 해결법.

ASP.NET

by happynuri 2008. 5. 16. 14:59

출처: http://www.bangsil.pe.kr/Board/Read.aspx?BoardId=da05ba1b-3e9b-4d16-b8f8-ff2e4f7514c5&PostId=01fea3a4-c6d2-4633-9a74-c52bf2fb3bcb

아..
짱난다..ㅡ.ㅡ;

버튼 컨트롤에 OnClientClick이라는 프라퍼티가 생겼는데..
이는 이전 버전의 Attribute의 대용이라 볼수 있겠다..

btnSearch 라는 버튼 컨트롤이 있다고 가정 할때
1.X 버전에서는

btnSearch.Attribute["onclick"] = "return CheckId()";

이런 식으로 하였으나..

2.0버전에서는

btnSearch.OnClientClick = "return CheckId()";

이라고 표현한다.
물론 디자이너에서도 지원 한다.

2.0에서는 렌더링 후에 생기는 스크립트가 다른데...

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphSubMain$btnNext", "", false, "", "Member_Kind.aspx", false, false))

이런 매우 복잡한 스크립트가 생긴다.. 살펴 보는데만도 한참 걸린다..쿨럭..

암튼..
그냥 버튼과 이미지 버튼의 경우..
후자의 경우 OnClientClick 을 쓰게 되거나 이전 버전처럼 Attribute를 사용 하게 되면..
렌더링 후에 이렇게 바뀐다.

onclick="return CheckId(); WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphSubMain$btnNext", "", false, "", "Member_Kind.aspx", false, false));"

눈치 빠른 사람은 알아 챘겠지만..ㅡ.ㅡ;
CheckId()가 true거나 false거나 상관없이..
뒤에 메소드는 무시한다..ㅡ.ㅡ;

뒤에 메소드는 여러가지 작업을 한다..PostBackUrl과도 연관되어 있고..유효성 검사에도 관련이 있다.
그 밖에 더 있는지는 아직 못 살펴 봤다..ㅡ.ㅠ;

암튼...
이런 의도 하지 않는 반응을 하게 되는데..이것을 어떻게 해결 해야 할까..ㅡ.ㅡ;

2가지 방법이 있다.
첫번째는 링크 버튼을 쓰는거다..
다른 버튼과는 달리 앵커 태그로 렌더링 된다.

<a onclick="return CheckId();" id="LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LinkButton1", "", false, "", "Default.aspx", false, true))">LinkButton</a>

대략 이런식인데.
딱 보면 알겠지만..
내가 정의한 스크립트 메소드( CheckId() )는 정의 한 대로 onclick이라는 어트리뷰트에 렌더링 되었으나
프레임워크에서 생성한 저 복잡한 메소드는 href 어트리뷰트에 렌더링 되었다..

오홋..바로 이거다..
결론은 링크 버튼을 쓰면 된다..ㅡ.ㅡ;
혹자 묻는다..이미지는 그럼 어떻게 해~~~~

<asp:Linkbutton id="btnSearch" runat="server"><img src="temp.jpg"></asp:Linkbutton>

이렇게 하면 되지롱...

자.이제 2번째 해결법은..
나는 죽었다 깨도...이미지 버튼이나 그냥 버튼을 써야 겠다 하는 사람은..또 방법이 있다..ㅡ.ㅡ;

렌더링 결과를 보면..
onclick="return 메소드(); 기타 등등"
이라고 나오는데..
결론부터 말하면..
내가 정의 한 메소드에서 false 일때만 리턴을 시키는거다..
이를 위해서는 메소드를 쓸수가 없다..OTL~~

이렇게 정의 해 본다..ㅡ.ㅡ;

string script = @"
if(eval(document.all."+this.chkFlag.ClientID+@").checked == false)
{
alert(\"약관에 동의하여 주십시오.\");
eval(document.all." + this.chkFlag.ClientID + @").focus();
return false;
}";
this.btnNext.Attributes["onclick"] = script;

뭔가 보이는가???

렌더링 되면 이렇게 된다.

onclick="
if(eval(document.all.ctl00_cphSubMain_chkFlag).checked == false)
{
alert(\"약관에 동의하여 주십시오.\");
eval(document.all.ctl00_cphSubMain_chkFlag).focus();
return false;
};WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphSubMain$btnNext", "", false, "", "Member_Kind.aspx", false, false))"

자세히 살펴 보라..ㅡ.ㅡ;
false 일때만 리턴한다 ㅋ~~

나름대로 꽁수라고 볼수 있지롱..^^;;