Элемент Repeater очень удобен в случае необходимости вывода на страницу несколько однотипных блоков инофрмации. Легче всего понять назначение репитера возможно рассмотрев пример вывода на странице .aspx блоков с анонсами статей, содержимое которых находится в БД.
Для начала определимся с постановкой вопроса.
Предположим, мы хотим на странице default.aspx блочно выводить минимальную информацию о имеющихся статьях в БД.
Как это может выглядеть?!
Да хотя бы так:
То есть, необходимо вывести из БД иконку (или путь на сервере к файлу иконки), название статьи, краткое описание статьи, дату публикации, публикатора (автора), количество просмотров и рейтинг. А также не забыть сформировать ссылку для перехода к полному тексту статьи.
Таким образом, каждый блок будет представлять собой некую заговку каждой отдельной статьи. Имея 10 статей, мы должны получить 10 блоков.
Структуру БД рассматривать не будем, её мы можем восстановить из пользовательского типа на c#:
public class Article
{
public int ID { get; private set; }
public DateTime AddDate { get; private set; }
public string Title { get; private set; }
public string Prebody { get; private set; }
public float Rating { get; private set; }
public int ViewCount { get; private set; }
public string Icon { get; private set; }
public string Autor { get; private set; }
public Article(
int id,
DateTime addDate,
string title,
string prebody,
string body,
float rating,
int viewCount,
string icon,
string autor)
{
this.Id = id;
this.AddDate = addDate;
this.Category = category;
this.Title = title;
this.Prebody = prebody;
this.Rating = rating;
this.ViewCount = viewCount;
this.Icon = icon;
this.Autor = autor;
}
}
Тип Article инкапсулирует собой необходимую информацию о конкретной статье, представляя открытые для чтения свойства, отображаемые на столбцы таблицы статей в БД.
И класс, представляющий методы для работы с типом Article:
public class BLL
{
public static List GetAllArticles ()
{
using (SqlConnection cn =
new SqlConnection(ConfigurationManager.
ConnectionStrings["MyConnectionString"].
ConnectionString))
{
string query = @"SELECT TOP(10) id, addDate,
title, prebody, viewCount, icon, autor,
allRating/amountOfRated AS rating
FROM [articlesTable]
ORDER BY addDate DESC";
var cmd = new SqlCommand(query, cn);
cn.Open();
SqlDataReader reader = cmd.ExecuteReader();
List<Article> articles = new List<Article>();
while (reader.Read())
{
Article art = new Article(
(int)reader["id"],
(DateTime)reader["addDate"],
reader["title"].ToString(),
reader["prebody"].ToString(),
float.Parse(reader["rating"].ToString()),
(int)reader["viewCount"],
reader["icon"].ToString(),
reader["autor"].ToString());
articles.Add(art);
}
return articles;
}
}
}
Теперь, можно заняться непосредственно созданием шаблона на основе Repeater.
Сам по себе Repeater бесполезен, и лишь в привязке к любому из сурс-контролов способен генерировать необходимую html-разметку.
Поэтому следующим шагом создаем ObjectDataSource и настраиваем его на получение требуемых книг из БД:
<asp:ObjectDataSource ID="Ods_Articles" runat="server"
SelectMethod="GetAllArticles" TypeName="BLL">
</asp:ObjectDataSource>
Как видите, в нем мы указали имя класса TypeName="BLL", содержащего метод SelectMethod="GetAllArticles" для получения данных из БД.
Ну и теперь сам репитер:
<asp:Repeater ID="RptArt" runat="server"
DataSourceID="Ods_Articles">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<table>
<tr>
<td><span><%# Eval("Icon")%></span></td>
<td><h2><%# Eval("Title")%></h2><br />
<div><%# Eval("Prebody")%></div></td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td align="left">
<div>
<img align="left" hspace="16px"
src="Images/publcite.jpg" />
<%# Eval("AddDate", "{0:dd.MM.yyyy}")%>
<img src="Images/author.jpg" hspace="16px"/>
<%# Eval("Autor")%> Просмотрено <
%# Eval("ViewCount")%>
</div>
</td>
<td align="right">
<%# Rating.MakeRating(float.Parse(Eval("Rating").ToString()))%>
<br /><br />
<a href="Default.aspx?id=<
%# Eval("ID")%>" id="A1">Читать статью</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Что здесь интересного?!
Первое, с чем приходится познакомиться, это сама структура Repeater.
<asp:Repeater ID="RptArt" runat="server"
DataSourceID="Ods_Articles">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
Каждый репитер состоит из парного тега <asp:Repeater>, представляющего область самомго Repeater, <HeaderTemplate> - предсталяющего заголовок контрола, <ItemTemplate> - представляющего основную часть (для нас самую востребованную) и <FooterTemplate> - подпись.
В каждом из блоков может содержаться все что угодно, ну практически все, что требуется. Однако, акцент следует устанавливать именно на , поскольку именно данный блок умеет «множиться» и тем самым генерировать одинаковую html-разметку под форматированный вывод информации из списка List<Article> articles.
Как видите, формирование разметки начинается в блоке <HeaderTemplate> и заканчивается <FooterTemplate>.
В блоке <ItemTemplate> мы задаем html-шаблон для генерирования под каждую статью требуемого шаблона html-разметки.
Принимаемые Repeater-ом данные от связанного контрола ObjectDataSource мы выводим с помощью записей типа <%# Eval("Autor")%>, где в функции Eval задаем имя открытого свойства, информацию из которого следует получить в данном месте разметки.
Да, еще одно!
Запись <%# Rating.MakeRating(float.Parse(Eval("TotalRating").ToString()))%>
указывает на то, что данные из поля Rating следует предварительно обработать статическим методом MakeRating класса Rating, который просто-напросто возвращает ссылку на соответствующий графический файл.
Конечную html-разметку, полученную репитером я приводить не буду, тем более, что здесь я не представлял стили css, но вы обязательно просмотрите в браузере разметку, полученную вашим Repeater-ом. Уверен, после анализа исходной разметки и полученным результатом вы более приблизитесь к пониманию принципа работы Repeater.
Вот и все сложности. Работать с элементом Repeater достаточно просто, главное в нем – это создание идеальной разметки. А наполнение его данными вовсе не составляет труда.
В следующей статье я постараюсь подготовить для вас один интересный вариант использования Repeater-а для вывода одной статьи с множеством комментариев. Именно на репитере мы реализуем симбиоз текста статьи и всех её комментариев.
А пока постарайтесь осмыслить данную информацию и попробовать реализовать похожее у себя.
Во всяком случае очень советую вам взять для себя на заметку элемент Repeater.
Вторая часть статьи
HeaderTemplate и ItemTemplate