사용자 정의 컨트롤에서 ASP.NET UpdatePanel 컨트롤 사용
업데이트: 2007년 11월
웹 페이지의 다른 컨트롤의 경우와 마찬가지로 사용자 정의 컨트롤에 대해 부분 페이지 업데이트를 사용하도록 설정할 수 있습니다. 페이지에 ScriptManager 컨트롤을 추가하고 EnablePartialRendering 속성을 true로 설정해야 합니다. ScriptManager 컨트롤은 ASP.NET 웹 페이지 위에 직접 있거나 페이지의 사용자 정의 컨트롤 안에 있는 UpdatePanel 컨트롤에 대한 부분 페이지 업데이트를 관리합니다.
간단한 시나리오의 경우 사용자 정의 컨트롤을 업데이트 패널 안에 놓을 수 있으며 업데이트 패널의 내용이 업데이트될 때마다 이러한 컨트롤이 새로 고쳐집니다. 또한 사용자 정의 컨트롤이 부분 페이지 업데이트를 지원하도록 UpdatePanel 컨트롤을 사용자 정의 컨트롤 안에 둘 수 있습니다. 그러나 이 경우 사용자 정의 컨트롤을 페이지에 추가하는 페이지 개발자는 호스트 웹 페이지에서 ScriptManager 컨트롤을 명시적으로 추가해야 합니다.
컨트롤을 프로그래밍 방식으로 사용자 정의 컨트롤에 추가하는 중이면 ScriptManager 컨트롤이 페이지에 있는지 여부를 확인할 수 있습니다. 그런 다음 UpdatePanel 컨트롤을 사용자 정의 컨트롤에 추가하기 전에 EnablePartialRendering 속성이 true로 설정되었는지 확인할 수 있습니다. 웹 서버 컨트롤에서 이 작업을 수행하는 방법을 보여 주는 예제는 데이터 바인딩된 컨트롤에서 ASP.NET UpdatePanel 컨트롤 사용을 참조하십시오.
독립적으로 업데이트하려는 여러 사용자 정의 컨트롤이 웹 페이지에 존재할 수 있습니다. 이 경우 하나 이상의 UpdatePanel 컨트롤을 사용자 정의 컨트롤 안에 포함시키고 사용자 정의 컨트롤을 확장하여 자식 UpdatePanel 컨트롤의 기능을 공개적으로 노출할 수 있습니다.
이 자습서의 예제에는 UpdatePanel 컨트롤 안에 내용이 있는 두 개의 사용자 정의 컨트롤이 포함되어 있습니다. 각 사용자 정의 컨트롤은 내부 UpdatePanel 컨트롤의 UpdateMode 속성을 노출하므로 각 사용자 정의 컨트롤에 대해 이 속성을 명시적으로 설정할 수 있습니다. 또한 각 사용자 정의 컨트롤은 내부 UpdatePanel 컨트롤의 Update 메서드를 노출하므로 외부 소스는 사용자 정의 컨트롤의 내용을 명시적으로 새로 고칠 수 있습니다.
여러 사용자 정의 컨트롤을 사용하는 ASP.NET 웹 페이지 만들기
이 자습서의 예제에서는 AdventureWorks 샘플 데이터베이스에서 직원 정보의 마스터-세부 페이지를 만듭니다. 하나의 사용자 정의 컨트롤에서 GridView 컨트롤을 사용하여 직원 이름 목록을 표시하고 선택, 페이징 및 정렬을 지원합니다. 또 다른 사용자 정의 컨트롤에서는 DetailsView 컨트롤을 사용하여 선택한 직원에 대한 세부 정보를 표시합니다.
직원 목록 사용자 정의 컨트롤은 선택한 직원의 ID를 뷰 상태에 저장합니다. 따라서 표시되는 데이터 페이지나 목록이 정렬된 방법에 상관없이 선택한 직원만 GridView 컨트롤에서 강조 표시됩니다. 또한 사용자 정의 컨트롤은 선택한 직원을 직원 목록에서 볼 수 있는 경우에만 직원 세부 정보 사용자 정의 컨트롤이 표시되도록 합니다.
예제에서 직원 세부 정보 사용자 정의 컨트롤은 UpdatePanel 컨트롤을 포함합니다. 직원이 선택되면 업데이트 패널이 새로 고쳐집니다. 또한 선택한 직원을 표시하는 GridView 컨트롤 페이지에서 사용자가 이동할 경우에도 업데이트 패널이 새로 고쳐집니다. 선택한 직원이 없는 GridView 컨트롤의 페이지를 사용자가 볼 경우 직원 세부 정보 사용자 정의 컨트롤이 표시되지 않고 업데이트 패널이 업데이트되지 않습니다.
사용자 정의 컨트롤에 UpdatePanel 컨트롤 포함
독립적으로 새로 고쳐지는 사용자 정의 컨트롤을 만드는 첫 번째 단계는 다음 예제와 같이 UpdatePanel 컨트롤을 사용자 정의 컨트롤에 포함하는 것입니다.
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.cs" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
UpdatePanel 컨트롤 기능을 공개적으로 노출
다음 단계는 내부 UpdatePanel 컨트롤의 Update 메서드 및 UpdateMode 속성을 노출하는 것입니다. 이렇게 하면 다음 예제와 같이 사용자 정의 컨트롤 외부에서 내부 UpdatePanel 컨트롤의 속성을 설정할 수 있습니다.
Public Property UpdateMode() As UpdatePanelUpdateMode
Get
Return Me.EmployeeInfoUpdatePanel.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.EmployeeInfoUpdatePanel.UpdateMode = value
End Set
End Property
Public Sub Update()
Me.EmployeeInfoUpdatePanel.Update()
End Sub
public UpdatePanelUpdateMode UpdateMode
{
get { return this.EmployeeInfoUpdatePanel.UpdateMode; }
set { this.EmployeeInfoUpdatePanel.UpdateMode = value; }
}
public void Update()
{
this.EmployeeInfoUpdatePanel.Update();
}
웹 페이지에 사용자 정의 컨트롤 추가
이제 사용자 정의 컨트롤을 ASP.NET 웹 페이지에 추가하고 내부 UpdatePanel 컨트롤의 UpdateMode 속성을 선언적으로 설정할 수 있습니다. 이 예제에서 두 사용자 정의 컨트롤의 UpdateMode 속성은 Conditional로 설정됩니다. 이는 다음 예제와 같이 업데이트가 명시적으로 요청될 경우에만 업데이트가 수행된다는 것을 의미합니다.
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
코드를 추가하여 사용자 정의 컨트롤 새로 고침
사용자 정의 컨트롤을 명시적으로 업데이트하려면 내부 UpdatePanel 컨트롤의 Update 메서드를 호출합니다. 다음 예제에는 직원 목록 사용자 정의 컨트롤의 SelectedIndexChanged 이벤트에 대한 처리기가 포함되어 있으며 이 이벤트는 내부 GridView 컨트롤의 SelectedIndexChanged 이벤트가 발생할 경우 발생합니다. 직원이 선택된 경우 또는 직원 목록의 현재 페이지가 선택된 직원을 더 이상 표시하지 않을 경우 처리기의 코드는 직원 세부 정보 사용자 정의 컨트롤을 명시적으로 업데이트합니다.
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}