Упражнение 4 - Добавление элемента управления UpdateProgress на страницу
Элемент управления UpdateProgress отображает сообщение о состоянии, когда
запрашивается новое содержимое для элемента управления UpdatePanel. Чтобы добавить элемент управления UpdateProgress на страницу, выполните
следующие действия.
Из вкладки Расширения Ajax панели элементов перетащите элемент управления UpdateProgress на страницу в элемент управления UpdatePanel.
Выберите элемент управления UpdateProgress и в окне "Свойства" установите для свойства AssociatedUpdatePanelID значение UpdatePanel1.
Это связывает элемент управления UpdateProgress с добавленным ранее элементом UpdatePanel.
В области редактирования элемента управления UpdateProgress введите "Getting Employees ...". .
Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в
обозревателе.
Если во время выполнения SQL-запроса и получения данных есть задержка,
элемент управления UpdateProgress отображает сообщение, введенное в элемент управления UpdateProgress.
Рис. 3. Промежуточный результат
Т.к. в данном случае задержки при просмотри страниц нет, то мы не видим работы элемента управления UpdatePanel.
Упражнение 5 - Добавление задержки в пример приложения
Чтобы добавить задержку в пример приложения, выполните следующие действия.
В элементе управления UpdatePanel выберите элемент управления GridView.
В окне "Свойства" нажмите кнопку “События”.
Дважды щелкните событие PageIndexChanged, чтобы создать обработчик событий.
Добавьте следующий код к обработчику PageIndexChanged, который искусственносоздает трехсекундную задержку:
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в
обозревателе.
Из-за трехсекундной задержки при перемещении на новую страницу пользователь
может видеть элемент управления UpdateProgress.
<%@ 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 GridView1_PageIndexChanged(object sender, EventArgs e)
{
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"
AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None"
OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" FontBold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333"
HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString
%>"
SelectCommand="SELECT FirstName, LastName FROM
HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees...
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
Листинг
Employees.aspx
<%@ 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 GridView1_PageIndexChanged(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
height: 447px;
width: 1002px;
}
</style>
</head>
<body class="style1">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None"
onpageindexchanged="GridView1_PageIndexChanged">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName"
SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName"
SortExpression="LastName" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee
ORDER BY LastName, FirstName "></asp:SqlDataSource>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Getting Employees ...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Результат работы программы:
Рис.4. Результат
Вывод: Выполнив данную лабораторную работу, мы создали приложение, отображающее страницы с данными о сотрудниках из образца базы данных AdventureWorks.
Так же мы научились создавать элементы управления Ajax, задавать для свойства. Для правильности работы мы добавили задержку.