الصفحة الرئيسية>دروس تصميم الويب>البرنامج التعليمي لبرنامج دريمويفر

DreamwaverMX وASP.NET(4)

الكاتب：Eve Cole وقت التحديث：2009-05-31 21:06:17
4. استخدم مكون DataList لعرض مجموعة البيانات

مقدمة ذات صلة:

DataList عبارة عن عنصر تحكم مكرر محسّن، بالإضافة إلى الوظائف الأصلية لـ Repeater، يمكنه أيضًا تعيين عدد البيانات المعروضة في سطر واحد (RepeatColumn)، والقالب المحدد (SelectedItemTemple)، وقالب العنصر الذي تم تحريره (EditTemplate). ومع ذلك، سيقوم DataList بترتيب بيانات الإخراج في جدول وإخراجها، بينما يكون Repeater أكثر ولاءً لتعريف القالب ولن يضيف أي علامات HTML. (ملاحظة: لعرض الرمز، تحتوي جميع الرموز التالية على مسافات بعد "<" وقبل ">". نعتذر عن الإزعاج!)

الخطوة 1: إنشاء الصفحة

الصفحة التي نريد إنشاءها هي كما هو موضح أدناه. عندما نضغط على الرابط التشعبي للتفاصيل، ستظهر المعلومات التفصيلية، كما هو موضح في العنصر الأول. عند النقر فوق "إغلاق"، سيتم إغلاق التفاصيل واستعادتها إلى مظهرها الأصلي.


[الشكل 1-1 صفحة توضيحية]

ابدأ بتحديد البيانات التي تريد عرضها. لعرض بيانات أوروبا (أي Region_ID=3)، يمكننا اختيار تصفية بيانات Region_ID=3 في إعدادات مجموعة البيانات.


[الشكل 1-2 فحص البيانات]

استخدم عنصر التحكم Datalist لإنشاء صفحة تعرض البيانات لفترة وجيزة. لنقم أولاً بإنشاء صفحة بدون بيانات. ثم حدد سلوك الخادم في لوحة التطبيق. انقر فوق "+" وحدد DataList.


[الشكل 1-3 صفحة اختيار قائمة البيانات]

في مربع الحوار المنبثق، يمكننا إضافة قوالب الصفحة عند الحاجة.

u الرأس: قالب الرأس

u العنصر: قالب عنصر البيانات

u العنصر البديل: قالب العرض المتقاطع

u تحرير العنصر: تعديل القالب ((لا يتم عرضه افتراضيًا، يجب عرضه من خلال استجابة الحدث)

u العنصر المحدد: القالب الذي يتم عرضه بعد التحديد (يجب أن يتم عرضه أيضًا من خلال استجابة الحدث)

ش الفاصل: قالب منفصل

u التذييل: قالب أسفل الجدول


[الشكل 1-4 مربع حوار تحرير قائمة البيانات]
يمكننا إنشاء القالب المطلوب عن طريق إضافة كود HTML إلى المحتويات، ويمكننا أيضًا النقر فوق زر لإضافة عناصر البيانات. بعد النقر على الزر، سينبثق مربع حوار عنصر البيانات مما يسمح لك بتحديد البيانات المطلوبة. وأضفه في مربع إدخال المحتويات

< %# DataBinder.Eval(Container.DataItem, "عنصر البيانات") % >

يتم استخدام الكود لعرض البيانات.


[الشكل 1-5 إضافة عناصر البيانات]

لتحقيق تأثير المعاينة، قم أولاً بإضافة الكود: اسم الموقع إلى الرأس. يستخدم لعرض العنوان. إضافة رمز إلى العنصر:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >، استخدم Location_name كعنوان لكل عنصر.

إضافة رمز إلى العنصر البديل

< Fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >

عرض البيانات بألوان الخطوط المختلفة.

على الرغم من أنه لا يمكن عرض العنصر المحدد على الفور، إلا أنه يجب علينا أيضًا كتابة الرمز للاتصال لاحقًا. على النحو التالي:

عنوان:

< %# DataSet1.FieldValue("ADDRESS", Container) % >

<ر>

مدينة:

< %# DataSet1.FieldValue("CITY", Container) % >

<ر>

الهاتف:

< %# DataSet1.FieldValue("TELEPHONE", Container) % >

<ر>

انقر فوق "موافق"، ثم قم بمعاينة الصفحة. الصورة أدناه هي تأثير التعليمات البرمجية أعلاه. سنقوم بتنفيذ تأثير عرض العنصر المحدد في لحظة.


[الشكل 1-6 المعاينة الأولية]
أحد الاختلافات بين DataList وRepeter هو أنه يمكنك تعيين صف واحد لعرض بيانات متعددة، والتي يمكن تعيينها في نافذة تحرير DataList.


[الشكل 1-7 إعداد سطر واحد لعرض بيانات متعددة]

إن تحديد خيار استخدام فواصل الأسطر يحتوي ببساطة على علامة <BR> لفصل البيانات. حدد استخدام جدول للإخراج في نموذج جدول، ويمكنك تحديد عدد البيانات المعروضة في صف واحد عن طريق تعيين أعمدة الجدول.

الخطوة 2 اكتب الكود

يجب عرض العنصر المحدد خلال الأحداث، لذا نحتاج إلى إنشاء زر لبدء الحدث.

ي أضف زر الرابط لإنشاء الأحداث. حرك المؤشر بين <ItemTemplate> و</ItemTemplate> في نافذة التعليمات البرمجية المصدر، وانقر فوق المزيد من العلامات ، حدد عنصر التحكم asp:LinkButton في مربع الحوار المنبثق.


[الشكل 2-1 مربع حوار منتقي العلامات]

في مربع الحوار Edit LinkButton، قم بتعيين خصائص LinkButton. أدخل الاسم: التفاصيل في مربع إدخال المعرف.

أدخل "التفاصيل" في اسم الأمر للأمر الذي يُنشئ الحدث، وأدخل التفاصيل في مربع حوار النص (سيتم عرضه)


[الشكل 2-2 مربع تحرير زر الرابط]

ثم حدد اللون المطلوب في التخطيط وانقر فوق "موافق" لإنشاء التعليمات البرمجية.

< asp:LinkButton BackColor = "#FFFFFF" CommandName = "التفاصيل" ForeColor = "#000000" ID = "التفاصيل" runat = "server" Text = "التفاصيل" >< /asp:LinkButton >

من أجل الحصول على هذا التأثير في العرض المتقاطع، نحتاج إلى إدراج نفس الكود في <AlternatingItemTemplate> و </AlternatingItemTemplate>.
في الوقت نفسه، لإغلاق قالب التحديد المنبثق، يجب أيضًا إنشاء أمر، لذلك يجب إضافة زر ارتباط آخر. يتطلب هذا إدخال التعليمات البرمجية في <SelectedItemTemplate></SelectedItemTemplate>:

< asp:LinkButton BackColor = "#FFFFFF" CommandName = "Close" ForeColor = "#000000" ID = "Close" runat = "server" Text = "Close" >< /asp:LinkButton >

kمع الأمر، نحتاج أيضًا إلى استخدام برنامج لتفسير الأمر. في الواقع، العملية ليست معقدة، ولا يلزم إضافة سوى كمية صغيرة من التعليمات البرمجية. أضف الكود التالي في < head >< </ / head > :

< لغة البرنامج النصي = "VB" runat = "الخادم" >

Sub DataList_ItemCommand(المرسل ككائن، e كـ DataListCommandEventArgs)

إذا كان e.CommandSource.CommandName = "التفاصيل" ثم

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName='Close' ثم

DataList1.SelectedIndex=-1

نهاية إذا

DataList1.DataBind()

نهاية الفرعية

<// البرنامج النصي >

يمكن للبرنامج الحصول على الأمر (CommandName) عند النقر فوق LinkButton لتحديد البرنامج المطلوب تنفيذه. عند تعيين خاصية SelectedIndex الخاصة بـ DataList على e.Item.ItemIndex، سيتم فتح صفحة SelectedItemTemplate. إذا كان الأمر إغلاق وتم تعيين خاصية SelectedIndex الخاصة بـ DataList على -1 (أي لم يتم تحديد أي عنصر بيانات)، فسوف تستخدم DataList قالب عنصر ItemTemplate لعرض عنصر البيانات هذا.

قم أيضًا بإضافة مقتطف التعليمات البرمجية في < asp:DataList >

OnItemCommand = "DataList_ItemCommand"

لإعلان العلاقة مع مقطع البرنامج DataList_ItemCommand.

اضغط على "F12" للمعاينة، وستعرض الصفحة التأثير المتوقع.


[الشكل 2-3 نسخة المعاينة النهائية]
مرفق الكود المصدري لجزء البرنامج الرئيسي:

Sub DataList_ItemCommand(المرسل ككائن، e كـ DataListCommandEventArgs)

إذا كان e.CommandSource.CommandName = "التفاصيل" ثم

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName='Close' ثم

DataList1.SelectedIndex=-1

نهاية إذا

DataList1.DataBind()

نهاية الفرعية

< نموذج التشغيل = "الخادم" >

< asp:معرف DataList = "DataList1"

رونات = "الخادم"

تكرار الأعمدة = "1"

كرر الاتجاه = "عمودي"

تكرار التخطيط = "التدفق"

مصدر البيانات = "< %# DataSet1.DefaultView % >"

OnItemCommand = "DataList_ItemCommand" >

<قالب الرأس>

اسم الموقع < /HeaderTemplate>

<قالب العنصر>

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

< asp:linkbutton BackColor = "#FFFFFF" CommandName = "التفاصيل" ForeColor = "#000000" ID = "التفاصيل" runat = "server" Text = "التفاصيل" >< /asp:linkbutton >

< / قالب العنصر >

< AlternatingItemTemplate >< لون الخط = "#0000FF" >

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

< /الخط>

< asp:linkbutton BackColor = "#FFFFFF" CommandName = "Detail" ForeColor = "#000000" ID = "Detail" runat = "server" Text = "Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

<SelectedItemTemplate>العنوان:

< %# DataSet1.FieldValue("ADDRESS", Container) % >

<ر>

مدينة:

< %# DataSet1.FieldValue("CITY", Container) % >

<ر>

الهاتف:

< %# DataSet1.FieldValue("TELEPHONE", Container) % >

<ر>

< asp:LinkButton BackColor = "#FFFFFF" CommandName = "Close" ForeColor = "#000000" ID = "Close" runat = "server" Text = "Close" >< /asp:LinkButton >

< /SelectedItemTemplate >

< /asp:قائمة البيانات>

< / النموذج>

يحتوي DataList أيضًا على قالب لتحرير العنصر، والذي يستخدم بشكل أساسي لتحديثات البيانات. وسيتم تقديم هذا الكتاب في قسم لاحق.
مقالات ذات صلة