Общие сведения об элементе управления UpdatePanel
Обновлен: Ноябрь 2007
Элемент управления UpdatePanel ASP.NET позволяет создавать богатые клиентские веб-приложения. С помощью элементов управления UpdatePanel можно обновлять отдельные части страницы вместо обновления ее целиком при обратной передаче. Это называется выполнением обновления частичной страницы. Веб-страница ASP.NET, содержащая элемент управления ScriptManager и один или более элемент управления UpdatePanel, может автоматически участвовать в обновлении частичной страницы без участия пользовательского клиентского сценария.
В этом разделе содержатся следующие сведения:
Сценарии.
Базовые сведения.
Примеры кода.
Ссылка на классы.
Сценарии
Элемент управления UpdatePanel — это серверный элемент управления, который помогает разрабатывать веб-страницы со сложной клиентской обработкой, что делает веб-страницы более интерактивными с точки зрения конечного пользователя. Написание кода, взаимодействующего с сервером и клиентом с целью обновления лишь отдельных частей веб-страницы, обычно требует глубокого знания ECMAScript (JavaScript). Однако с помощью элемента управления UpdatePanel можно использовать обновление частичной страницы без написания клиентских сценариев. Если требуется, можно добавить собственный клиентский сценарий для улучшения условий работы пользователя. При использовании элемента управления UpdatePanel поведение страницы не зависит от обозревателя и потенциально уменьшает объем данных, передаваемых между клиентом и сервером.
Базовые сведения
Элементы управления UpdatePanel работают путем указания областей на странице, которые могут обновляться без обновления всей страницы. Этот процесс согласуется серверным элементом управления ScriptManager и клиентским классом PageRequestManager. Когда обновление частичной страницы включено, элементы управления могут асинхронно отправлять данные на сервер. Асинхронный повторный вызов ведет себя аналогично обычному в том, что на сервере выполняется полный жизненный цикл страницы и элемента управления. Тем не менее в случае асинхронного повторного вызова обновления страницы ограничены областями страницы, заключенными в элементы управления UpdatePanel и помеченными как обновляемые. Сервер отправляет в обозреватель разметку HTML только для измененных элементов. В обозревателе клиентский класс PageRequestManager выполняет обработку модели объектов документа (DOM), чтобы заменить существующий HTML обновленной разметкой.
.gif "Примечание") Примечание. |
|---|
При использовании асинхронной обратной передачи или объекта XMLHTTPRequest может возникать ошибка обратной передачи, если URL содержит двухбайтовый символ. Можно решить эту проблему, включив элемент <base href="url"/> в элемент head страницы, где атрибут href установлен равным строке в кодировке URL, которая ссылается на эту страницу. Можно добавить этот элемент, динамически добавленный в код сервера. |
На следующем рисунке показана страница, которая загружена первоначально, и последующий асинхронный повторный вызов, который обновляет содержимое элемента управления UpdatePanel:
Основные сведения об отрисовке частичных страниц
.png "Общие сведения о частичной отрисовке страниц")
Включение обновления частичной страницы
Элемент управления UpdatePanel требует наличия на веб-странице элемента управления ScriptManager. По умолчанию обновление частичной страницы включено, так как значение по умолчанию свойства EnablePartialRendering элемента управления ScriptManager равно true.
В следующем примере показана разметка, которая определяет на странице элементы управления ScriptManager и UpdatePanel. Элемент управления UpdatePanel содержит элемент управления Button, которая обновляет содержимое панели при нажатии. По умолчанию, свойство ChildrenAsTriggers установлено в true. Таким образом, элемент управления Button действует как элемент управления асинхронного повторного вызова.
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Указание содержимого элемента управления UpdatePanel
Содержимое в элемент управления UpdatePanel добавляется декларативно или в конструкторе, используя свойство ContentTemplate. В разметке это свойство представляется как элемент ContentTemplate. Чтобы добавить содержимое программным способом, используется свойство ContentTemplateContainer.
Когда страница, содержащая один или более управляющих элементов UpdatePanel, выполняется сначала, все содержимое управляющих элементов UpdatePanel выполняется и отсылается в обозреватель. При последующих асинхронных повторных вызовах может обновляться лишь содержимое отдельных элементов управления UpdatePanel. Обновления зависят от параметров панели, элемент которой осуществил повторный вызов, и от кода этой конкретной панели.
Указание триггеров UpdatePanel
По умолчанию любой элемент управления обратной передачей в элементе управления UpdatePanel осуществляет асинхронный повторный вызов и обновляет содержимое панели. Однако можно настроить другие элементы управления на странице на обновление элемента управления UpdatePanel. Это делается определением триггера для элемента управления UpdatePanel. Триггер — это привязка, которая указывает элемент управления обратной передачи и событие, вызывающее обновление панели. При возникновении указанного события триггера (например события кнопки Click), панель обновляется.
В следующем примере демонстрируется, как указать триггер для элемента управления UpdatePanel:
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Триггер определяется с помощью элемента asp:AsyncPostBackTrigger в элементе Triggers элемента управления UpdatePanel. (При редактировании страницы в Visual Studio можно создавать триггеры с помощью диалогового окна Редактор коллекции UpdatePanelTrigger.)
Не обязательно указывать событие триггера. Если событие не задано, событие триггера — это событие по умолчанию для элемента управления. Например, событием по умолчанию для элемента управления Button является событие Click.
Обновление элементов управления UpdatePanel
В следующем списке описываются параметры свойств элемента управления UpdatePanel, которые обуславливают обновление содержимого панели во время отрисовки частичных страниц.
Если свойство UpdateMode установлено в Always, содержимое элемента управления UpdatePanel обновляется при каждой обратной передаче, берущей начало из любого места на странице. Это включает асинхронные обратные передачи из элементов управления, находящихся внутри других элементов управления UpdatePanel, и обратные передачи от элементов управления, не находящихся внутри элементов управления UpdatePanel.
Если свойство UpdateMode установлено в Conditional, содержимое UpdatePanel обновляется при выполнении любого из следующих условий:
Когда повторный вызов осуществлен триггером данного элемента управления UpdatePanel.
При явном вызове метода Update элемента управления UpdatePanel.
Когда элемент управления UpdatePanel вложен в другой элемент управления UpdatePanel, и обновляется родительская панель.
Когда свойство ChildrenAsTriggers установлено в true, дочерний элемент управления UpdatePanel вызывает обратную передачу. Дочерние элементы управления вложенных UpdatePanel не вызывают обновление родительского UpdatePanel, если только они не определены явно как триггеры для родительской панели.
Если свойство ChildrenAsTriggers установлено равным false и свойство UpdateMode установлено равным Always, создается исключение. Свойство ChildrenAsTriggers предназначено для использования, только если свойство UpdateMode установлено в Conditional.
Использование элементов управления UpdatePanel на главных страницах
Чтобы использовать элемент управления UpdatePanel на главной странице, необходимо решить, как включать элемент управления ScriptManager. Если включить ScriptManager на главной странице, он может использоваться в качестве элемента управления ScriptManager для всех страниц содержимого. (Если вы хотите декларативно зарегистрировать сценарии или службы на странице содержимого, можно добавить элемент управления ScriptManagerProxy на эту страницу.)
Если главная страница не содержит элемент управления ScriptManager, можно поместить ScriptManager на каждую страницу содержимого, содержащую элемент управления UpdatePanel. Выбор зависит от того, как предполагается управлять клиентским сценарием в приложении. Дополнительные сведения об управлении клиентским сценарием содержатся в разделе Общие сведения об элементе управления ScriptManager. Дополнительные сведения о главных страницах см. в разделе Общие сведения о главных страницах ASP.NET.
В некоторых случаях элемент управления ScriptManager находится на главной странице, и нет необходимости в отрисовке частичных страниц на странице содержимого. Тогда для этой страницы содержимого необходимо программно установить свойство EnablePartialRendering элемента управления ScriptManager в значение false.
В следующем примере показана разметка для ScriptManager на главной странице и для UpdatePanel на странице содержимого. В этом примере свойство LastUpdate определено на главной странице и используется в UpdatePanel.
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Public Property LastUpdate() As DateTime
Get
If ViewState("LastUpdate") Is Nothing Then
Return DateTime.Now
Else : Return ViewState("LastUpdate")
End If
End Get
Set(ByVal value As DateTime)
ViewState("LastUpdate") = value
End Set
End Property
Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
LastUpdate = DateTime.Now
Dim up1 As UpdatePanel
up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
up1.Update()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(Button2)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
<asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
public DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="MasterPanel1" runat="server" GroupingText="Master Page">
<asp:Button ID="Button1" runat="server" Text="Full Page Refresh" />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script runat="server">
Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
Master.LastUpdate = DateTime.Now
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
</asp:ScriptManagerProxy>
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
runat="server" >
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script runat="server">
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
runat="server" >
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
Использование вложенных элементов управления UpdatePanel
Элементы управления UpdatePanel могут быть вложенными. При обновлении родительской панели все вложенные панели также обновляются.
В следующем примере показана разметка, определяющая элемент управления UpdatePanel внутри другого элемента управления 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 runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
runat="server" />
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</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 runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
runat="server" />
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
В следующем примере демонстрируется вложенный элемент управления UpdatePanel с элементом управления GridView. Элемент управления GridView находится в UpdatePanel, а каждая строка в GridView содержит вложенный элемент управления GridView в другой UpdatePanel.
<%@ Page Language="VB" %>
<!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 runat="server">
<title>Browse Departments</title>
<script runat="server">
Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
End If
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label runat="server" ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label runat="server" ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Browse Departments</title>
<script runat="server">
protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label runat="server" ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label runat="server" ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Когда внутренний элемент управления GridView показывает новую страницу записей, внешняя панель и панели в других строках внешнего элемента управления GridView не обновляются. При отображении новой страницы записей внешним элементом управления GridView внешняя панель и все вложенные панели обновляются.
Программное обновление UpdatePanel
Следующий пример демонстрирует программное обновление элемента управления UpdatePanel. В этом примере страница регистрирует элемент управления как триггер с помощью метода RegisterAsyncPostBackControl. Код программно обновляет элемент управления UpdatePanel с помощью метода Update.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Property AnsweredQuestions As SortedList
Get
If ViewState("AnsweredQuestions") IsNot Nothing Then
Return CType(ViewState("AnsweredQuestions"), SortedList)
Else
Return New SortedList()
End If
End Get
Set
ViewState("AnsweredQuestions") = value
End Set
End Property
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim answers As SortedList = Me.AnsweredQuestions
Dim r As RadioButtonList = CType(sender, RadioButtonList)
answers(r.ToolTip) = r.SelectedValue
Me.AnsweredQuestions = answers
ResultsList.DataSource = Me.AnsweredQuestions
ResultsList.DataBind()
If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
SubmitButton.Visible = True
UpdatePanel1.Update()
End Sub
Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
' Submit responses.
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" runat="server">
<ItemTemplate>
<asp:Label ID="ResultQuestion" runat="server" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" runat="server" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" runat="server" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
runat="server"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' runat="server" />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList" runat="server"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</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 runat="server">
protected SortedList AnsweredQuestions
{
get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
set { ViewState["AnsweredQuestions"] = value; }
}
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
{
SortedList answers = this.AnsweredQuestions;
RadioButtonList r = (RadioButtonList)sender;
answers[r.ToolTip] = r.SelectedValue;
this.AnsweredQuestions = answers;
ResultsList.DataSource = this.AnsweredQuestions;
ResultsList.DataBind();
if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
SubmitButton.Visible = true;
UpdatePanel1.Update();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
// Submit responses.
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" runat="server">
<ItemTemplate>
<asp:Label ID="ResultQuestion" runat="server" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" runat="server" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" runat="server" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
runat="server"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
runat="server">
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' runat="server" />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList" runat="server"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Программное создание элементов управления UpdatePanel
Чтобы программно добавить элемент управления UpdatePanel на страницу, нужно создать новый экземпляр элемента управления UpdatePanel. Потом элементы управления добавляются на него при помощи свойства ContentTemplateContainer и метода ControlCollection.Add. Не добавляйте элементы управления непосредственно в свойство ContentTemplate.
Когда элемент управления UpdatePanel добавляется программными средствами, только повторные вызовы от элементов управления в том же контейнере именования, что и UpdatePanel, могут быть использованы как триггеры для панели.
В следующем примере демонстрируется, как программно добавить на страницу элемент управления UpdatePanel. В примере на панель добавляются Label и Button с помощью свойства ContentTemplateContainer. Так как свойство ChildrenAsTriggers по умолчанию установлено в true, то элемент управления Button действует как триггер для панели.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()
up1.ID = "UpdatePanel1"
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Dim button1 As Button
button1 = New Button()
button1.ID = "Button1"
button1.Text = "Submit"
AddHandler button1.Click, AddressOf Button_Click
Dim label1 As Label
label1 = New Label()
label1.ID = "Label1"
label1.Text = "A full page postback occurred."
up1.ContentTemplateContainer.Controls.Add(button1)
up1.ContentTemplateContainer.Controls.Add(label1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim lbl As Label
lbl = Page.FindControl("Label1")
lbl.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="TheScriptManager"
runat="server" />
</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 runat="server">
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="TheScriptManager"
runat="server" />
</div>
</form>
</body>
</html>
Элементы управления, не совместимые с UpdatePanel
Следующие элементы управления ASP.NET не совместимы с обновлением частичных страниц и, таким образом, не предназначены для работы в элементе управления UpdatePanel:
Элемент управления TreeView при определенных условиях. Первое: включены обратные вызовы, которые не являются частью асинхронных повторных вызовов. Так же, если стили заданы непосредственно как свойства элемента управления вместо неявного применения стилей с помощью ссылок на стили CSS. А также при значении false свойства EnableClientScript (по умолчанию — true). А также при изменении значения свойства EnableClientScript между асинхронными повторными вызовами. Дополнительные сведения см. в разделе Общие сведения о серверном веб-элементе управления TreeView.
Элемент управления Menu, если стили заданы непосредственно как свойства элемента управления вместо неявного применения стилей с помощью ссылок на стили CSS. Дополнительные сведения см. в разделе Общие сведения об элементе управления Menu.
Элементы управления FileUpload и HtmlInputFile при их использовании для отправки файлов как части асинхронного повторного вызова.
Элементы управления GridView и DetailsView, если их свойство EnableSortingAndPagingCallbacks установлено в true. Значение по умолчанию — false.
Элементы управления Login, PasswordRecovery, ChangePassword и CreateUserWizard, содержимое которых не было преобразовано в изменяемые шаблоны.
Элемент управления Substitution.
Для использования элементов управления FileUpload и HtmlInputFile в UpdatePanel установите элемент управления обратной передачей, который отправляет файл, как элемент управления PostBackTrigger для панели. Элементы управления FileUpload и HtmlInputFile можно использовать только в сценариях обратной передачи.
Все другие элементы управления в UpdatePanel работают. Однако в некоторых случаях элемент управления в UpdatePanel может работать не так, как ожидалось. К этим обстоятельствам относятся:
Регистрация сценария путем вызова методов регистрации ClientScriptManager.
Сценарий отрисовки или разметки непосредственно во время отрисовки элемента управления, например путем вызова метода Write.
Если элемент управления вызывает методы регистрации сценариев элемента управления ClientScriptManager, можно использовать вместо них соответствующие методы регистрации сценариев элемента управления ScriptManager. В этом случае элемент управления может работать в UpdatePanel.
Использование элементов управления веб-частей в UpdatePanel
Веб-части ASP.NET – это интегрированный набор элементов управления для создания веб-узлов, позволяющих конечным пользователям изменять содержимое, внешний вид и поведение веб-страниц непосредственно из обозревателя. Элементы управления веб-частей можно использовать в UpdatePanel со следующими ограничениями:
Каждый элемент управления WebPartZone должен быть внутри того же UpdatePanel. Например, на странице нельзя использовать два элемента управления UpdatePanel, каждый из которых имеет свой собственный элемент управления WebPartZone.
Элемент управления WebPartManager управляет всеми сведениями о состоянии клиента для элементов управления веб-частей. Он должен находиться во внешнем элементе управления UpdatePanel на странице.
Нельзя осуществлять импорт или экспорт элементов управления веб-частей с помощью асинхронных повторных вызовов. (Для выполнения этой задачи требуется элемент управления FileUpload, который не может использоваться с асинхронными повторными вызовами.) По умолчанию импорт элементов управления веб-частей осуществляет полный повторный вызов.
Нельзя добавлять или изменять стили элементов управления веб-частей во время асинхронных повторных вызовов.
Дополнительные сведения об элементах управления веб-частей см. в разделе Общие сведения о веб-частях ASP.NET.
Свойства и методы, не поддерживаемые при асинхронных повторных вызовах
Следующие сценарии установки на странице кнопки повторного вызова по умолчанию не поддерживаются при асинхронных повторных вызовах:
Программное изменение DefaultButton при асинхронном повторном вызове.
Программное изменение DefaultButton при асинхронном повторном вызове, когда Panel не находится в UpdatePanel.
Следующие методы класса HttpResponse поддерживаются только в сценариях обратной передачи, но не в сценариях асинхронных повторных вызовов:
Примеры кода
Следующие разделы содержат примеры, которые показывают, как создавать и использовать UpdatePanel.
Практические и пошаговые руководства
Создание простой страницы ASP.NET с несколькими элементами управления UpdatePanel.
Использование элемента управления UpdatePanel ASP.NET с элементами управления с привязкой к данным.
Использование элемента управления UpdatePanel ASP.NET с главными страницами.
Использование элемента управления ASP.NET UpdatePanel с пользовательскими элементами управления.
Использование элемента управления UpdatePanel c веб-службой.
Настройка обработки ошибок для элементов управления ASP.NET UpdatePanel.
Пошаговое руководство. Анимирование элементов управления ASP.NET UpdatePanel.
Предоставление приоритета определенным асинхронным обратным запросам.
Ссылка на классы
Ключевые серверные классы для управляющих элементов UpdatePanel представлены в следующей таблице:
Класс |
Описание |
|---|---|
Серверный элемент управления, определяющий части веб-страницы, которые могут участвовать в обновлении частичной страницы. |
|
Серверный элемент управления, который управляет отрисовкой частичных страниц. Элемент управления ScriptManager регистрирует компоненты сценариев, отправляемые обозревателю. Он также переопределяет отрисовку страницы так, что отображаются только указанные области страницы. |
|
Серверный элемент управления, который позволяет вложенным компонентам (таким как страницы содержимого или пользовательские элементы управления) ссылаться на сценарии и веб-службы. Этот элемент управления полезен, если родительский элемент уже содержит элемент управления ScriptManager. |
|
Класс в Microsoft AJAX (библиотека), который координирует отрисовку частичных страниц в обозревателе. Класс PageRequestManager асинхронно обменивается данными с сервером и предоставляет события и методы для разработки пользовательских клиентских сценариев. |
Дополнительные подразделы
Общие сведения о жизненном цикле веб-страниц ASP.NET.
См. также
Задачи
Знакомство с элементом управления UpdatePanel
Создание простой страницы ASP.NET с несколькими элементами управления UpdatePanel
Основные понятия
Общие сведения об элементе управления UpdateProgress