Помнится, в одном коммьюнити я говорил, что использование MS Atlas – штука простая и в большинстве случаев сводится к применению контрола UpdatePanel. Давайте посмотрим на это на конкретном примере. Сегодня я покажу пример реального приложения.
Итак, дано: существует база данных, в которой хранятся сообщения от клиентов менеджерам и обратно. Список сообщений хранится в MS SQL и выводится хранимой процедурой. Конкретное сообщение также получаем через хранимую процедуру, принимающую один параметр. Плюс, на странице будет возможность переключить тип сообщения – входящий или исходящий.
Итого нам потребуется: DropDownList с выбором типа сообщения, GridView со списком сообщений и FormView для просмотра сообщения. Что ж, начнем с дропдауна.
Для DropDownList руками вводим 2 пункта: «Входящие» и «Исходящие», значения, соответственно, 1 и 2. AutoPostBack выставляем true.
Теперь давайте займемся GridView. Для него нам важно настроить DataSource.
Целиком процесс я показывать не буду: уверен, что все, кто работает с ASP.Net 2.0 это видели далеко не раз, а новичкам не даст заблудиться толковый визард. Нас в этом заинтересует лишь вкладка с параметрами, передаваемыми хранимой процедуре. Нам необходимо выставить, что тип сообщения передается от дропдауна, который мы настроили раньше.
После настройки DataSource автоматом будет создан список колонок с названиями, соответствующими названиям полей в базе. В свойствах грида укажем, что он поддерживает сортировку, пейджинг и выбор.
Затем отредактируем список колонок и поменяем их названия.
Укажем ключевое поле, по которому у нас будет отбираться в дальнейшем сообщение (DataKeyNames)
.
Что ж, настала очередь FormView. Для него нам тоже потребуется настроить DataSource. На сей раз параметр для хранимой процедуры передается из уже настроенного GridView.
После настройки DataSource автоматически формируются шаблоны. Опять же, мы их немного поправим.
Костяк страницы у нас готов. Мы можем запустить и посмотреть результат. Всё должно работать.
Наверняка вы спросите: а при чем здесь AJAX? Всё, что мы только что сделали – обычная страница ASP.Net 2.0, и ничего нового и интересного тут нет. Что ж, давайте займемся AJAX, а точнее – MS Atlas.
Для начала на страницу нам потребуется добавить AtlasScriptManager:
А теперь наступает пора уже упоминавшегося контрола UpdatePanel. Дропдаун, грид и FormView мы поместим в обертку этого контрола:
<ContentTemplate>
содержимое
</ContentTemplate>
</atlas:UpdatePanel>
А теперь… А теперь всё, можете открыть страницу и проверить. Все наши запросы теперь проходят асинхронно без перезагрузки страницы. Как вы видели, всю страницу мы собрали практически не касаясь руками кода и совсем не влезая в code behind. Работа с контролами, входящими в Atlas Toolkit тоже проста до невозможности и хорошо задокументирована. В большинстве случаев вам будет достаточно просто добавить контрол на страницу и затем указать объект, функциональность которого необходимо «расширить».
Ну и текст получившейся страницы целиком:
<!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>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<atlas:ScriptManager ID=”AJAX_ScriptManager” EnablePartialRendering=”True” runat=”server” />
<atlas:UpdatePanel ID=”upDDL” runat=”server”>
<ContentTemplate>
<asp:DropDownList ID=”ddlFilter” runat=”server” AutoPostBack=”True”>
<asp:ListItem Value=”1″>Входящие</asp:ListItem>
<asp:ListItem Value=”2″>Отправленные</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</atlas:UpdatePanel>
<atlas:UpdatePanel ID=”upGV” runat=”server”>
<ContentTemplate>
<asp:GridView ID=”GridView1″ runat=”server” AllowPaging=”True” AllowSorting=”True”
AutoGenerateColumns=”False” DataKeyNames=”ID” DataSourceID=”SqlDataSource1″>
<Columns>
<asp:CommandField SelectText=”выбрать” ShowSelectButton=”True” />
<asp:BoundField DataField=”SubjectFrom” HeaderText=”Автор” SortExpression=”SubjectFrom” />
<asp:BoundField DataField=”SubjectTo” HeaderText=”Адресат” SortExpression=”SubjectTo” />
<asp:BoundField DataField=”Subject” HeaderText=”Тема” SortExpression=”Subject” />
<asp:BoundField DataField=”MessageSent” HeaderText=”Отправлено” SortExpression=”MessageSent” />
<asp:BoundField DataField=”Accepted_DateTime” HeaderText=”Прочитано” SortExpression=”Accepted_DateTime” />
</Columns>
</asp:GridView>
</ContentTemplate>
</atlas:UpdatePanel>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:SOI_AK_Test_ConnectionString %>”
SelectCommand=”wprov_get_client_messages” SelectCommandType=”StoredProcedure”>
<SelectParameters>
<asp:ControlParameter ControlID=”ddlFilter” DefaultValue=”1″ Name=”messageType” PropertyName=”SelectedValue”
Type=”Int32″ />
<asp:SessionParameter DefaultValue=”233″ Name=”clientId” SessionField=”cliID” Type=”Int32″ />
</SelectParameters>
</asp:SqlDataSource>
<atlas:UpdatePanel ID=”upFV” runat=”server”>
<ContentTemplate>
<asp:FormView ID=”FormView1″ runat=”server” DataSourceID=”SqlDataSource2″>
<ItemTemplate>
Автор:
<asp:Label ID=”SubjectFromLabel” runat=”server” Text=’<%# Bind(”SubjectFrom”) %>’></asp:Label><br />
Адресат:
<asp:Label ID=”SubjectToLabel” runat=”server” Text=’<%# Bind(”SubjectTo”) %>’></asp:Label><br />
Тема:
<asp:Label ID=”SubjectLabel” runat=”server” Text=’<%# Bind(”Subject”) %>’></asp:Label><br />
Отправлено:
<asp:Label ID=”MessageSentLabel” runat=”server” Text=’<%# Bind(”MessageSent”) %>’></asp:Label><br />
Получено:
<asp:Label ID=”Accepted_DateTimeLabel” runat=”server” Text=’<%# Bind(”Accepted_DateTime”) %>’></asp:Label><br />
<asp:Label ID=”ContentLabel” runat=”server” Text=’<%# Bind(”Content”) %>’></asp:Label><br />
</ItemTemplate>
</asp:FormView>
</ContentTemplate>
</atlas:UpdatePanel>
<asp:SqlDataSource ID=”SqlDataSource2″ runat=”server” ConnectionString=”<%$ ConnectionStrings:SOI_AK_Test_ConnectionString %>”
SelectCommand=”wprov_get_client_message” SelectCommandType=”StoredProcedure”>
<SelectParameters>
<asp:ControlParameter ControlID=”GridView1″ Name=”messageId” PropertyName=”SelectedValue”
Type=”Int32″ />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>