أداة ListView في ASP.NET 3.5

[خليل سليم]

بسم الله الرحمن الرحيم

إن عرض البيانات بطريقة جميلة للزائر هو أساس عمل مطورو المواقع، وقد وفرت مايكروسوفت مجموعة أدوات تحت بند Data في صندوق الأدوات لهذا العرض، فإن أردت عرض البيانات على شكل جدول فإنك ستستخدم على سبيل المثال أداة GridView، وإن أردت عرض البيانات في عمودين أو أكثر فإنك ستستخدم DataList وغيرها. ولنعرض البيانات التالية من القاعدة باستخدام أداة ال GridView بالشكل التالي :



إن مخرجات قاعدة البيانات ستكون في النهاية على شكل جدول من صفوف وأعمدةـ والسبب هو أن أداة الجريد فيو ستترجم ليفهمها المتصفح في النهاية على أنها وسوم HTML تقليدية.

وهنا السؤال: كيف يمكننا التحكم بشكل العرض للبيانات في أداة ال GridView؟؟ طريقة العرض للبيانات في أداة ال GridView محدودة فلا يمكنك عرض البيانات بالشكل وبالتنسيق الذي تريده، فمثلا أردت عرض المخرجات النهائية على شكل div أو أردت عرضها بأي طريقة مخرجات بعيدة عن الجدول وصفوفه. عندها أداة GridView لن تسعفك. مشكلة أخرى ستواجهك لو احتجت أن تعرض البيانات بأكثر من عمود واحد وأيضا بعرضها بأكثر من صفحة واحدة ..ماذا ستستخدم ؟؟ لن تستطيع استخدام أداة ال GridView لأمر كهذا لأنها لا تدعم عرض البيانات بأكثر من عمود واحد، ولن تستطيع استخدام أداة ال DataList لأنها لا تدعم عرض البيانات في أكثر من صفحة. إذا: ما هو الحل؟؟ شركة مايكروسوفت لا تغفل أبدا عن منتجاتها وتسعى دائما لتقديم الأفضل، فقد أضافت أداة جديدة مع منصة العمل 3.5 وهي أداة ال ListView والتي جمعت مميزات GridView و DataList و Repeater، بل وتميزت بأمور أخرى أفضل، فأنت تستطيع عرض البيانات بالشكل الذي تريده وأيضا بالتنسيق الذي تريده باستخدام CSS، بعكس الأدوات الأخرى فأنت لا تستطيع استخدام CSS معها بكل حرية في بناء هيكل الجدول.



ولن تتضح الأمور إلا بمثال يبرز المميزات الرائعة التي تتميز بها هذه الأداة:
في مثالنا سنعمل على قاعدة بيانات تحتوي على جدول باسم country يحتوي على ثلاث حقول هي ( رقم الدولة ، اسم الدولة ، العاصمة )
أداة ال ListView تحتوي على عدة قوالب كل له وظيفته الخاصة وهذه القوالب هي :
* LayoutTemplate : وهي تختص بالعنصر الأساسي الذي يعرف محتوى ال ListView مثل عنصر table أو div أو span التي تحيط بالمحتوى المعرف بداخل القالب ItemTemplate أو القالب GroupTemplate بمعنى آخر هي خلفية البيانات؟
* ItemTemplate : وهي تتحكم بالمحتوى الذي سيعرض العناصر الفرعية وهي عبارة عن عرض البيانات المرتبطة بال ListView على شكل متكرر
* ItemSeparatorTemplate : تستخدم لوضع فواصل بين العناصر
* GroupTemplate : وهي تختص بترتيب العناصر على شكل مجموعات
* GroupSeparatorTemplate : تستخدم لوضع فواصل بين المجموعات
* EmptyItemTemplate : تستخدم لعرض نص أو غيره في حال عدم وجود قيمة لإحدى عناصر ال ListView
* EmptyDataTemplate : تستخدم لعرض نص أو غيره في حال عدم وجود بيانات في ال ListView
* SelectedItemTemplate : تستخدم لعملية اختيار أحد العناصر المعروضة في ال ListView
* AlternatingItemTemplate : تستخدم لعرض عنصر بعد كل ItemTemplate
* EditItemTemplate : تستخدم لعملية التعديل
* InsertItemTemplate : تستخدم لعملية الإضافة

والهيكل العام لهذه القوالب في ال ListView تعرض بالشكل التالي :



الآن نعود إلى مثالنا :
يتم إضافة أداة ال ListView وتخصيص مصدر البيانات لها من خلال الخاصية DataSourceID
وأهم قالبين من قوالب ال ListView هما
LayoutTemplate
ItemTemplate ويجب تخصيص العنصر placeHolder في ال ListView إما في ال LayoutTemplate أو ال GroupTemplate ويتم ذلك بإعطاء القيمة itemPlaceholder لخاصية ID التابعة للأداة ويجب أيضا إعطاء القيمة server للخاصية runat التابعة لل placeholder ـ حيث سيتم استبدال محتوى أداة placeHolder في الهيكل العام ( الخلفية ) بمحتوى العنصر ItemTemplate

<asp:ListView ID="ListView1" DataSourceID="SqlDataSource1" runat="server">
<LayoutTemplate>
<table border="1" width="300" cellpadding="5">
<tr id="Tr1" runat="server" style="background-color: #CCCCCC;">
<th id="Th1" runat="server" align="left">رقم</th>
<th id="Th2" runat="server" align="left">الدولة</th> 
<th id="Th3" runat="server" align="left">العاصمة</th> 
</tr>
 
<tr id=" itemPlaceholder" runat="server"></tr> 
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td align="left"> <asp:Label ID="CountryID" runat="server"><%#Eval("CountryID")%></asp:Label> </td>
<td align="left"> <asp:Label ID="CountryName" runat="server"><%#Eval("CountryName")%></asp:Label> </td>
<td align="left"> <asp:Label ID="CapitalCity" runat="server"><%#Eval("CapitalCity")%></asp:Label> </td>
</tr>
</ItemTemplate>
</asp:ListView>

والقيمة itemPlaceholder هو الاسم الافتراضي للأداة placeholder ولكن تستطيع تغييره بإعطاء الخاصية itemPlaceHolderID التابعة لأداة ال ListView الاسم الذي تريده بالشكل التالي :

<asp:ListView ID="ListView1" DataSourceID="SqlDataSource1" ItemPlaceholderID="Placeholder1" runat="server">
<LayoutTemplate>
<table border="1" width="300" cellpadding="5">
<tr id="Tr1" runat="server" style="background-color: #CCCCCC;">
<th id="Th1" runat="server" align="left">رقم</th>
<th id="Th2" runat="server" align="left">الدولة</th>
<th id="Th3" runat="server" align="left">العاصمة</th>
</tr>
<tr id="Placeholder1" runat="server"></tr>
</table>
</LayoutTemplate>
</asp:ListView>

قمنا هنا بتعريف الهيكل العام لل ListView في وسم LayoutTemplate وهو جدول يحتوي على صفين وثلاث أعمدة ، والصف الأول يحتوي على أسماء الأعمدة والصف الثاني هو الصف الذي سيتكرر مع كل صف تم جلبه من نتيجة مصدر البيانات
وستكون النتيجة بالشكل التالي:



وللتفريق بين الصفوف المتتابعة يتم استخدام وسم AlternatingItemTemplate فمحتوى هذا الوسم هو نفس محتوى وسم ItemTemplate ولكن بتلوين الصف بلون مخالف فيتم إضافة الوسوم التالية إلى الأداة :

<AlternatingItemTemplate>
<tr id="Tr3" runat="server" style="background-color: #FFFFCC;">
<td align="left"> <asp:Label ID="Label1" runat="server"><%# Eval("CountryID")%></asp:Label> </td> 
<td align="left"> <asp:Label ID="CountryName" runat="server"><%#Eval("CountryName")%></asp:Label> </td> 
<td align="left"> <asp:Label ID="CapitalCity" runat="server"><%#Eval("CapitalCity")%></asp:Label> </td> 
</tr> 
</AlternatingItemTemplate>

فتصبح النتيجة بالشكل التالي :


وهكذا نكون قد كونا الهيكل العام لأداة ال ListView وسيتم توضيح باقي القوالب في مواضيع أخرى بإذن الله

هنالك جدول لم استطع نسخه من المقال يمكنكم متابعته من هذا الرابط
http://developers.ps/articles.aspx?id=45

[عبدالله حسن]

UP

شرح رائع و مجهود جميل أخي برمودا.. و عساك على القوة .. واصل!

و ارجو ان يكون هناك من سيستفيد من هذا الدرس !

[خليل سليم]

اهلين بيك اخي عبدالله

والشكر لك أنت على مواضيعك المميزة