可以像為網(wǎng)頁上的其他控件啟用部分頁更新一樣為用戶控件啟用部分頁更新。必須向頁添加 ScriptManager 控件,并將其 EnablePartialRendering 屬性設(shè)置為 true。ScriptManager 控件將管理 UpdatePanel 控件的部分頁更新,這些控件直接位于 ASP.NET 網(wǎng)頁上或位于頁上的用戶控件內(nèi)。
在一個簡單的方案中,可以將用戶控件置于更新面板內(nèi),當(dāng)對更新面板的內(nèi)容進行更新時,將刷新這些用戶控件。也可以將 UpdatePanel 控件置于用戶控件內(nèi),從而使用戶控件支持部分頁更新。但是,在此情況下,將用戶控件添加到頁的頁開發(fā)人員必須在宿主網(wǎng)頁上顯式添加 ScriptManager 控件。
如果以編程方式將控件添加到用戶控件,則可以確定頁上是否存在 ScriptManager 控件。然后,可以確保在將 UpdatePanel 控件添加到用戶控件之前,EnablePartialRendering 屬性已設(shè)置為 true。
您可能會在要單獨更新的網(wǎng)頁上包含多個用戶控件。在此情況下,可以在用戶控件內(nèi)包含一個或多個 UpdatePanel 控件,并擴展用戶控件以公開子 UpdatePanel 控件的功能。
本教程中的示例包括兩個用戶控件,其內(nèi)容位于 UpdatePanel 控件內(nèi)。每個用戶控件公開內(nèi)部 UpdatePanel 控件的 UpdateMode 屬性,以便能夠為每個用戶控件顯式設(shè)置該屬性。每個用戶控件也公開內(nèi)部 UpdatePanel 控件的 Update 的方法,以便外部資源可以顯式刷新用戶控件的內(nèi)容。
創(chuàng)建帶有多個用戶控件的 ASP.NET 網(wǎng)頁
本教程中的示例創(chuàng)建包含 AdventureWorks 示例數(shù)據(jù)庫中的雇員信息的主-詳細信息頁。一個用戶控件使用 GridView 控件來顯示雇員姓名列表并支持選擇、分頁和排序。另一個用戶控件使用 DetailsView 控件來顯示所選雇員的詳細信息
雇員列表用戶控件將所選雇員的 ID 存儲在視圖狀態(tài)中。這樣可確保 GridView 控件中僅突出顯示選定雇員,而與顯示哪一頁的數(shù)據(jù)或列表的排序方式無關(guān)。用戶控件還可以確保僅當(dāng)所選雇員在雇員列表中可見時顯示雇員詳細信息用戶控件。
在此示例中,雇員詳細信息用戶控件包含一個 UpdatePanel 控件。在選擇某個雇員時,將刷新更新面板。當(dāng)用戶從顯示所選雇員的 GridView 控件頁移開時,也將刷新此面板。如果用戶查看未包含所選雇員的 GridView 控件的頁,則不會顯示雇員詳細信息用戶控件且不會對更新面板進行更新。
在用戶控件中包含 UpdatePanel 控件
創(chuàng)建單獨刷新的用戶控件的第一步是在用戶控件中包含 UpdatePanel 控件,如以下示例所示。
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" runat="server"></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" runat="server" 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" runat="server" 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 控件的功能
下一步是公開內(nèi)部 UpdatePanel 控件的 UpdateMode 屬性和 Update 方法。這使您可以從用戶控件的外部設(shè)置內(nèi)部 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
將用戶控件添加到網(wǎng)頁
現(xiàn)在可以將用戶控件添加到 ASP.NET 網(wǎng)頁,并以聲明方式設(shè)置內(nèi)部 UpdatePanel 控件的 UpdateMode 屬性。對于本示例,兩個用戶控件的 UpdateMode 屬性設(shè)置為 Conditional。這意味著只有在顯式請求更新時才會更新這兩個用戶控件,如以下示例所示。
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" runat="server" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" runat="server" UpdateMode="Conditional" />
</td>
</tr>
</table>
添加代碼以刷新用戶控件
若要顯式更新用戶控件,請調(diào)用內(nèi)部 UpdatePanel 控件的 Update 方法。下面的示例包括雇員列表用戶控件的 SelectedIndexChanged 事件的處理程序,此事件在內(nèi)部 GridView 控件的 SelectedIndexChanged 事件引發(fā)時引發(fā)。如果已選定雇員或雇員列表中的當(dāng)前頁不再顯示選定雇員,則此處理程序中的代碼將顯式更新雇員詳細信息用戶控件。
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}