본문 바로가기
프로그래밍/ASP.NET

OnClientClick으로 스크립트 호출하기 팁

by Daily Investing 2019. 7. 5.
반응형

출처 : https://m.blog.naver.com/PostView.nhn?blogId=elduque&logNo=120048577087&proxyReferer=https%3A%2F%2Fwww.google.com%2F#

 

갑자기 올리는건 회사를 바꾸고 당연히 될것이라고 생각한것이 안되길래 열라 삽질하다가 알아낸것임으로 -_-; 내용은 무지 쉽지만..

 

1.1까지 버튼이나 이미지 버튼등의 서버 컨트롤로 클라이언트 스크립트를 호출 하기위해서 아마 대부분의 방법으론

 

html input 버튼으로 대체 또는 아마 비하인드 단에 Button1.Attributes["onclick"] = "스크립트";

 

이런식이였지 않을까 싶다

 

 

예를들어 경고창을 하나 띄어보자면

<script type="text/javascript" language="javascript">

        function Test()

        {

            alert("test");           

}

</script>

 

<input id="Button1" type="button" value="button" onclick="Test()" />

<asp:Button ID="Button3" runat="server" Text="Button" OnClientClick = "Test();" />

 

 

이런식으로 input 버튼 하나와 서버컨트롤 버튼 하나를 배치한다.

 

주목할만한 부분은 서버컨트롤 버튼의 OnClientClick 정도 되겠다.

 

일반적인 input 버튼의 onclick과 같은 역활을 하는 속성이라고 할 수 있다 그래서 이렇게 하면 다 되는줄 알았다.

 

컴파일 후 실행시켜보자.

 

아마 위와 같이 간단한 경고창이 뜨겠죠? 전 여기 까지만 보고 동작 잘되는군하...

 

아무 의심 하지 않았다 ㅠㅠ

 

그러나 이게 먼일이가.. 서버컨트롤은...

 

저 경고창을 확인을 누르는 순간...

 

아래와 같이 서버컨트롤은 포스트백이 일어났다.

 

음 이걸 바로 안것이 아니라 코드를 아래와 같이 변경한후에 안것이다.. ㅠㅠ

 

<script type="text/javascript" language="javascript">

        function Test()

        {

            document.getElementById("TestD").style.visibility = 'hidden';           

        }

       

        function TestA()

        {

            document.getElementById("TestD").style.visibility = 'visible';

           

        }

</script>

 

<body>

    <form id="form1" runat="server">

    <div id="TestD" style="">

        Test문자<br />

        <br />

    </div>

    <div>

        <input id="Button1" type="button" value="button" onclick="Test()" />

        <input id="Button2" type="button" value="button" onclick="TestA()" />

        <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick = "Test();" />

        <asp:Button ID="Button4" runat="server" Text="Button" OnClientClick = "TestA();" />

    </div>       

    </form>

    <asp:Panel ID="Panel1" runat="server">

    </asp:Panel>

   

</body>

 

코드 내용은 별거 없고 TestD라는 DIV테그안의 내용을 보엿다 숨겼다 하는 내용이다. 그런데 3번째 4번째의 서버컨트롤 버튼이 동작 하지 않는걸 보고 열심히 확인해보니 스크립트 실행이후 포스트백 되면서 원래 상태로 돌아오는 것이엿다.

 

어떻게 하면 input버튼과 같은 역활을 할 수 있나 뒤져보는데 검색을 대체 머라고 해야할지 -_-;;

 

사실 어제는 안되는 거구나하고 넘겼는데.. 오늘 우연찬게 발견했다 -0- 열라 간단하다

OnClientClick = "Test(); return false;" /> 자바스크립트 함수 호출 부분에 return false; 한줄만 추가해주면

간단하게 되었다 이렇게 간단한걸 몰라서 삽질하다니 ㅠㅠ

 

혹시 참고가 되었으면 합니당.

반응형