[ASP.NET] UpdatePanel

개념

• AJAX를 통해 페이지의 특정 부분만 업데이트(CSR) 하도록 해줌
• 해당 부분은 전체 페이지를 새로고침하지 않아도 UI 변경 가능
• <ContentTemplate></ContentTemplate>을 통해 UpdatePanel의 영역 지정 가능

언제 사용?

• 버튼 클릭 시 전체 페이지 리로드 없이 특정 부분만 업데이트
• 게시판, 검색 필터, 데이터 갱신 등 전체 html 중 부분 업데이트가 필요할 때

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Label ID="lblTime" runat="server" Text="현재 시간: " />
        <asp:Button ID="btnUpdate" runat="server" Text="업데이트" OnClick="btnUpdate_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

• 업데이트 버튼 클릭 시 현재 시간만 최신화됨, 나머지 페이지의 요소들 그대로 있고
• UpdatePanel 그룹은 ContentTemplate 영역, Triggers 영역으로 이루어짐

사용하는 방법

0. UpdatePanel 영역 선언

<asp:UpdatePanel ID="udpRecord" runat="server" UpdateMode="Conditional">
</asp:UpdatePanel>

UpdateMode: Always(Default), Conditional

• Always: 어떤 버튼을 클릭하든 자동 업데이트
• Conditional: 명시적으로 지정한 트리거(<asp:AsyncPostBackTrigger>)에 대한 버튼 클릭이 있을 때 업데이트, 혹은 코드 영역에서 Update()로 강제 업데이트할 때 업데이트

• 즉 Conditional을 할 경우 무조건 Triggers를 지정해야됨

1. asp:ScriptManager 선언(필수)

• ASP.NET에서 AJAX 를 쓰겠다고 선언하기 위해 <asp:ScriptManager>를 필수적으로 선언해야됨
• 타임리프의 <script th:inline="javascript"> 마냥 인식해주는 것 나는 AJAX를 쓸거야라고 선언해주는 것!

<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>

2. ContentTemplate 태그 영역(필수)

해당 영역 안에 UpdatePanel로 부분 업데이트 할 영역을 지정할 수 있음

3. Triggers 태그 영역(필수 아님, Conditional일 경우 필수)

• 트리거 영역임을 나타냄

• 해당 영역 안에 <asp:AsyncPostBackTrigger>을 정의하여 이런이런 트리거들을 쓸거야하고 알려주는 것 즉 그냥 선언자임 ,알림표 느낌

• 만약 <asp:UpdatePanel></asp:UpdatePanel> 외부에서 해당 판넬 영역을 조작하려 할 경우 반드시 Triggers 태그 영역에 <asp:AsyncPostBackTrigger>를 선언해줌으로써 해당 비동기 트리거가 이 영역을 비동기로 업데이트하려 할 거야라고 UpdatePanel이 알 수 있음

• 반면 <asp:UpdatePanel></asp:UpdatePanel> 내부에 버튼들을 정의했으면 굳이 Triggers 태그를 선언해서 트리거 쓸거다라고 선언 안해도 되긴 함

• 하지만 UpdatePanel에 UpdateMode="Conditional" 로 지정하면 무조건 Trigger 지정해야됨

• 즉 그냥 입 다물고 비동기 버튼 만들면 트리거 무조건 지정해주면 됨

※ 트리거란?

• 트리거란 이벤트(행동)이 발생했을 때 특정 동작이 실행되도록 하는 것
• 예를 들어 버튼 클릭과 같은 이벤트가 이루어지면 테이블에 대한 데이터 정보가 최신화 되는 것임

결론

• 특정 부분만 CSR로 변경되게 하려면 UpdatePanel이 필수이고, 이걸 사용하기 위해선 각종 트리거들(버튼 클릭 시 일부 변경)이 필요함
• UpdatePanel을 쓰려면 ContentTemplate 영역 안에 수정할 부분을 기재해줘야하고 UpdatePanel 내부 혹은 외부에 트리거와 연동되는 버튼들을 정의할 수 있음, 단 외부에 설정할 경우 <Trigger></Trigger> 에 트리거를 사용하겠다 지정해줘야됨 또한 UpdateMode="Conditional"일 경우도 무조건 지정해줘야됨
• 걍 비동기 전송 버튼 하나 만든다고 하면 무조건 트리거 하나 생성해주자, 알아보기도 편하고 그냥 자세하게 다 적어 걍