3. استخدم مكون المكرر لعرض مجموعة البيانات
مقدمة ذات صلة
هناك طرق مختلفة لعرض البيانات في ASP.NET، من بينها يعتبر Repeater مكونًا آخر موجودًا. ستعرض DataGrid البيانات دائمًا في "جدول". عندما نريد عرض البيانات بطريقة أكثر حرية، سنستخدم بالتأكيد عنصر التحكم Repeater.
وهو يحدد تنسيق إخراج البيانات في شكل قالب.
الخطوة 1. قم بإنشاء صفحة يمكننا إنشاء مكون مكرر لعرض البيانات عن طريق تغيير الصفحة الأصلية. إعادة تسمية Location1.htm إلى Location1.aspx. احذف الجزء الأصلي من الصفحة وأنشئ مجموعة بيانات كما في الفصل السابق، مع تصفية Region_IDEnterValue=1. دعونا نستخدم عنصر التحكم Repeater لإنشاء صفحات ديناميكية.
من أجل استخدام القوالب لتحديد تنسيق الإخراج، قم أولاً بإنشاء جدول. يمكننا أن نرى ذلك من خلال صفحة ApplicationàDatabases
هيكل قاعدة البيانات.
[الشكل 3-1 بنية قاعدة البيانات]
بناء على هيكل قاعدة البيانات، قم بتصميم الجداول التالية.
[الشكل 3-2 رسم تخطيطي للنموذج]
كيجب أن تكون البيانات مرتبطة بالجدول أدناه. اسحب عنصر البيانات من Bindings في لوحة Application إلى موضعه.
[الشكل 3-3 مربع حوار التجليد]
بعد ربط البيانات، تحصل على الصفحة التالية:
[الشكل 3-4 الصفحة بعد ربط البيانات]
يبدو الأمر أشبه بـ déjà vu، حيث يواصل Dreamwaver MX تقليد UltraDev المتمثل في تسليط الضوء على البيانات. ③ يمكن أيضًا تحديد نموذج تمثيل البيانات في مربع الحوار "الربط" بعد النقر فوق عنصر البيانات الموجود في الصفحة، يمكن تحديد نموذج تمثيل البيانات للبيانات المقابلة في "الربط".
[الشكل 3-5 نموذج تمثيل البيانات]
إذا كنت تريد استخدام هذا الجدول كقالب لعرض كافة عناصر البيانات، فستحتاج إلى تحديد كل هذا الجدول. انقر فوق "+" في عنصر سلوكيات الخادم في لوحة التطبيق وحدد عنصر تكرار المنطقة
[الشكل 3-6 تحديد منطقة التكرار] [الشكل 3-7 تحديد طريقة التكرار]
حدد الطريقة التي تريد تكرارها في منطقة التكرار وانقر فوق موافق. الآن يمكنك الضغط على "F12" لمعاينة الصفحة.
الخطوة 2: تحليل الكود (ملاحظة: من أجل عرض الكود، تحتوي جميع الرموز التالية على مسافات بعد "<" وقبل ">". نعتذر عن الإزعاج!)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
<قالب العنصر>
< عرض الجدول = "75%" الحدود = "0" >
<تر>
< td width="18%" >اسم الموقع< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > </ /td >
< /تر>
<تر>
< td >المدينة< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="19%" >العنوان< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /تر>
<تر>
< td >الدولة</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY"، الحاوية) % > < /td >
<td>الكود< /td>
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /تر>
<تر>
< td >الهاتف< /td >
< td > < %# DataSet1.FieldValue("هاتف"، حاوية) % > < /td >
< td > فاكس < /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /تر>
</الجدول>
< / قالب العنصر >
< /ASP:مكرر>
يعرض ASP.net كافة البيانات بشكل متكرر عن طريق إنشاء قالب ItemTemple، لذلك إذا كنت تريد تعيين نمط التكرار، فيمكنك القيام بذلك عن طريق تعيين القالب.
يمكننا أيضًا إضافة قوالب أخرى لتحقيق التأثير الذي نريده.
AlternatingItemTemplate: ينفذ البيانات عبر العرض. عرض البيانات بشكل متقاطع باستخدام قالب ItemTemplate الأصلي
قالب فاصل: قالب فاصل. يمكن استخدامها لفصل صفوف البيانات.
قالب الرأس: قالب الرأس. يظهر في الأعلى مع كافة البيانات.
قالب التذييل: قالب التذييل. يظهر في الأسفل مع كافة البيانات.
شكل التصميم الخاص به هو نفس ItemTemplate. ما عليك سوى إحاطة الجزء الذي تريد قالبه بعلامات.
توجد اختصارات لإدخال التعليمات البرمجية من خلال Dreamwaver MX. انقر فوق علامة التبويب ASP.NET في لوحة Insert، ثم انقر فوق علامة، سوف ينبثق مربع الحوار إضافة علامة. حدد مشروع القوالب في علامات ASP.NET. يمكنك بعد ذلك تحديد الرمز الذي تريد إضافته. سيضيف Dreamwaver MX الرمز في الموضع الذي كان فيه مؤشر الإدخال الأصلي.
[الشكل 2-1 مربع حوار إضافة علامة]
ما يلي هو التعليمات البرمجية الخاصة بـ AlternatingItemTemplate وSepartorTemplate وHeaderTemplate وFooterTemplate، والتي يمكن إدراجها في < ASP:Repeater > < /ASP:Repeater >.
< قالب الرأس >< لون الخط = "#666666" الحجم = "4" > الكل
الموقع< /الخط></قالب الرأس>
<AlternatingItemTemplate>
< عرض الجدول = "75%" الحدود = "0" bgcolor = "#CCCCCC" >
<تر>
< td width="17%" >اسم الموقع< /td >
< td colspan = "3" bgcolor = "#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
</ /تد>
< /تر>
<تر>
< td >المدينة< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Container) % > </ /td >
< td width="24%" >العنوان< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > </ /td >
< /تر>
<تر>
< td >الدولة</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY"، الحاوية) % > < /td >
<td>الكود< /td>
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /تر>
<تر>
< td >الهاتف< /td >
< td > < %# DataSet1.FieldValue("هاتف"، حاوية) % > < /td >
< td > فاكس < /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /تر>
</الجدول>
< /AlternatingItemTemplate >
< قالب فاصل >< عرض hr = "70٪" محاذاة = "يسار" >
< / قالب فاصل >
< قالب تذييل >< لون الخط = "#666666" حجم = "4" > نهاية < /font >< / قالب تذييل >
عندما يقوم IIS بتوزيع التعليمات البرمجية، فإنه سيضع القالب في الموضع النسبي استنادًا إلى الكلمات الأساسية وسيحصل على الصفحة المطلوبة في الأصل.
الصفحة التي تم إنشاؤها بواسطة البرنامج أعلاه هي كما يلي:
[الشكل 2-1 الصفحة الأخيرة]
يمكن لمكون التكرار إنشاء صفحة أكثر حرية، ولكن يمكن لكل صف عرض مجموعة واحدة فقط من البيانات. إذا كنت تريد إنشاء صفحة أكثر حرية، فلننتقل إلى القسم التالي ونستخدم عنصر التحكم DataList لعرض البيانات.