Практическое руководство. Добавление серверных веб-элементов управления Repeater на страницу Web Forms
Обновлен: Ноябрь 2007
Серверный веб-элемент управления Repeater является контейнерным элементом управления с привязкой к данным, который создает список отдельных элементов. Размещение отдельных элементов на веб-странице определяется с помощью шаблонов. Когда страница выполняется, данный элемент управления повторяет размещение каждого элемента в источнике данных. Для добавления серверного веб-элемента управления Repeater на страницу Web Forms необходимо выполнить несколько шагов. Следующая процедура содержит минимум действий, которые необходимо выполнить для создания функционирующего элемента управления Repeater.
Добавление серверного веб-элемента управления Repeater на страницу Web Forms
В режиме конструктора из вкладки Данные в панели элементов перетащите элемент управления источником данных на страницу, например, элемент управления SqlDataSource или ObjectDataSource.
Для определения соединения и запроса или метод извлечения данных для элемента управления источником данных используйте мастер Настройки источника данных. Мастер Настройки источника данных доступен для всех источников данных кроме элемента управления SiteMapDataSource, которому требуется только наличие site map для заполнения элемента управления. Чтобы открыть мастер Настройки источника данных, выполните следующие шаги:
Щелкните правой кнопкой мыши элемент управления источником данных, а затем выберите команду Показать смарт-тег.
В окне задач источника данных нажмите кнопку Настройка источника данных.
С вкладки Данные панели элементов перетащите элемент управления Repeater на страницу.
Щелкните правой кнопкой мыши элемент управления Repeater и выберите команду Показать смарт-тег.
В списке Выбор источника данных выберите имя элемента управления источником данных, который был создан в шаге 1 и 2.
Таким образом устанавливается свойство DataSourceID элемента управления. Если запрос содержит первичный ключ, то при этом также присваивается значение свойству DataKeyField элемента управления.
Чтобы перейти в режим исходного кода, щелкните вкладку Источник.
Для задания шаблонов необходимо перейти в режим исходного кода.
Добавьте элемент <ItemTemplate> на страницу в качестве дочернего элемента управления Repeater. Сведения о синтаксисе см. в разделе Декларативный синтаксис серверного веб-элемента управления Repeater.
.gif "Примечание")
Примечание.Чтобы элемент управления Repeater отображался во время работы, он должен содержать ItemTemplate, который, в свою очередь, содержит выражения привязки данных формы <%# Eval("field name") %>, где field name — имя поля в базе данных. Дополнительные сведения об использовании шаблонов см. в разделе Шаблоны серверных веб-элементов управления ASP.NET.
Добавьте HTML и любой другой серверный веб-элемент управления или серверный HTML-элемент управления в ItemTemplate.
По желанию можно задать следующие шаблоны: AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.
В следующем примере кода показывается, как использовать элемент управления Repeater для отображения данных в таблице HTML. Элемент table начинается в HeaderTemplate и заканчивается в FooterTemplate. В основной части элемента управления Repeater ячейки таблицы используются для отображения столбцов из источника данных. Элемент AlternatingItemTemplate аналогичен элементу ItemTemplate за исключением цвета фона ячеек таблицы, который отличается.
<%@ 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 id="Head1" runat="server"> <title>ASP.NET Repeater Example</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <table> <tr> <th> Name</th> <th> Description</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="background-color:#CCFFCC"> <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' /> </td> <td style="background-color:#CCFFCC"> <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' /> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr> <td> <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' /> </td> <td> <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' /> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"></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 id="Head1" runat="server"> <title>ASP.NET Repeater Example</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <table> <tr> <th> Name</th> <th> Description</th> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="background-color:#CCFFCC"> <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' /> </td> <td style="background-color:#CCFFCC"> <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' /> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr> <td> <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' /> </td> <td> <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' /> </td> </tr> </AlternatingItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"></asp:SqlDataSource> </div> </form> </body> </html>