Обновление части страницы

В элементе управления UpdatePanel имеется шаблон содержимого (), который, в свою очередь, содержит элементы, образующие панель. Прекрасной иллюстрацией может служить компонент ASP.NET 2.0 – GridView (наследник компонента DataGrid в ASP.NET 1.0).

В настройке таких параметров компонента GridView, как порядок сортировки и возможность редактирования с помощью Visual Studio 2005 (включая Visual Web Developer Express Edition), нет ничего сложного.

Однако, когда с таблицей выполняются какие-либо операции – сортировка, листание, переключение в режим редактирования или выход из него – производится отправка данных на сервер с последующим принудительным обновлением всей страницы. Поместив компонент GridView в раздел элемента управления UpdatePanel, вы получите ту же функциональность, но в этом случае обновления всей страницы происходить уже не будет. Все необходимое будет сделано платформой ASP.NET AJAX и объектом XMLHttpRequest. (На самом деле компонент GridView поддерживает свойство EnableSortingAndPagingCallbacks, которое реализует аналогичную функциональность.

Кроме того, позднее вы узнаете, насколько незначителен объем программного кода, который нужно добавить, чтобы избежать полного обновления страницы при работе с любым компонентом ASP.NET.)

Ниже приводится пример размещения компонента GridView внутри элемента управления UpdatePanel (здесь снова предполагается использование базы данных AdventureWorks).


Обратите внимание: текст разметки требует, чтобы строка подключения к базе данных AdventureWorks была сохранена в файле Web.config. При использовании Visual Studio и Visual Web Developer это делается автоматически – при перетаскивании таблицы из окна Database Explorer (Server Explorer в Visual Studio) на страницу в режиме проектирования. Обратите внимание, что в данном примере в окне Database Explorer имя Purchasing.Vendor отображается как Vendor (Purchasing).

(asp:UpdatePanel id="UpdatePanel1" runat="server")

(asp:GridView ID="GridView1" runat="server"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
DataKeyNames="VendorID" DataSourceID="SqlDataSource1"
EmptyDataText="There is no data to display.")
[...]
(/asp:GridView)
(asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString=
"<%$ ConnectionStrings:AdventureWorksConnectionString1 %>"...)
[...]
(/asp:SqlDataSource)

(/asp:UpdatePanel)

После передачи значения атрибута id элементу управления UpdatePanel вы получаете возможность использовать преимущества поддержки SmartTag в режиме проектирования.


Хотя единственное доступное в настоящий момент действие SmartTag – это добавление элемента ScriptManager в страницу. Главное же удобство заключается в возможности перетаскивать таблицы базы данных из окна Database Explorer в элемент UpdatePanel.
Для демонстрации того, что полного обновления страницы действительно не происходит, мы добавим на страницу элемент управления Label.
(asp:Label ID="CurrentTime" runat="server" /)

Этот компонент будет отображать текущее время на сервере. Если будет происходить полное обновление страницы, то следующий фрагмент будет обновлять содержимое компонента Label.

protected void Page_Load(object sender, EventArgs e)
{
CurrentTime.Text = DateTime.Now.ToLongTimeString();
}

Полный исходный текст данного примера приводится в примере 6.1.
Пример 6.1. Компонент GridView, обновление которого происходит
без перезагрузки страницы
UpdatePanel.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd">
ASP.NET AJAX

(body)
(asp:ScriptManager ID="ScriptManager1" runat="server")
(/asp:ScriptManager)
(asp:Label ID="CurrentTime" runat="server" /)
(asp:UpdatePanel ID="UpdatePanel1" runat="server")

(asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="VendorID"
DataSourceID="SqlDataSource1"
EmptyDataText="there is no data to display.")

(asp:CommandField ShowEditButton="True" /)
(asp:BoundField DataField="VendorID" HeaderText="VendorID"
ReadOnly="True" SortExpression="VendorID" /)
(asp:BoundField DataField="AccountNumber"
HeaderText="AccountNumber"
SortExpression="AccountNumber" /)
(asp:BoundField DataField="Name" HeaderText="Name"
SortExpression="Name"/)
(asp:BoundField DataField="CreditRating" HeaderText="CreditRating"
SortExpression="CreditRating" /)
(asp:CheckBoxField DataField="PreferredVendorStatus"
HeaderText="PreferredVendorStatus"
SortExpression="PreferredVendorStatus" /)
(asp:CheckBoxField DataField="ActiveFlag" HeaderText="ActiveFlag"
SortExpression="ActiveFlag" /)
(asp:BoundField DataField="PurchasingWebServiceURL"
HeaderText="PurchasingWebServiceURL"
SortExpression="PurchasingWebServiceURL" /)
(asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate"
SortExpression="ModifiedDate" /)

(/asp:GridView)
(asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString=
"<%$ ConnectionStrings:AdventureWorksConnectionString1 %)"
DeleteCommand=
"DELETE FROM [Purchasing].[Vendor] WHERE [VendorID] = @VendorID"
ProviderName="<%$ СonnectionStrings:AdventureWorksConnection?
String1.ProviderName %>"
SelectCommand="SELECT [VendorID], [AccountNumber], [Name],
[CreditRating], [PreferredVendorStatus],
[ActiveFlag], [PurchasingWebServiceURL],
[ModifiedDate] FROM [Purchasing].[Vendor]"
UpdateCommand="UPDATE [Purchasing].[Vendor] SET [AccountNumber] =
@AccountNumber, [Name] = @Name, [CreditRating] = @CreditRating,
[PreferredVendorStatus] = @PreferredVendorStatus, [ActiveFlag] = @ActiveFlag,
[PurchasingWebServiceURL] = @PurchasingWebServiceURL, [ModifiedDate] =
@ModifiedDate WHERE [VendorID] = @VendorID">
(asp:Parameter Name="AccountNumber" Type="String" /)
(asp:Parameter Name="Name" Type="String" /)
(asp:Parameter Name="CreditRating" Type="Byte" /)
(asp:Parameter Name="PreferredVendorStatus" Type="Boolean" /)
(asp:Parameter Name="ActiveFlag" Type="Boolean" /)
(asp:Parameter Name="PurchasingWebServiceURL" Type="String" /)
(asp:Parameter Name="ModifiedDate" Type="DateTime" /)
(asp:Parameter Name="VendorID" Type="Int32" /)


(asp:Parameter Name="VendorID" Type="Int32" /)

(/asp:SqlDataSource)

(/asp:UpdatePanel)

(/body)


Используйте эти функциональные возможности с осторожностью и всегда помните о возможных побочных эффектах.


Например, операция загрузки (upload) файла при исполнении внутри элемента управления UpdatePanel сопряжена с некоторыми проблемами.
Если для нужд приложения достаточно будет HTML-элемента