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