[스크랩] Javascript 로 UpdatePanel 핸들링 하기

출처 : http://cafe.daum.net/aspdotnet/OW7m/29 

페이지 안에 UpdatePanel 로 값을 넘겨주는 부분을 기술하고자 합니다. 이는 버튼으로는 충분하지

않습니다. 먼저 hidden TextBox 를 하나 추가하고 doPostBack 메소드를 호출하기 전에 그 값을 update 합니다.

hidden TextBox 추가하기

TextBox 는 값을 저장하는데 필요한 부분이며, 페이지에 보이지 않게 하기 위해서 CSS 로 숨겼습니다.

<asp:TextBox ID="text" runat="server" style="display:none;"></asp:TextBox>

<asp:Button ID="button" runat="server" 0nClick="button_Click" style="display:none;"/>

UpdatePanel 을 위한 비동기 trigger 등록하기

<asp:UpdatePanel runat="server" ID="UpdatePanel1" >

  <ContentTemplate>

    <asp:Label ID="label" runat="server"></asp:Label>

  </ContentTemplate>

  <Triggers>

    <asp:AsyncPostBackTrigger ControlID="button" EventName="Click" UpdateMode="Conditional" />

  </Triggers>

</asp:UpdatePanel>

button 의 Click 이벤트에 AsyncPostBackTrigger 가 등록되어 있는것을 보실 수 있습니다.

발생된 이벤트로 의해 textbox 값으로 수정하게 될 부분을 label 에 추가합니다.
UpdateMode 를 꼭 Conditional 로 등록하는것을 잊지 마세요. 만약에 그 부분을 잊어 버리게 되면

UpdatePanel 이 trigger 가 발생될때나 postback 이 안쪽에 있을때 refresh 가 될것입니다.

UpdatePanel 가 refresh 할 자바스크립트 함수를 추가 합니다.

<a href="java_script:UpdPanelUpdate('Value passed 자바스크립트')">Update the Panel</a>

function UpdPanelUpdate(value)

{

   var obj = document.getElementById("<%= text.ClientID %>");

   obj.value=value;

   __doPostBack("<%= button.ClientID %>","");

}

</script>

컨트롤의 ClientID 프로퍼티를 사용하면 컨트롤이 마스터페이지 안에 있다고 해도 정확한 ID 값을 얻을 수 있습니다. 이는 웹컨트롤이나 Repeater 또는 ID 가 변경될때 마다 .... 말이죠.

버튼이 postback 이 될때 hidden textbox 에 값을 설정합니다.

UpdatePanel 에 내용을 update 하기

그리고 마지막으로 클라이언트 단에서 자바스크립트 메소드로 인해 설정된 값을 기본으로 UpdatePanel 의 내용이 update 됩니다.

protected void button_Click(object sender, EventArgs e)

{

   label.Text = text.Text;

}

이는 hidden textbox 에 설정된 값으로 UpdatePanel 안에 있는 label 이 text 로 인해 변경됩니다.

그리고 비동기 postback 을 통해서 전달합니다.