부분 페이지 렌더링 개요
업데이트: 2007년 11월
부분 페이지 렌더링을 사용하면 포스트백 후에 전체 페이지를 새로 고칠 필요가 없습니다. 대신 변경된 개별 페이지 영역만 업데이트됩니다. 따라서 포스트백마다 전체 페이지가 다시 로드되지 않으므로 사용자와 웹 페이지의 상호 작용이 더 원활해집니다. ASP.NET을 사용하면 클라이언트 스크립트를 작성하지 않고도 새 ASP.NET 웹 페이지 또는 기존 ASP.NET 웹 페이지에 부분 페이지 렌더링을 추가할 수 있습니다.
이 항목에는 다음과 같은 단원이 포함되어 있습니다.
시나리오
기능
배경
코드 예제
클래스 참조
시나리오
기존 ASP.NET 응용 프로그램을 확장하거나 AJAX(Asynchronous JavaScript and XML) 기능을 포함하는 새 ASP.NET 응용 프로그램을 개발할 수 있습니다. 다음과 같은 경우에 AJAX 기능을 사용합니다.
더욱 다양한 기능을 제공하고 사용자 작업에 더 빠르게 응답하면서도 기존의 클라이언트 응용 프로그램처럼 동작하는 웹 페이지를 통해 사용자 경험 개선
전체 페이지의 새로 고침을 줄이고 페이지 깜빡임 방지
클라이언트 스크립트를 작성하지 않고도 브라우저 간 호환성 제공
클라이언트 스크립트를 작성하지 않고도 AJAX 스타일의 클라이언트/서버 통신 수행
ASP.NET AJAX Control Toolkit의 컨트롤 및 구성 요소 사용
사용자 지정 ASP.NET AJAX 컨트롤 개발
부분 페이지 렌더링 기능
부분 페이지 렌더링에서는 ASP.NET의 서버 컨트롤과 Microsoft AJAX 라이브러리의 클라이언트 기능을 사용합니다. ASP.NET AJAX 서버 컨트롤을 사용하는 경우 부분 페이지 렌더링 기능이 자동으로 제공되므로 이 기능을 사용하기 위해 Microsoft AJAX 라이브러리를 사용할 필요는 없습니다. 그러나 클라이언트 라이브러리에 노출된 API에서는 추가 AJAX 기능을 사용할 수 있습니다.
부분 페이지 렌더링을 지원하는 ASP.NET의 주요 기능은 다음과 같습니다.
ASP.NET 서버 컨트롤처럼 작동하는 선언 모델. 대부분의 시나리오에서 선언 태그만 사용해도 부분 페이지 렌더링을 지정할 수 있습니다.
부분 페이지 업데이트에 필요한 기본 작업을 수행하는 서버 컨트롤. 여기에는 ScriptManager 컨트롤 및 UpdatePanel 컨트롤이 포함됩니다.
공통 작업을 위한 ASP.NET AJAX 서버 컨트롤과 Microsoft AJAX 라이브러리의 통합. 이러한 작업에는 사용자가 포스트백을 취소할 수 있도록 설정, 비동기 포스트백 동안 사용자 지정 진행률 메시지 표시, 동시 비동기 포스트백을 처리하는 방법 지정 등이 포함됩니다.
부분 페이지 렌더링에 대한 오류 처리 옵션. 이 옵션을 사용하여 브라우저에서 오류가 표시되는 방식을 사용자 지정할 수 있습니다.
ASP.NET의 AJAX 기능에 기본적으로 제공되는 브라우저 간 호환성. 서버 컨트롤을 사용하기만 해도 적절한 브라우저 기능이 자동으로 호출됩니다.
배경
ASP.NET 웹 서버 컨트롤을 사용하여 빌드된 일반적인 웹 페이지에서는 페이지의 단추를 클릭하는 것과 같은 사용자 작업으로 시작된 포스트백을 수행합니다. 이에 대한 응답으로 서버는 새 페이지를 렌더링합니다. 대부분의 경우 이때 포스트백 사이에서 변경되지 않은 컨트롤과 텍스트가 다시 렌더링됩니다.
부분 페이지 렌더링을 사용하면 개별 페이지 영역을 비동기적으로 새로 고쳐 페이지가 사용자에게 더욱 빠르게 응답하도록 만들 수 있습니다. ASP.NET AJAX 웹 서버 컨트롤을 사용하여 부분 페이지 렌더링을 구현하고, 선택적으로 Microsoft AJAX 라이브러리의 API를 사용하는 클라이언트 스크립트를 작성할 수 있습니다.
부분 페이지 업데이트를 위한 서버 컨트롤
ASP.NET 웹 페이지에 AJAX 기능을 추가하려면 업데이트할 개별 페이지 섹션을 식별합니다. 그런 다음 이 섹션의 내용을 UpdatePanel 컨트롤에 추가합니다. UpdatePanel 컨트롤의 내용은 HTML이나 다른 ASP.NET 컨트롤일 수 있습니다. UpdatePanel 컨트롤을 다른 컨트롤처럼 페이지에 추가할 수 있습니다. 예를 들어 Visual Studio의 도구 상자에서 이 컨트롤을 웹 페이지로 끌거나 페이지에서 선언 태그를 사용하여 이 컨트롤을 추가할 수 있습니다. 다음 예제에서는 UpdatePanel 컨트롤의 태그를 보여 줍니다.
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
기본적으로 업데이트 패널 내의 컨트롤(자식 컨트롤)에서 시작되는 포스트백은 자동으로 비동기 포스트백을 시작하고 부분 페이지 업데이트를 발생시킵니다. 업데이트 패널 외부의 컨트롤이 비동기 포스트백을 발생시키고 UpdatePanel 컨트롤의 내용을 새로 고치도록 지정할 수도 있습니다. 비동기 포스트백을 발생시키는 컨트롤을 트리거라고 합니다. 트리거에 대한 자세한 내용은 여러 UpdatePanel 컨트롤을 사용하여 단일 ASP.NET 페이지 만들기를 참조하십시오.
비동기 포스트백은 동기 포스트백과 아주 비슷하게 동작합니다. 모든 서버 페이지 수명 주기 이벤트가 발생하고 뷰 상태 및 폼 데이터가 유지됩니다. 그러나 렌더링 단계에서 UpdatePanel 컨트롤의 내용만 브라우저에 전송됩니다. 나머지 페이지는 변경되지 않고 그대로 유지됩니다.
부분 페이지 렌더링을 지원하려면 페이지에 ScriptManager 컨트롤을 추가해야 합니다. ScriptManager 컨트롤은 페이지의 모든 업데이트 패널과 해당 트리거를 추적합니다. 이 컨트롤은 서버에서 부분 페이지 렌더링 동작을 조정하고 비동기 포스트백의 결과로 렌더링할 페이지 섹션을 결정합니다.
다음 예제에서는 포스트백이 패널 내부에서 시작될 때마다 해당 내용을 새로 고치는 UpdatePanel 컨트롤을 보여 줍니다.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</div>
</form>
</body>
</html>
UpdatePanel 컨트롤을 사용하여 부분 페이지 렌더링을 사용할 수 있도록 만드는 방법에 대한 추가 예제는 코드 예제 단원에 나열된 항목을 참조하십시오.
부분 페이지 업데이트를 위해 클라이언트 스크립트 사용
Microsoft AJAX 라이브러리의 ECMAScript(JavaScript) PageRequestManager 클래스에서는 부분 페이지 업데이트를 지원합니다. 이 클래스는 브라우저에서 실행되어 비동기 포스트백에 대한 응답을 관리하고 개별 영역의 내용을 업데이트합니다. 별도의 작업 없이도 이 기능을 사용할 수 있습니다. 페이지에 하나 이상의 UpdatePanel 컨트롤 및 ScriptManager 컨트롤이 있으면 이 기능이 자동으로 수행됩니다.
또한 JavaScript 및 PageRequestManager 클래스를 사용하여 페이지의 부분 페이지 업데이트를 사용자 지정할 수 있습니다. 예를 들어 둘 이상의 비동기 포스트백이 진행되고 있는 경우 특정 비동기 포스트백에 우선 순위를 설정하는 스크립트를 작성할 수 있습니다. 또한 사용자가 진행 중인 포스트백을 취소할 수 있도록 설정할 수 있습니다.
다음 예제에서는 페이지 로딩이 완료될 때 호출되는 이벤트 처리기를 지정하는 클라이언트 스크립트를 보여 줍니다.
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
Microsoft AJAX 라이브러리에서 부분 페이지 렌더링을 사용하는 방법에 대한 자세한 내용은 PageRequestManager 이벤트 작업 및 ASP.NET PageRequestManager 클래스 개요를 참조하십시오.
부분 페이지 렌더링 지원 사용
ScriptManager 컨트롤의 EnablePartialRendering 속성을 설정하여 페이지에서 부분 페이지 렌더링을 사용하거나 사용하지 않을 수 있습니다. 또한 ScriptManager 컨트롤의 SupportsPartialRendering 속성을 설정하여 페이지에서 부분 페이지 렌더링이 지원되는지 여부를 지정할 수 있습니다. SupportsPartialRendering 속성을 설정할 수 없는 경우와 EnablePartialRendering 속성이 true(기본값)인 경우에는 브라우저 기능을 사용하여 부분 페이지 렌더링이 지원되는지 여부를 지정합니다.
페이지에서 부분 페이지 렌더링을 사용할 수 없거나, 부분 페이지 렌더링을 사용할 수 없도록 설정했거나, 브라우저에서 부분 페이지 렌더링을 지원하지 않는 경우에는 페이지에서 대체(fallback) 동작을 사용합니다. 일반적으로 비동기 포스트백을 수행하는 동작에서 대신 동기 포스트백을 수행하고 전체 페이지를 업데이트합니다. 페이지의 UpdatePanel 컨트롤은 무시되고 해당 내용은 UpdatePanel 컨트롤 내에 없는 것처럼 렌더링됩니다.
.gif "참고") 참고: |
|---|
레거시 렌더링용으로 구성된 ASP.NET 웹 페이지에서는 AJAX 기능을 지원하지 않습니다. 자세한 내용은 ASP.NET 및 XHTML을 참조하십시오. |
코드 예제
다음 예제에서는 제대로 동작하는 부분 페이지 렌더링을 보여 줍니다. 여기에는 두 개의 UpdatePanel 컨트롤이 있습니다. 한 컨트롤은 사용자 입력을 받고 다른 컨트롤은 입력에 대한 요약을 표시합니다.
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Enter New Employees</title>
<script >
Private EmployeeList As List(Of Employee)
Protected Sub Page_Load()
If Not IsPostBack Then
EmployeeList = New List(Of Employee)
EmployeeList.Add(New Employee(1, "Jump", "Dan"))
EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
ViewState("EmployeeList") = EmployeeList
Else
EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
End If
EmployeesGridView.DataSource = EmployeeList
EmployeesGridView.DataBind()
End Sub
Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
String.IsNullOrEmpty(LastNameTextBox.Text) Then Return
Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1
Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
EmployeeList.Add(New Employee(employeeID, lastName, firstName))
ViewState("EmployeeList") = EmployeeList
EmployeesGridView.DataBind()
EmployeesGridView.PageIndex = EmployeesGridView.PageCount
End Sub
Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
End Sub
<Serializable()> _
Public Class Employee
Private _employeeID As Integer
Private _lastName As String
Private _firstName As String
Public ReadOnly Property EmployeeID() As Integer
Get
Return _employeeID
End Get
End Property
Public ReadOnly Property LastName() As String
Get
Return _lastName
End Get
End Property
Public ReadOnly Property FirstName() As String
Get
Return _firstName
End Get
End Property
Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
_employeeID = employeeID
_lastName = lastName
_firstName = firstName
End Sub
End Class
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Enter New Employees</title>
<script >
private List<Employee> EmployeeList;
protected void Page_Load()
{
if (!IsPostBack)
{
EmployeeList = new List<Employee>();
EmployeeList.Add(new Employee(1, "Jump", "Dan"));
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
ViewState["EmployeeList"] = EmployeeList;
}
else
EmployeeList = (List<Employee>)ViewState["EmployeeList"];
EmployeesGridView.DataSource = EmployeeList;
EmployeesGridView.DataBind();
}
protected void InsertButton_Click(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
string firstName = Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
EmployeeList.Add(new Employee(employeeID, lastName, firstName));
ViewState["EmployeeList"] = EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
}
[Serializable]
public class Employee
{
private int _employeeID;
private string _lastName;
private string _firstName;
public int EmployeeID
{
get { return _employeeID; }
}
public string LastName
{
get { return _lastName; }
}
public string FirstName
{
get { return _firstName; }
}
public Employee(int employeeID, string lastName, string firstName)
{
_employeeID = employeeID;
_lastName = lastName;
_firstName = firstName;
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
방법 및 연습 항목
클래스 참조
다음 표에서는 부분 페이지 렌더링과 관련된 핵심 서버 클래스를 보여 줍니다.
클래스 |
설명 |
|---|---|
부분 페이지 렌더링 동안 업데이트할 페이지 영역을 지정합니다. |
|
ASP.NET 웹 페이지에서 ASP.NET의 AJAX 구성 요소, 부분 페이지 렌더링, 클라이언트 요청 및 서버 응답을 관리합니다. |
|
중첩 구성 요소에서 ScriptManager 컨트롤을 부모 요소에 이미 포함하고 있는 페이지에 스크립트 및 서비스 참조를 추가할 수 있도록 합니다. |
다음 표에서는 부분 페이지 렌더링과 관련된 핵심 클라이언트 클래스를 보여 줍니다.
클래스 |
설명 |
|---|---|
클라이언트 부분 페이지 렌더링을 관리하고 사용자 지정 클라이언트 스크립팅을 위한 멤버를 노출합니다. |