ASP.NET - مستطيل التكرار

مستطيل التكرار يتم استخدامه لعرض قائمة العناصر المتكررة، التي تقتصر على هذا المستطيل.

مثال

مستطيل التكرار
جهاز التكرار مع <AlternatingItemTemplate>
جهاز التكرار مع <SeparatorTemplate>

ربط DataSet بجهاز التكرار

مستطيل التكرار يتم استخدامه لعرض قائمة العناصر المتكررة، التي تقتصر على هذا المستطيل. يمكن ربط مستطيل التكرار بجدول البيانات أو ملف XML أو قائمة عناصر أخرى. هنا، سنعرض كيفية ربط ملف XML إلى مستطيل التكرار.

سنستخدم في هذا المثال ملف XML التالي ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>

يرجى الرجوع إلى هذا ملف XML:cdcatalog.xml

أولاً، قم بتعريف مساحة الأسماء "System.Data". نحتاج إلى هذه المساحة للعمل مع كائن DataSet. في الجزء العلوي من صفحة .aspx، تحتوي على التعليمات التالية:

<%@ Import Namespace="System.Data" %>

ثم قم بإنشاء Dataset لهذا الملف XML، واقم بتحميل هذا الملف XML إلى Dataset عند تشغيل الصفحة لأول مرة:

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
fin if
fin sub

ثم نقوم بإنشاء عنصر Repeater في صفحة .aspx. يتم عرض محتوى علامة <HeaderTemplate> مرة واحدة فقط في الناتج، بينما يتم عرض محتوى علامة <ItemTemplate> بشكل متكرر للسجلات في Dataset "record"، وأخيرًا يتم عرض محتوى علامة <FooterTemplate> مرة واحدة فقط في الناتج:

<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

ثم نضيف سكريبت يمكن إنشاء Dataset، ونقوم بتحميل هذا Dataset المسمى mycdcatalog إلى عنصر Repeater، ونستخدم علامات HTML لملء عنصر Repeater، ونقوم بتحميل بيانات العنصر إلى جزء <ItemTemplate> باستخدام طريقة <%#Container.DataItem("fieldname")%>:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
fin if
fin sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

اعرض هذا المثال

استخدام <AlternatingItemTemplate>

يمكنك إضافة علامة <AlternatingItemTemplate> بعد علامة <ItemTemplate> لوصف مظهر السطور المتناوبة. في المثال التالي، سيتم عرض كل سطر في الجدول كخلفية رمادية خفيفة:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
fin if
fin sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

اعرض هذا المثال

استخدام <SeparatorTemplate>

النوعية <SeparatorTemplate> يمكن استخدامها لوصف علامة التباين بين كل سجل. في المثال التالي، يتم إدراج خط أفقي بين كل سطر في الجدول:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
fin if
fin sub
</script>
<html>
<body>
<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">
<HeaderTemplate>
<table border="0" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>
<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

اعرض هذا المثال